Named color · #E1DABB
Coconut Cream
Coconut Cream is #E1DABB: rgb(225 218 187), hsl(49 39% 81%), oklch(0.886 0.042 96.6). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Yellow mean? → · Coconut Cream color name →
#E1DABB
oklch(0.886 0.042 96.6)
Color conversions
- HEX
- #e1dabb
- RGB
- rgb(225 218 187)
- HSL
- hsl(49 39% 81%)
- HWB
- hwb(49 73% 12%)
- OKLCH
- oklch(0.886 0.042 96.6)
- OKLab
- oklab(0.886 -0.005 0.042)
- CIE Lab
- lab(87.01 -1.27 16.23)
- LCH
- lch(87.01 16.28 94.5)
- CMYK
- cmyk(0% 3% 17% 12%)
Tints · Shades · Tones
Tints
- E4DEC2
- E7E1C9
- EAE5CF
- EDE9D6
- F0ECDD
- F3F0E4
- F6F4EB
- F9F8F1
- FCFBF8
Shades
- C4BDA2
- A7A28A
- 8B8773
- 706C5C
- 565446
- 3E3C32
- 27251F
- 12110D
- 020202
Tones
- D7D1B5
- CDC7AF
- C3BEA9
- B9B5A3
- AFAC9D
- A6A397
- 9C9A92
- 93918C
- 898986
Color harmonies
Complementary +180°
- E1DABB
Coconut Cream
- D2D8F6
≈ Flax Bloom
Analogous -30° +30°
- E1DABB
Coconut Cream
- EDD5BD
≈ Speckled Eggs
- D2DFC2
≈ Dream Seascape
Triadic +120° +240°
- E1DABB
Coconut Cream
- BBE1EB
≈ Diminished Blue
- ECCFE4
≈ Sweet Dreams
Split-complementary +150° +210°
- E1DABB
Coconut Cream
- C4DDF4
≈ Island View
- E0D3F0
≈ Japan Blush
Tetradic +90° +180° +270°
- E1DABB
Coconut Cream
- BBE3DE
≈ Bleached Aqua
- D2D8F6
≈ Flax Bloom
- F3CFD5
≈ Pink Cupcake
Contrast & accessibility
Ag
FailOn white
WCAG 1.40:1 · APCA Lc 20
Ag
AAAOn black
WCAG 14.94:1 · APCA Lc 84
Best text color: #000000
WCAG 14.94:1 (AAA) · APCA Lc 84
Contrast pairs
Code snippets
CSS
:root {
--coconut-cream: #e1dabb;
--coconut-cream-rgb: 225 218 187;
--coconut-cream-oklch: oklch(0.886 0.042 96.6);
}
.element {
color: var(--coconut-cream);
background-color: hsl(49 39% 81%);
border-color: oklch(0.886 0.042 96.6);
}Tailwind CSS v4
@theme {
--color-coconut-cream: #e1dabb;
--color-coconut-cream-50: #f8f6e8;
--color-coconut-cream-100: #ebe8d9;
--color-coconut-cream-200: #d8d5c1;
--color-coconut-cream-300: #bcb8a0;
--color-coconut-cream-400: #a59f83;
--color-coconut-cream-500: #8e8767;
--color-coconut-cream-600: #787257;
--color-coconut-cream-700: #605b46;
--color-coconut-cream-800: #474232;
--color-coconut-cream-900: #312e22;
--color-coconut-cream-950: #1d1b11;
}SCSS
$coconut-cream: #e1dabb;
$coconut-cream-rgb: 225, 218, 187;
$coconut-cream-light: mix(#fff, $coconut-cream, 20%);
$coconut-cream-dark: mix(#000, $coconut-cream, 20%);
.element {
color: $coconut-cream;
box-shadow: 0 0 0 2px rgba($coconut-cream, 0.35);
}