色名 · #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);
}