Nazwany kolor · #CCDFE8
Duck’s Egg Blue
Duck’s Egg Blue to #CCDFE8: rgb(204 223 232), hsl(199 38% 85%), oklch(0.892 0.024 227.8). Zobacz odcienie jaśniejsze i ciemniejsze, harmonie, kontrast WCAG i APCA oraz kod CSS, Tailwind v4 i SCSS.
What does Gray mean? → · Duck’s Egg Blue color name →
#CCDFE8
oklch(0.892 0.024 227.8)
Konwersje koloru
- HEX
- #ccdfe8
- RGB
- rgb(204 223 232)
- HSL
- hsl(199 38% 85%)
- HWB
- hwb(199 80% 9%)
- OKLCH
- oklch(0.892 0.024 227.8)
- OKLab
- oklab(0.892 -0.016 -0.018)
- CIE Lab
- lab(87.59 -5.23 -6.7)
- LCH
- lch(87.59 8.5 232)
- CMYK
- cmyk(12% 4% 0% 9%)
Odcienie jaśniejsze · Odcienie ciemniejsze · Tony
Odcienie jaśniejsze
- D1E2EA
- D6E5ED
- DBE9EF
- E0ECF1
- E5EFF3
- EBF2F6
- F0F5F8
- F5F9FA
- FAFCFD
Odcienie ciemniejsze
- B1C2CA
- 97A5AC
- 7E8A90
- 656F74
- 4E5659
- 373D40
- 222729
- 0F1213
- 020203
Tony
- C4D5DD
- BCCBD2
- B5C2C8
- ADB8BD
- A5AEB3
- 9EA5A8
- 969B9E
- 8F9294
- 87898A
Harmonie kolorów
Komplementarna +180°
- CCDFE8
Duck’s Egg Blue
- EAD7CE
≈ Coral Cream
Analogowa -30° +30°
- CCDFE8
Duck’s Egg Blue
- CAE1E1
≈ Mellifluous Blue
- D2DCEC
≈ Snowy Shadow
Triada +120° +240°
- CCDFE8
Duck’s Egg Blue
- E8D5DE
≈ Swiss Rose
- DDDDCB
≈ Desert Springs
Komplementarna rozszczepiona +150° +210°
- CCDFE8
Duck’s Egg Blue
- EBD6D5
≈ Light Youth
- E4DACA
≈ Skull
Tetrada +90° +180° +270°
- CCDFE8
Duck’s Egg Blue
- E2D7E6
≈ Lavender Vista
- EAD7CE
≈ Coral Cream
- D4DFD0
≈ Fairest Jade
Kontrast i dostępność
Ag
FailNa bieli
WCAG 1.37:1 · APCA Lc 18
Ag
AAANa czerni
WCAG 15.28:1 · APCA Lc 85
Najlepszy kolor tekstu: #000000
WCAG 15.28:1 (AAA) · APCA Lc 85
Contrast pairs
Fragmenty kodu
CSS
:root {
--duck-s-egg-blue: #ccdfe8;
--duck-s-egg-blue-rgb: 204 223 232;
--duck-s-egg-blue-oklch: oklch(0.892 0.024 227.8);
}
.element {
color: var(--duck-s-egg-blue);
background-color: hsl(199 38% 85%);
border-color: oklch(0.892 0.024 227.8);
}Tailwind CSS v4
@theme {
--color-duck-s-egg-blue: #ccdfe8;
--color-duck-s-egg-blue-50: #eff7fb;
--color-duck-s-egg-blue-100: #e0eaee;
--color-duck-s-egg-blue-200: #cad6dd;
--color-duck-s-egg-blue-300: #acbac1;
--color-duck-s-egg-blue-400: #90a2aa;
--color-duck-s-egg-blue-500: #768a93;
--color-duck-s-egg-blue-600: #64747c;
--color-duck-s-egg-blue-700: #505d63;
--color-duck-s-egg-blue-800: #3a4449;
--color-duck-s-egg-blue-900: #282f32;
--color-duck-s-egg-blue-950: #161c1e;
}SCSS
$duck-s-egg-blue: #ccdfe8;
$duck-s-egg-blue-rgb: 204, 223, 232;
$duck-s-egg-blue-light: mix(#fff, $duck-s-egg-blue, 20%);
$duck-s-egg-blue-dark: mix(#000, $duck-s-egg-blue, 20%);
.element {
color: $duck-s-egg-blue;
box-shadow: 0 0 0 2px rgba($duck-s-egg-blue, 0.35);
}