命名颜色 · #9CC2BF
Bleu Nattier
Bleu Nattier 即 #9CC2BF：rgb(156 194 191)、hsl(175 24% 69%)、oklch(0.786 0.041 190.4)。查看浅色调、深色调、和谐色、WCAG 与 APCA 对比度，以及 CSS、Tailwind v4 和 SCSS 代码。
What does Teal mean? → · Bleu Nattier color name →
#9CC2BF
oklch(0.786 0.041 190.4)
颜色转换
- HEX
- #9cc2bf
- RGB
- rgb(156 194 191)
- HSL
- hsl(175 24% 69%)
- HWB
- hwb(175 61% 24%)
- OKLCH
- oklch(0.786 0.041 190.4)
- OKLab
- oklab(0.786 -0.04 -0.007)
- CIE Lab
- lab(75.59 -13.61 -2.91)
- LCH
- lch(75.59 13.92 192.1)
- CMYK
- cmyk(20% 0% 2% 24%)
浅色调 · 深色调 · 灰色调
浅色调
- A6C8C5
- B0CECC
- BAD4D2
- C3DAD8
- CDE0DF
- D7E6E5
- E1ECEB
- EBF3F2
- F5F9F8
深色调
- 87A8A6
- 738F8D
- 5F7775
- 4C605E
- 394948
- 283433
- 18201F
- 090E0D
- 010202
灰色调
- 99BBB9
- 97B4B2
- 94AEAC
- 91A7A5
- 8FA09F
- 8C9A99
- 899392
- 868D8C
- 838686
配色和谐
互补色 +180°
- 9CC2BF
Bleu Nattier
- D2AFB3
≈ Ballet Rose
类似色 -30° +30°
- 9CC2BF
Bleu Nattier
- A3C2B0
≈ Green Silk
- 9DC0CC
≈ Stratosphere
三角配色 +120° +240°
- 9CC2BF
Bleu Nattier
- C1B2CD
≈ Frosted Orchid
- CAB59D
≈ Moose Mousse
分裂互补色 +150° +210°
- 9CC2BF
Bleu Nattier
- CCAFC1
≈ Winsome Orchid
- D1B1A6
≈ Damask Dunes
四角配色 +90° +180° +270°
- 9CC2BF
Bleu Nattier
- B4B7D4
≈ Hundred Waters
- D2AFB3
≈ Ballet Rose
- BFBA9D
≈ Good to Grow
对比度与无障碍
Ag
Fail白底
WCAG 1.92:1 · APCA Lc 37
Ag
AAA黑底
WCAG 10.88:1 · APCA Lc 66
最佳文字颜色: #000000
WCAG 10.88:1 (AAA) · APCA Lc 66
Contrast pairs
代码片段
CSS
:root {
--bleu-nattier: #9cc2bf;
--bleu-nattier-rgb: 156 194 191;
--bleu-nattier-oklch: oklch(0.786 0.041 190.4);
}
.element {
color: var(--bleu-nattier);
background-color: hsl(175 24% 69%);
border-color: oklch(0.786 0.041 190.4);
}Tailwind CSS v4
@theme {
--color-bleu-nattier: #9cc2bf;
--color-bleu-nattier-50: #e9f9f8;
--color-bleu-nattier-100: #d9eceb;
--color-bleu-nattier-200: #c1dad9;
--color-bleu-nattier-300: #a0bebd;
--color-bleu-nattier-400: #83a7a4;
--color-bleu-nattier-500: #678f8c;
--color-bleu-nattier-600: #577977;
--color-bleu-nattier-700: #46615f;
--color-bleu-nattier-800: #324745;
--color-bleu-nattier-900: #223130;
--color-bleu-nattier-950: #111d1c;
}SCSS
$bleu-nattier: #9cc2bf;
$bleu-nattier-rgb: 156, 194, 191;
$bleu-nattier-light: mix(#fff, $bleu-nattier, 20%);
$bleu-nattier-dark: mix(#000, $bleu-nattier, 20%);
.element {
color: $bleu-nattier;
box-shadow: 0 0 0 2px rgba($bleu-nattier, 0.35);
}