Named color · #D4E8D8
Splashdown
Splashdown is #D4E8D8: rgb(212 232 216), hsl(132 30% 87%), oklch(0.912 0.03 151.5). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Gray mean? → · Splashdown color name →
#D4E8D8
oklch(0.912 0.03 151.5)
Color conversions
- HEX
- #d4e8d8
- RGB
- rgb(212 232 216)
- HSL
- hsl(132 30% 87%)
- HWB
- hwb(132 83% 9%)
- OKLCH
- oklch(0.912 0.03 151.5)
- OKLab
- oklab(0.912 -0.027 0.014)
- CIE Lab
- lab(90.17 -9.07 5.43)
- LCH
- lch(90.17 10.57 149.1)
- CMYK
- cmyk(9% 0% 7% 9%)
Tints · Shades · Tones
Tints
- D8EADC
- DDEDE0
- E1EFE4
- E5F1E7
- E9F3EB
- EEF6EF
- F2F8F3
- F6FAF7
- FBFDFB
Shades
- B8CABC
- 9DACA0
- 839085
- 69746B
- 515953
- 3A403B
- 242925
- 101311
- 020302
Tones
- CBDDCF
- C3D2C6
- BAC8BD
- B2BDB4
- A9B3AB
- A1A8A2
- 989E9A
- 909491
- 888A88
Color harmonies
Complementary +180°
- D4E8D8
Splashdown
- EEDBEB
≈ Maiden of the Mist
Analogous -30° +30°
- D4E8D8
Splashdown
- DEE5CF
≈ Willow Brook
- CDE9E3
≈ Frosty White Blue
Triadic +120° +240°
- D4E8D8
Splashdown
- DAE1F7
≈ Aquarelle Purple
- F5DBD6
≈ Rosewater
Split-complementary +150° +210°
- D4E8D8
Splashdown
- E5DEF3
≈ Lingering Lilac
- F4DAE0
≈ Fancy Pants
Tetradic +90° +180° +270°
- D4E8D8
Splashdown
- D1E5F5
≈ New Heights
- EEDBEB
≈ Maiden of the Mist
- F1DECE
≈ Siren Song
Contrast & accessibility
Ag
FailOn white
WCAG 1.28:1 · APCA Lc 14
Ag
AAAOn black
WCAG 16.33:1 · APCA Lc 90
Best text color: #000000
WCAG 16.33:1 (AAA) · APCA Lc 90
Contrast pairs
Code snippets
CSS
:root {
--splashdown: #d4e8d8;
--splashdown-rgb: 212 232 216;
--splashdown-oklch: oklch(0.912 0.03 151.5);
}
.element {
color: var(--splashdown);
background-color: hsl(132 30% 87%);
border-color: oklch(0.912 0.03 151.5);
}Tailwind CSS v4
@theme {
--color-splashdown: #d4e8d8;
--color-splashdown-50: #eff8f1;
--color-splashdown-100: #e1ebe3;
--color-splashdown-200: #cbd8ce;
--color-splashdown-300: #acbcb0;
--color-splashdown-400: #92a496;
--color-splashdown-500: #788c7c;
--color-splashdown-600: #667769;
--color-splashdown-700: #515f54;
--color-splashdown-800: #3b453d;
--color-splashdown-900: #29302a;
--color-splashdown-950: #171c17;
}SCSS
$splashdown: #d4e8d8;
$splashdown-rgb: 212, 232, 216;
$splashdown-light: mix(#fff, $splashdown, 20%);
$splashdown-dark: mix(#000, $splashdown, 20%);
.element {
color: $splashdown;
box-shadow: 0 0 0 2px rgba($splashdown, 0.35);
}