命名颜色 · #B0CCDA
Essex Blue
Essex Blue 即 #B0CCDA：rgb(176 204 218)、hsl(200 36% 77%)、oklch(0.829 0.036 229.4)。查看浅色调、深色调、和谐色、WCAG 与 APCA 对比度，以及 CSS、Tailwind v4 和 SCSS 代码。
What does Cyan mean? → · Essex Blue color name →
#B0CCDA
oklch(0.829 0.036 229.4)
颜色转换
- HEX
- #b0ccda
- RGB
- rgb(176 204 218)
- HSL
- hsl(200 36% 77%)
- HWB
- hwb(200 69% 15%)
- OKLCH
- oklch(0.829 0.036 229.4)
- OKLab
- oklab(0.829 -0.023 -0.027)
- CIE Lab
- lab(80.29 -7.5 -10.3)
- LCH
- lch(80.29 12.74 233.9)
- CMYK
- cmyk(19% 6% 0% 15%)
浅色调 · 深色调 · 灰色调
浅色调
- B8D1DE
- C0D6E1
- C8DBE5
- CFE0E9
- D7E5EC
- DFEAF0
- E7F0F4
- EFF5F8
- F7FAFB
深色调
- 99B1BD
- 8297A2
- 6C7E87
- 56656C
- 424E54
- 2E373C
- 1C2225
- 0B0F11
- 010202
灰色调
- ABC4D1
- A6BCC7
- A2B5BE
- 9DADB5
- 98A5AC
- 939EA3
- 8E969A
- 8A8F91
- 858789
配色和谐
互补色 +180°
- B0CCDA
Essex Blue
- DBC1B3
≈ Marshmallow Cocoa
类似色 -30° +30°
- B0CCDA
Essex Blue
- ADCFD0
≈ Dewpoint
- B9C8DF
≈ Penna
三角配色 +120° +240°
- B0CCDA
Essex Blue
- DABECA
≈ Fragrant Orchid
- C8C9AF
≈ Spring Hill
分裂互补色 +150° +210°
- B0CCDA
Essex Blue
- DEBEBE
≈ Fizzing Whizbees
- D4C5AD
≈ Khaki Shade
四角配色 +90° +180° +270°
对比度与无障碍
Ag
Fail白底
WCAG 1.68:1 · APCA Lc 30
Ag
AAA黑底
WCAG 12.49:1 · APCA Lc 73
最佳文字颜色: #000000
WCAG 12.49:1 (AAA) · APCA Lc 73
Contrast pairs
代码片段
CSS
:root {
--essex-blue: #b0ccda;
--essex-blue-rgb: 176 204 218;
--essex-blue-oklch: oklch(0.829 0.036 229.4);
}
.element {
color: var(--essex-blue);
background-color: hsl(200 36% 77%);
border-color: oklch(0.829 0.036 229.4);
}Tailwind CSS v4
@theme {
--color-essex-blue: #b0ccda;
--color-essex-blue-50: #ebf7fe;
--color-essex-blue-100: #ddeaf2;
--color-essex-blue-200: #c6d7e1;
--color-essex-blue-300: #a6bbc7;
--color-essex-blue-400: #89a3b0;
--color-essex-blue-500: #6e8b9a;
--color-essex-blue-600: #5d7682;
--color-essex-blue-700: #4a5e68;
--color-essex-blue-800: #35454c;
--color-essex-blue-900: #243035;
--color-essex-blue-950: #131c20;
}SCSS
$essex-blue: #b0ccda;
$essex-blue-rgb: 176, 204, 218;
$essex-blue-light: mix(#fff, $essex-blue, 20%);
$essex-blue-dark: mix(#000, $essex-blue, 20%);
.element {
color: $essex-blue;
box-shadow: 0 0 0 2px rgba($essex-blue, 0.35);
}