命名颜色 · #16A29A
Ceramic Blue Turquoise
Ceramic Blue Turquoise 即 #16A29A：rgb(22 162 154)、hsl(177 76% 36%)、oklch(0.644 0.108 188.5)。查看浅色调、深色调、和谐色、WCAG 与 APCA 对比度，以及 CSS、Tailwind v4 和 SCSS 代码。
What does Teal mean? → · Ceramic Blue Turquoise color name →
#16A29A
oklch(0.644 0.108 188.5)
颜色转换
- HEX
- #16a29a
- RGB
- rgb(22 162 154)
- HSL
- hsl(177 76% 36%)
- HWB
- hwb(177 9% 36%)
- OKLCH
- oklch(0.644 0.108 188.5)
- OKLab
- oklab(0.644 -0.107 -0.016)
- CIE Lab
- lab(59.92 -36.88 -6.22)
- LCH
- lch(59.92 37.4 189.6)
- CMYK
- cmyk(86% 0% 5% 36%)
浅色调 · 深色调 · 灰色调
浅色调
- 40ABA4
- 5CB5AD
- 73BEB7
- 88C7C1
- 9DD1CB
- B1DAD6
- C5E3E0
- D8ECEA
- ECF6F5
深色调
- 128C85
- 0D7771
- 09635E
- 064F4B
- 033C39
- 022A27
- 011917
- 000A09
- 000101
灰色调
- 319F97
- 419C95
- 4D9892
- 579590
- 60928D
- 678E8A
- 6E8B88
- 758785
- 7B8483
配色和谐
互补色 +180°
- 16A29A
Ceramic Blue Turquoise
- C57080
≈ Briar Rose
类似色 -30° +30°
- 16A29A
Ceramic Blue Turquoise
- 4BA174
≈ Tropical Tone
- 239CB9
≈ Sailfish
三角配色 +120° +240°
- 16A29A
Ceramic Blue Turquoise
- A07BC0
≈ Wisteria
- B8803D
≈ Monarch Gold
分裂互补色 +150° +210°
- 16A29A
Ceramic Blue Turquoise
- B873A4
≈ Eccentric Magenta
- C5755B
≈ Spanish Peanut
四角配色 +90° +180° +270°
- 16A29A
Ceramic Blue Turquoise
- 7F86CE
≈ Twilight Twinkle
- C57080
≈ Briar Rose
- 9E8E37
≈ Banana Leaf
对比度与无障碍
Ag
Fail白底
WCAG 3.14: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 {
--ceramic-blue-turquoise: #16a29a;
--ceramic-blue-turquoise-rgb: 22 162 154;
--ceramic-blue-turquoise-oklch: oklch(0.644 0.108 188.5);
}
.element {
color: var(--ceramic-blue-turquoise);
background-color: hsl(177 76% 36%);
border-color: oklch(0.644 0.108 188.5);
}Tailwind CSS v4
@theme {
--color-ceramic-blue-turquoise: #16a29a;
--color-ceramic-blue-turquoise-50: #d3fffc;
--color-ceramic-blue-turquoise-100: #bff4f0;
--color-ceramic-blue-turquoise-200: #9ee4df;
--color-ceramic-blue-turquoise-300: #70c9c4;
--color-ceramic-blue-turquoise-400: #3fb3ab;
--color-ceramic-blue-turquoise-500: #009c94;
--color-ceramic-blue-turquoise-600: #00847d;
--color-ceramic-blue-turquoise-700: #006a64;
--color-ceramic-blue-turquoise-800: #004e48;
--color-ceramic-blue-turquoise-900: #003632;
--color-ceramic-blue-turquoise-950: #00211e;
}SCSS
$ceramic-blue-turquoise: #16a29a;
$ceramic-blue-turquoise-rgb: 22, 162, 154;
$ceramic-blue-turquoise-light: mix(#fff, $ceramic-blue-turquoise, 20%);
$ceramic-blue-turquoise-dark: mix(#000, $ceramic-blue-turquoise, 20%);
.element {
color: $ceramic-blue-turquoise;
box-shadow: 0 0 0 2px rgba($ceramic-blue-turquoise, 0.35);
}