Named color · #EEE0B1
Cookies and Cream
Cookies and Cream is #EEE0B1: rgb(238 224 177), hsl(46 64% 81%), oklch(0.906 0.063 93.4). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Yellow mean? → · Cookies and Cream color name →
#EEE0B1
oklch(0.906 0.063 93.4)
Color conversions
- HEX
- #eee0b1
- RGB
- rgb(238 224 177)
- HSL
- hsl(46 64% 81%)
- HWB
- hwb(46 69% 7%)
- OKLCH
- oklch(0.906 0.063 93.4)
- OKLab
- oklab(0.906 -0.004 0.063)
- CIE Lab
- lab(89.45 -0.33 24.93)
- LCH
- lch(89.45 24.93 90.8)
- CMYK
- cmyk(0% 6% 26% 7%)
Tints · Shades · Tones
Tints
- F0E3B9
- F1E6C1
- F3E9C9
- F5EDD1
- F6F0D8
- F8F3E0
- FAF6E8
- FCF9F0
- FDFCF7
Shades
- CFC399
- B1A683
- 938A6C
- 777057
- 5C5642
- 423E2F
- 2A271C
- 14120C
- 030201
Tones
- E2D6AC
- D7CCA7
- CCC2A3
- C1B99E
- B5AF99
- AAA594
- A09C8F
- 95928A
- 8A8985
Color harmonies
Complementary +180°
- EEE0B1
Cookies and Cream
- D6DFFF
≈ Transparent Blue
Analogous -30° +30°
- EEE0B1
Cookies and Cream
- FFD8B5
≈ Sandy Tan
- D8E8BA
≈ Aloe Cream
Triadic +120° +240°
- EEE0B1
Cookies and Cream
- B0ECFA
≈ Beyond the Clouds
- FBD1F2
≈ Shampoo
Split-complementary +150° +210°
- EEE0B1
Cookies and Cream
- C5E5FF
≈ Fresh Water
- E7D8FF
≈ Lavender Savour
Tetradic +90° +180° +270°
- EEE0B1
Cookies and Cream
- B2EEE4
≈ East Cape
- D6DFFF
≈ Transparent Blue
- FFD3DC
≈ Creamy Strawberry
Contrast & accessibility
Ag
FailOn white
WCAG 1.31:1 · APCA Lc 16
Ag
AAAOn black
WCAG 15.93:1 · APCA Lc 88
Best text color: #000000
WCAG 15.93:1 (AAA) · APCA Lc 88
Contrast pairs
Code snippets
CSS
:root {
--cookies-and-cream: #eee0b1;
--cookies-and-cream-rgb: 238 224 177;
--cookies-and-cream-oklch: oklch(0.906 0.063 93.4);
}
.element {
color: var(--cookies-and-cream);
background-color: hsl(46 64% 81%);
border-color: oklch(0.906 0.063 93.4);
}Tailwind CSS v4
@theme {
--color-cookies-and-cream: #eee0b1;
--color-cookies-and-cream-50: #faf5e1;
--color-cookies-and-cream-100: #eee8d1;
--color-cookies-and-cream-200: #dcd5b7;
--color-cookies-and-cream-300: #c1b893;
--color-cookies-and-cream-400: #ab9e74;
--color-cookies-and-cream-500: #948655;
--color-cookies-and-cream-600: #7d7148;
--color-cookies-and-cream-700: #645a39;
--color-cookies-and-cream-800: #4a4229;
--color-cookies-and-cream-900: #342d1b;
--color-cookies-and-cream-950: #1f1a0c;
}SCSS
$cookies-and-cream: #eee0b1;
$cookies-and-cream-rgb: 238, 224, 177;
$cookies-and-cream-light: mix(#fff, $cookies-and-cream, 20%);
$cookies-and-cream-dark: mix(#000, $cookies-and-cream, 20%);
.element {
color: $cookies-and-cream;
box-shadow: 0 0 0 2px rgba($cookies-and-cream, 0.35);
}