Named color · #E5E1D8
Heron Plume
Heron Plume is #E5E1D8: rgb(229 225 216), hsl(42 20% 87%), oklch(0.91 0.013 86.8). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Gray mean? → · Heron Plume color name →
#E5E1D8
oklch(0.91 0.013 86.8)
Color conversions
- HEX
- #e5e1d8
- RGB
- rgb(229 225 216)
- HSL
- hsl(42 20% 87%)
- HWB
- hwb(42 85% 10%)
- OKLCH
- oklch(0.91 0.013 86.8)
- OKLab
- oklab(0.91 0.001 0.013)
- CIE Lab
- lab(89.66 0.24 4.92)
- LCH
- lch(89.66 4.93 87.2)
- CMYK
- cmyk(0% 2% 6% 10%)
Tints · Shades · Tones
Tints
- E8E4DC
- EAE7E0
- EDEAE4
- EFEDE7
- F2F0EB
- F5F3EF
- F7F6F3
- FAF9F7
- FCFCFB
Shades
- C7C4BC
- AAA7A0
- 8E8B85
- 72706B
- 585653
- 3F3E3B
- 282725
- 121211
- 030202
Tones
- DAD7CF
- D0CDC6
- C6C3BD
- BBB9B4
- B1AFAB
- A7A6A2
- 9D9C9A
- 939391
- 8A8988
Color harmonies
Complementary +180°
- E5E1D8
Heron Plume
- DDE1EA
≈ Frosty Fog
Analogous -30° +30°
- E5E1D8
Heron Plume
- E8DFD9
≈ Starling’s Egg
- E1E3D9
≈ Wisdom
Triadic +120° +240°
- E5E1D8
Heron Plume
- D8E4E6
≈ Inuit Blue
- E6DFE6
≈ Selago
Split-complementary +150° +210°
- E5E1D8
Heron Plume
- DAE3E9
≈ Early Frost
- E2E0E9
≈ White Bud
Tetradic +90° +180° +270°
- E5E1D8
Heron Plume
- D9E4E1
≈ Sparkling Spring
- DDE1EA
≈ Frosty Fog
- E9DEE1
≈ Pink Posey
Contrast & accessibility
Ag
FailOn white
WCAG 1.30:1 · APCA Lc 15
Ag
AAAOn black
WCAG 16.09:1 · APCA Lc 89
Best text color: #000000
WCAG 16.09:1 (AAA) · APCA Lc 89
Contrast pairs
Code snippets
CSS
:root {
--heron-plume: #e5e1d8;
--heron-plume-rgb: 229 225 216;
--heron-plume-oklch: oklch(0.91 0.013 86.8);
}
.element {
color: var(--heron-plume);
background-color: hsl(42 20% 87%);
border-color: oklch(0.91 0.013 86.8);
}Tailwind CSS v4
@theme {
--color-heron-plume: #e5e1d8;
--color-heron-plume-50: #f6f5f1;
--color-heron-plume-100: #e9e8e3;
--color-heron-plume-200: #d6d4ce;
--color-heron-plume-300: #bab7b0;
--color-heron-plume-400: #a29e96;
--color-heron-plume-500: #8a867d;
--color-heron-plume-600: #75716a;
--color-heron-plume-700: #5d5b54;
--color-heron-plume-800: #44423d;
--color-heron-plume-900: #2f2e2a;
--color-heron-plume-950: #1c1a18;
}SCSS
$heron-plume: #e5e1d8;
$heron-plume-rgb: 229, 225, 216;
$heron-plume-light: mix(#fff, $heron-plume, 20%);
$heron-plume-dark: mix(#000, $heron-plume, 20%);
.element {
color: $heron-plume;
box-shadow: 0 0 0 2px rgba($heron-plume, 0.35);
}