Named color · #D9DCD1
Wayward Willow
Wayward Willow is #D9DCD1: rgb(217 220 209), hsl(76 14% 84%), oklch(0.889 0.015 119.1). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Gray mean? → · Wayward Willow color name →
#D9DCD1
oklch(0.889 0.015 119.1)
Color conversions
- HEX
- #d9dcd1
- RGB
- rgb(217 220 209)
- HSL
- hsl(76 14% 84%)
- HWB
- hwb(76 82% 14%)
- OKLCH
- oklch(0.889 0.015 119.1)
- OKLab
- oklab(0.889 -0.007 0.013)
- CIE Lab
- lab(87.3 -2.51 5.05)
- LCH
- lch(87.3 5.64 116.4)
- CMYK
- cmyk(1% 0% 5% 14%)
Tints · Shades · Tones
Tints
- DDDFD6
- E1E3DA
- E4E6DF
- E8EAE3
- ECEDE8
- F0F1EC
- F3F4F1
- F7F8F6
- FBFBFA
Shades
- BCBFB5
- A1A39B
- 868881
- 6C6E68
- 535450
- 3B3C39
- 252623
- 111110
- 020202
Tones
- D0D2C9
- C7C9C0
- BDBFB8
- B4B6B0
- ABADA8
- A3A4A0
- 9A9B98
- 919290
- 888988
Color harmonies
Complementary +180°
- D9DCD1
Wayward Willow
- DCD8E3
≈ Misty Violet
Analogous -30° +30°
- D9DCD1
Wayward Willow
- DEDACF
≈ Ginger Sugar
- D4DDD5
≈ Periwinkle Tint
Triadic +120° +240°
- D9DCD1
Wayward Willow
- D2DCE4
≈ London Lights
- E4D6DA
≈ Secret Scent
Split-complementary +150° +210°
- D9DCD1
Wayward Willow
- D6DAE5
≈ Sueded Grey
- E0D7DF
≈ Little Lilac
Tetradic +90° +180° +270°
- D9DCD1
Wayward Willow
- D0DDE0
≈ Head in the Clouds
- DCD8E3
≈ Misty Violet
- E4D7D5
≈ Lost Love
Contrast & accessibility
Ag
FailOn white
WCAG 1.38:1 · APCA Lc 19
Ag
AAAOn black
WCAG 15.10:1 · APCA Lc 85
Best text color: #000000
WCAG 15.10:1 (AAA) · APCA Lc 85
Contrast pairs
Code snippets
CSS
:root {
--wayward-willow: #d9dcd1;
--wayward-willow-rgb: 217 220 209;
--wayward-willow-oklch: oklch(0.889 0.015 119.1);
}
.element {
color: var(--wayward-willow);
background-color: hsl(76 14% 84%);
border-color: oklch(0.889 0.015 119.1);
}Tailwind CSS v4
@theme {
--color-wayward-willow: #d9dcd1;
--color-wayward-willow-50: #f4f6f1;
--color-wayward-willow-100: #e7e9e3;
--color-wayward-willow-200: #d3d5ce;
--color-wayward-willow-300: #b6b9b0;
--color-wayward-willow-400: #9da096;
--color-wayward-willow-500: #85887d;
--color-wayward-willow-600: #70736a;
--color-wayward-willow-700: #5a5c54;
--color-wayward-willow-800: #42433d;
--color-wayward-willow-900: #2d2e2a;
--color-wayward-willow-950: #1a1b18;
}SCSS
$wayward-willow: #d9dcd1;
$wayward-willow-rgb: 217, 220, 209;
$wayward-willow-light: mix(#fff, $wayward-willow, 20%);
$wayward-willow-dark: mix(#000, $wayward-willow, 20%);
.element {
color: $wayward-willow;
box-shadow: 0 0 0 2px rgba($wayward-willow, 0.35);
}