命名颜色 · #00A29E
Aqua Velvet
Aqua Velvet 即 #00A29E：rgb(0 162 158)、hsl(179 100% 32%)、oklch(0.643 0.111 191.7)。查看浅色调、深色调、和谐色、WCAG 与 APCA 对比度，以及 CSS、Tailwind v4 和 SCSS 代码。
What does Teal mean? → · Aqua Velvet color name →
#00A29E
oklch(0.643 0.111 191.7)
颜色转换
- HEX
- #00a29e
- RGB
- rgb(0 162 158)
- HSL
- hsl(179 100% 32%)
- HWB
- hwb(179 0% 36%)
- OKLCH
- oklch(0.643 0.111 191.7)
- OKLab
- oklab(0.643 -0.108 -0.022)
- CIE Lab
- lab(59.87 -37.04 -8.57)
- LCH
- lch(59.87 38.02 193)
- CMYK
- cmyk(100% 0% 2% 36%)
浅色调 · 深色调 · 灰色调
浅色调
- 3BABA7
- 58B5B1
- 70BEBA
- 86C7C4
- 9BD1CE
- B0DAD7
- C4E3E1
- D8ECEB
- EBF6F5
深色调
- 008C89
- 007774
- 006360
- 004F4D
- 003C3A
- 002A29
- 001918
- 000A09
- 000101
灰色调
- 2A9F9B
- 3C9C98
- 4A9895
- 559592
- 5E928F
- 668E8C
- 6E8B89
- 748786
- 7A8483
配色和谐
互补色 +180°
- 00A29E
Aqua Velvet
- C66F7C
≈ Lovebirds
类似色 -30° +30°
- 00A29E
Aqua Velvet
- 43A278
≈ Tropical Tone
- 239CBD
≈ Blue Horizon
三角配色 +120° +240°
- 00A29E
Aqua Velvet
- A379BE
≈ Wisteria
- B78138
≈ Colonel Mustard
分裂互补色 +150° +210°
- 00A29E
Aqua Velvet
- BB71A0
≈ Crocus
- C57556
≈ Spanish Peanut
四角配色 +90° +180° +270°
- 00A29E
Aqua Velvet
- 8284CF
≈ Twilight Twinkle
- C66F7C
≈ Lovebirds
- 9B8F35
≈ Banana Leaf
对比度与无障碍
Ag
Fail白底
WCAG 3.15:1 · APCA Lc 58
Ag
AA黑底
WCAG 6.66:1 · APCA Lc 44
最佳文字颜色: #000000
WCAG 6.66:1 (AA) · APCA Lc 44
Contrast pairs
代码片段
CSS
:root {
--aqua-velvet: #00a29e;
--aqua-velvet-rgb: 0 162 158;
--aqua-velvet-oklch: oklch(0.643 0.111 191.7);
}
.element {
color: var(--aqua-velvet);
background-color: hsl(179 100% 32%);
border-color: oklch(0.643 0.111 191.7);
}Tailwind CSS v4
@theme {
--color-aqua-velvet: #00a29e;
--color-aqua-velvet-50: #d2fffe;
--color-aqua-velvet-100: #bef4f2;
--color-aqua-velvet-200: #9be4e2;
--color-aqua-velvet-300: #6dc9c7;
--color-aqua-velvet-400: #39b3af;
--color-aqua-velvet-500: #009c98;
--color-aqua-velvet-600: #008481;
--color-aqua-velvet-700: #006a67;
--color-aqua-velvet-800: #004e4b;
--color-aqua-velvet-900: #003634;
--color-aqua-velvet-950: #00211f;
}SCSS
$aqua-velvet: #00a29e;
$aqua-velvet-rgb: 0, 162, 158;
$aqua-velvet-light: mix(#fff, $aqua-velvet, 20%);
$aqua-velvet-dark: mix(#000, $aqua-velvet, 20%);
.element {
color: $aqua-velvet;
box-shadow: 0 0 0 2px rgba($aqua-velvet, 0.35);
}