Named color · #D4E3E2
Meadowsweet Mist
Meadowsweet Mist is #D4E3E2: rgb(212 227 226), hsl(176 21% 86%), oklch(0.904 0.016 192.1). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Gray mean? → · Meadowsweet Mist color name →
#D4E3E2
oklch(0.904 0.016 192.1)
Color conversions
- HEX
- #d4e3e2
- RGB
- rgb(212 227 226)
- HSL
- hsl(176 21% 86%)
- HWB
- hwb(176 83% 11%)
- OKLCH
- oklch(0.904 0.016 192.1)
- OKLab
- oklab(0.904 -0.016 -0.003)
- CIE Lab
- lab(89.08 -5.32 -1.33)
- LCH
- lch(89.08 5.48 194)
- CMYK
- cmyk(7% 0% 0% 11%)
Tints · Shades · Tones
Tints
- D8E6E5
- DDE9E8
- E1EBEB
- E5EEEE
- E9F1F0
- EEF4F3
- F2F7F6
- F6F9F9
- FBFCFC
Shades
- B8C5C4
- 9DA8A8
- 838C8C
- 697171
- 515757
- 3A3F3E
- 242727
- 101212
- 020303
Tones
- CBD9D8
- C3CECE
- BAC4C4
- B2BABA
- A9B0B0
- A1A6A6
- 989D9C
- 909393
- 888989
Color harmonies
Complementary +180°
- D4E3E2
Meadowsweet Mist
- EADBDC
≈ Discrete Pink
Analogous -30° +30°
- D4E3E2
Meadowsweet Mist
- D7E3DC
≈ Night Wind
- D5E2E7
≈ Aloof
Triadic +120° +240°
- D4E3E2
Meadowsweet Mist
- E3DDE7
≈ Pale Muse
- E6DED4
≈ Modest White
Split-complementary +150° +210°
- D4E3E2
Meadowsweet Mist
- E8DBE2
≈ Bōsōzoku Pink
- E9DCD7
≈ Faded Shells
Tetradic +90° +180° +270°
- D4E3E2
Meadowsweet Mist
- DDDEEA
≈ Timid Purple
- EADBDC
≈ Discrete Pink
- E1E0D4
≈ Italian Ice
Contrast & accessibility
Ag
FailOn white
WCAG 1.32:1 · APCA Lc 16
Ag
AAAOn black
WCAG 15.88:1 · APCA Lc 88
Best text color: #000000
WCAG 15.88:1 (AAA) · APCA Lc 88
Contrast pairs
Code snippets
CSS
:root {
--meadowsweet-mist: #d4e3e2;
--meadowsweet-mist-rgb: 212 227 226;
--meadowsweet-mist-oklch: oklch(0.904 0.016 192.1);
}
.element {
color: var(--meadowsweet-mist);
background-color: hsl(176 21% 86%);
border-color: oklch(0.904 0.016 192.1);
}Tailwind CSS v4
@theme {
--color-meadowsweet-mist: #d4e3e2;
--color-meadowsweet-mist-50: #f0f7f6;
--color-meadowsweet-mist-100: #e2eae9;
--color-meadowsweet-mist-200: #cdd6d6;
--color-meadowsweet-mist-300: #afbaba;
--color-meadowsweet-mist-400: #94a2a1;
--color-meadowsweet-mist-500: #7b8a89;
--color-meadowsweet-mist-600: #687574;
--color-meadowsweet-mist-700: #535d5d;
--color-meadowsweet-mist-800: #3c4443;
--color-meadowsweet-mist-900: #292f2f;
--color-meadowsweet-mist-950: #171c1b;
}SCSS
$meadowsweet-mist: #d4e3e2;
$meadowsweet-mist-rgb: 212, 227, 226;
$meadowsweet-mist-light: mix(#fff, $meadowsweet-mist, 20%);
$meadowsweet-mist-dark: mix(#000, $meadowsweet-mist, 20%);
.element {
color: $meadowsweet-mist;
box-shadow: 0 0 0 2px rgba($meadowsweet-mist, 0.35);
}