命名颜色 · #B1C6D1
Opal Waters
Opal Waters 即 #B1C6D1：rgb(177 198 209)、hsl(201 26% 76%)、oklch(0.814 0.028 230.4)。查看浅色调、深色调、和谐色、WCAG 与 APCA 对比度，以及 CSS、Tailwind v4 和 SCSS 代码。
What does Gray mean? → · Opal Waters color name →
#B1C6D1
oklch(0.814 0.028 230.4)
颜色转换
- HEX
- #b1c6d1
- RGB
- rgb(177 198 209)
- HSL
- hsl(201 26% 76%)
- HWB
- hwb(201 69% 18%)
- OKLCH
- oklch(0.814 0.028 230.4)
- OKLab
- oklab(0.814 -0.018 -0.021)
- CIE Lab
- lab(78.54 -5.68 -8.06)
- LCH
- lch(78.54 9.86 234.8)
- CMYK
- cmyk(15% 5% 0% 18%)
浅色调 · 深色调 · 灰色调
浅色调
- B9CCD6
- C0D1DA
- C8D7DF
- D0DDE3
- D8E2E8
- DFE8EC
- E7EEF1
- EFF3F6
- F7F9FA
深色调
- 99ACB5
- 83929B
- 6C7A81
- 576268
- 424B50
- 2F3539
- 1C2123
- 0C0E10
- 010202
灰色调
- ACBFC9
- A7B8C0
- A2B0B8
- 9DA9B0
- 98A2A8
- 939BA0
- 8F9498
- 8A8E90
- 858788
配色和谐
互补色 +180°
- B1C6D1
Opal Waters
- D2BEB3
≈ Summer Bloom
类似色 -30° +30°
- B1C6D1
Opal Waters
- AEC8C9
≈ Restful Retreat
- B8C3D5
≈ Virginia Blue
三角配色 +120° +240°
- B1C6D1
Opal Waters
- D1BBC4
≈ Queen’s Tart
- C3C4B0
≈ Kangaroo
分裂互补色 +150° +210°
- B1C6D1
Opal Waters
- D4BCBB
≈ Embroidery
- CCC1AF
≈ Oyster Grey
四角配色 +90° +180° +270°
- B1C6D1
Opal Waters
- CBBDCD
≈ My Mona
- D2BEB3
≈ Summer Bloom
- B9C7B6
≈ Pond’s Edge
对比度与无障碍
Ag
Fail白底
WCAG 1.76:1 · APCA Lc 33
Ag
AAA黑底
WCAG 11.86:1 · APCA Lc 70
最佳文字颜色: #000000
WCAG 11.86:1 (AAA) · APCA Lc 70
Contrast pairs
代码片段
CSS
:root {
--opal-waters: #b1c6d1;
--opal-waters-rgb: 177 198 209;
--opal-waters-oklch: oklch(0.814 0.028 230.4);
}
.element {
color: var(--opal-waters);
background-color: hsl(201 26% 76%);
border-color: oklch(0.814 0.028 230.4);
}Tailwind CSS v4
@theme {
--color-opal-waters: #b1c6d1;
--color-opal-waters-50: #eef7fc;
--color-opal-waters-100: #dfeaf0;
--color-opal-waters-200: #c9d7de;
--color-opal-waters-300: #aabac3;
--color-opal-waters-400: #8fa2ac;
--color-opal-waters-500: #748a95;
--color-opal-waters-600: #62757e;
--color-opal-waters-700: #4f5d65;
--color-opal-waters-800: #39444a;
--color-opal-waters-900: #272f33;
--color-opal-waters-950: #151c1f;
}SCSS
$opal-waters: #b1c6d1;
$opal-waters-rgb: 177, 198, 209;
$opal-waters-light: mix(#fff, $opal-waters, 20%);
$opal-waters-dark: mix(#000, $opal-waters, 20%);
.element {
color: $opal-waters;
box-shadow: 0 0 0 2px rgba($opal-waters, 0.35);
}