命名颜色 · #D9E4E5
Subtle Blue
Subtle Blue 即 #D9E4E5：rgb(217 228 229)、hsl(185 19% 87%)、oklch(0.911 0.012 203.5)。查看浅色调、深色调、和谐色、WCAG 与 APCA 对比度，以及 CSS、Tailwind v4 和 SCSS 代码。
What does Gray mean? → · Subtle Blue color name →
#D9E4E5
oklch(0.911 0.012 203.5)
颜色转换
- HEX
- #d9e4e5
- RGB
- rgb(217 228 229)
- HSL
- hsl(185 19% 87%)
- HWB
- hwb(185 85% 10%)
- OKLCH
- oklch(0.911 0.012 203.5)
- OKLab
- oklab(0.911 -0.011 -0.005)
- CIE Lab
- lab(89.77 -3.67 -1.83)
- LCH
- lch(89.77 4.1 206.5)
- CMYK
- cmyk(5% 0% 0% 10%)
浅色调 · 深色调 · 灰色调
浅色调
- DDE7E8
- E1E9EA
- E4ECED
- E8EFEF
- ECF1F2
- F0F4F5
- F4F7F7
- F7FAFA
- FBFCFC
深色调
- BCC6C7
- A1A9AA
- 868D8E
- 6C7272
- 535858
- 3B3F3F
- 252828
- 111212
- 020303
灰色调
- D0DADA
- C7CFD0
- BDC5C6
- B4BBBB
- ABB1B1
- A3A7A7
- 9A9D9D
- 919393
- 898A8A
配色和谐
互补色 +180°
- D9E4E5
Subtle Blue
- E9DFDE
≈ Parasol
类似色 -30° +30°
- D9E4E5
Subtle Blue
- DAE4E1
≈ Sparkling Spring
- DAE3E8
≈ Cityscape
三角配色 +120° +240°
- D9E4E5
Subtle Blue
- E6DFE6
≈ Selago
- E5E1D9
≈ Zürich White
分裂互补色 +150° +210°
- D9E4E5
Subtle Blue
- E8DEE2
≈ Precocious Red
- E8E0DA
≈ Stone Harbour
四角配色 +90° +180° +270°
- D9E4E5
Subtle Blue
- E2E0E9
≈ White Bud
- E9DFDE
≈ Parasol
- E1E2DA
≈ Winds Breath
对比度与无障碍
Ag
Fail白底
WCAG 1.29:1 · APCA Lc 15
Ag
AAA黑底
WCAG 16.17:1 · APCA Lc 89
最佳文字颜色: #000000
WCAG 16.17:1 (AAA) · APCA Lc 89
Contrast pairs
代码片段
CSS
:root {
--subtle-blue: #d9e4e5;
--subtle-blue-rgb: 217 228 229;
--subtle-blue-oklch: oklch(0.911 0.012 203.5);
}
.element {
color: var(--subtle-blue);
background-color: hsl(185 19% 87%);
border-color: oklch(0.911 0.012 203.5);
}Tailwind CSS v4
@theme {
--color-subtle-blue: #d9e4e5;
--color-subtle-blue-50: #f1f6f7;
--color-subtle-blue-100: #e4e9ea;
--color-subtle-blue-200: #cfd6d7;
--color-subtle-blue-300: #b1b9ba;
--color-subtle-blue-400: #97a1a1;
--color-subtle-blue-500: #7e898a;
--color-subtle-blue-600: #6a7474;
--color-subtle-blue-700: #555c5d;
--color-subtle-blue-800: #3e4444;
--color-subtle-blue-900: #2b2f2f;
--color-subtle-blue-950: #181b1c;
}SCSS
$subtle-blue: #d9e4e5;
$subtle-blue-rgb: 217, 228, 229;
$subtle-blue-light: mix(#fff, $subtle-blue, 20%);
$subtle-blue-dark: mix(#000, $subtle-blue, 20%);
.element {
color: $subtle-blue;
box-shadow: 0 0 0 2px rgba($subtle-blue, 0.35);
}