Adlandırılmış renk · #D5E0EE
Great Blue Heron
Great Blue Heron, #D5E0EE: rgb(213 224 238), hsl(214 42% 88%), oklch(0.903 0.023 254.4). Açık tonlar, koyu tonlar, uyumlar, WCAG ve APCA kontrastı ile CSS, Tailwind v4 ve SCSS kodunu görün.
What does Gray mean? → · Great Blue Heron color name →
#D5E0EE
oklch(0.903 0.023 254.4)
Renk dönüşümleri
- HEX
- #d5e0ee
- RGB
- rgb(213 224 238)
- HSL
- hsl(214 42% 88%)
- HWB
- hwb(214 84% 7%)
- OKLCH
- oklch(0.903 0.023 254.4)
- OKLab
- oklab(0.903 -0.006 -0.022)
- CIE Lab
- lab(88.65 -1.8 -8.19)
- LCH
- lch(88.65 8.39 257.6)
- CMYK
- cmyk(11% 6% 0% 7%)
Açık tonlar · Koyu tonlar · Gri tonlar
Açık tonlar
- D9E3F0
- DDE6F1
- E1E9F3
- E6ECF5
- EAEFF7
- EEF3F8
- F2F6FA
- F7F9FC
- FBFCFD
Koyu tonlar
- B9C3CF
- 9EA6B1
- 838A93
- 6A7077
- 51565C
- 3A3E42
- 24272A
- 101214
- 020203
Gri tonlar
- CCD6E2
- C3CCD7
- BBC2CC
- B2B8C1
- AAAFB5
- A1A5AB
- 999CA0
- 909295
- 88898A
Renk uyumları
Tamamlayıcı +180°
- D5E0EE
Great Blue Heron
- E8DDCF
≈ Cinnamon Cake
Analog -30° +30°
- D5E0EE
Great Blue Heron
- D0E2EA
≈ Open Skies
- DDDDEE
≈ Artemis Silver
Üçlü +120° +240°
- D5E0EE
Great Blue Heron
- EED9DA
≈ Sweet Bianca
- D9E2D4
≈ Green Mirror
Bölünmüş tamamlayıcı +150° +210°
- D5E0EE
Great Blue Heron
- EDDBD3
≈ Pine Hutch
- E1E0CF
≈ Emerging Leaf
Dörtlü +90° +180° +270°
- D5E0EE
Great Blue Heron
- EBD9E2
≈ Twinkled Pink
- E8DDCF
≈ Cinnamon Cake
- D2E4DB
≈ Summer Breeze
Kontrast ve erişilebilirlik
Ag
FailBeyaz üzerinde
WCAG 1.33:1 · APCA Lc 17
Ag
AAASiyah üzerinde
WCAG 15.72:1 · APCA Lc 87
En iyi metin rengi: #000000
WCAG 15.72:1 (AAA) · APCA Lc 87
Contrast pairs
Kod parçacıkları
CSS
:root {
--great-blue-heron: #d5e0ee;
--great-blue-heron-rgb: 213 224 238;
--great-blue-heron-oklch: oklch(0.903 0.023 254.4);
}
.element {
color: var(--great-blue-heron);
background-color: hsl(214 42% 88%);
border-color: oklch(0.903 0.023 254.4);
}Tailwind CSS v4
@theme {
--color-great-blue-heron: #d5e0ee;
--color-great-blue-heron-50: #f1f5fc;
--color-great-blue-heron-100: #e3e8f0;
--color-great-blue-heron-200: #ced5de;
--color-great-blue-heron-300: #b0b8c3;
--color-great-blue-heron-400: #969fac;
--color-great-blue-heron-500: #7c8795;
--color-great-blue-heron-600: #69727e;
--color-great-blue-heron-700: #545c65;
--color-great-blue-heron-800: #3d434a;
--color-great-blue-heron-900: #2a2e33;
--color-great-blue-heron-950: #171b1f;
}SCSS
$great-blue-heron: #d5e0ee;
$great-blue-heron-rgb: 213, 224, 238;
$great-blue-heron-light: mix(#fff, $great-blue-heron, 20%);
$great-blue-heron-dark: mix(#000, $great-blue-heron, 20%);
.element {
color: $great-blue-heron;
box-shadow: 0 0 0 2px rgba($great-blue-heron, 0.35);
}