Named color · #E8E1D3
White Clay
White Clay is #E8E1D3: rgb(232 225 211), hsl(40 31% 87%), oklch(0.911 0.02 84.6). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Gray mean? → · White Clay color name →
#E8E1D3
oklch(0.911 0.02 84.6)
Color conversions
- HEX
- #e8e1d3
- RGB
- rgb(232 225 211)
- HSL
- hsl(40 31% 87%)
- HWB
- hwb(40 83% 9%)
- OKLCH
- oklch(0.911 0.02 84.6)
- OKLab
- oklab(0.911 0.002 0.02)
- CIE Lab
- lab(89.8 0.7 7.76)
- LCH
- lch(89.8 7.8 84.9)
- CMYK
- cmyk(0% 3% 9% 9%)
Tints · Shades · Tones
Tints
- EAE4D7
- EDE7DC
- EFEAE0
- F1EDE4
- F3F0E9
- F6F3ED
- F8F6F2
- FAF9F6
- FDFCFB
Shades
- CAC4B7
- ACA79C
- 908B82
- 747069
- 595651
- 403E3A
- 292724
- 131210
- 030202
Tones
- DDD7CA
- D2CDC2
- C8C3B9
- BDB9B1
- B3AFA9
- A8A6A0
- 9E9C98
- 949390
- 8A8988
Color harmonies
Complementary +180°
- E8E1D3
White Clay
- DBE2F0
≈ Vaguely Violet
Analogous -30° +30°
- E8E1D3
White Clay
- EDDFD5
≈ Pink Dyed Blond
- E1E4D5
≈ Greening
Triadic +120° +240°
- E8E1D3
White Clay
- D3E6E8
≈ Blue Phlox
- E9DDE9
≈ Lilac Frost
Split-complementary +150° +210°
- E8E1D3
White Clay
- D5E4ED
≈ Ethereal Moonlight
- E2DFEE
≈ Velvet Scarf
Tetradic +90° +180° +270°
- E8E1D3
White Clay
- D5E6E1
≈ Cave Pearl
- DBE2F0
≈ Vaguely Violet
- EEDDE2
≈ Dream State
Contrast & accessibility
Ag
FailOn white
WCAG 1.30:1 · APCA Lc 15
Ag
AAAOn black
WCAG 16.14:1 · APCA Lc 89
Best text color: #000000
WCAG 16.14:1 (AAA) · APCA Lc 89
Contrast pairs
Code snippets
CSS
:root {
--white-clay: #e8e1d3;
--white-clay-rgb: 232 225 211;
--white-clay-oklch: oklch(0.911 0.02 84.6);
}
.element {
color: var(--white-clay);
background-color: hsl(40 31% 87%);
border-color: oklch(0.911 0.02 84.6);
}Tailwind CSS v4
@theme {
--color-white-clay: #e8e1d3;
--color-white-clay-50: #f8f5ef;
--color-white-clay-100: #ebe7e0;
--color-white-clay-200: #d8d4cb;
--color-white-clay-300: #bcb7ac;
--color-white-clay-400: #a49e91;
--color-white-clay-500: #8c8577;
--color-white-clay-600: #777165;
--color-white-clay-700: #5f5a51;
--color-white-clay-800: #46423b;
--color-white-clay-900: #302d28;
--color-white-clay-950: #1d1a16;
}SCSS
$white-clay: #e8e1d3;
$white-clay-rgb: 232, 225, 211;
$white-clay-light: mix(#fff, $white-clay, 20%);
$white-clay-dark: mix(#000, $white-clay, 20%);
.element {
color: $white-clay;
box-shadow: 0 0 0 2px rgba($white-clay, 0.35);
}