Named color · #E4D7E5
Snuff
Snuff is #E4D7E5: rgb(228 215 229), hsl(296 21% 87%), oklch(0.894 0.024 323.6). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Gray mean? → · Snuff color name →
#E4D7E5
oklch(0.894 0.024 323.6)
Color conversions
- HEX
- #e4d7e5
- RGB
- rgb(228 215 229)
- HSL
- hsl(296 21% 87%)
- HWB
- hwb(296 84% 10%)
- OKLCH
- oklch(0.894 0.024 323.6)
- OKLab
- oklab(0.894 0.019 -0.014)
- CIE Lab
- lab(87.35 6.47 -5.21)
- LCH
- lch(87.35 8.31 321.1)
- CMYK
- cmyk(0% 6% 0% 10%)
Tints · Shades · Tones
Tints
- E7DBE8
- E9DFEA
- ECE3ED
- EFE7EF
- F1EBF2
- F4EFF5
- F7F3F7
- FAF7FA
- FCFBFC
Shades
- C6BBC7
- A99FAA
- 8D858E
- 726B72
- 585258
- 3F3B3F
- 282528
- 121112
- 030203
Tones
- DACEDA
- CFC5D0
- C5BCC6
- BBB3BB
- B1AAB1
- A7A2A7
- 9D999D
- 939193
- 8A888A
Color harmonies
Complementary +180°
- E4D7E5
Snuff
- D3E0D2
≈ Misty Marsh
Analogous -30° +30°
- E4D7E5
Snuff
- DCD9EB
≈ Eyeshadow
- E9D6DD
≈ Swiss Rose
Triadic +120° +240°
- E4D7E5
Snuff
- E3DBCB
≈ Frankly Earnest
- CBE1E3
≈ Melting Point
Split-complementary +150° +210°
Tetradic +90° +180° +270°
Contrast & accessibility
Ag
FailOn white
WCAG 1.38:1 · APCA Lc 19
Ag
AAAOn black
WCAG 15.15:1 · APCA Lc 85
Best text color: #000000
WCAG 15.15:1 (AAA) · APCA Lc 85
Contrast pairs
Code snippets
CSS
:root {
--snuff: #e4d7e5;
--snuff-rgb: 228 215 229;
--snuff-oklch: oklch(0.894 0.024 323.6);
}
.element {
color: var(--snuff);
background-color: hsl(296 21% 87%);
border-color: oklch(0.894 0.024 323.6);
}Tailwind CSS v4
@theme {
--color-snuff: #e4d7e5;
--color-snuff-50: #f9f3f9;
--color-snuff-100: #ece5ec;
--color-snuff-200: #dad1da;
--color-snuff-300: #beb3be;
--color-snuff-400: #a69aa6;
--color-snuff-500: #8e818f;
--color-snuff-600: #786d79;
--color-snuff-700: #605761;
--color-snuff-800: #464047;
--color-snuff-900: #312c31;
--color-snuff-950: #1d191d;
}SCSS
$snuff: #e4d7e5;
$snuff-rgb: 228, 215, 229;
$snuff-light: mix(#fff, $snuff, 20%);
$snuff-dark: mix(#000, $snuff, 20%);
.element {
color: $snuff;
box-shadow: 0 0 0 2px rgba($snuff, 0.35);
}