Named color · #F0DED3
Spice Cookie
Spice Cookie is #F0DED3: rgb(240 222 211), hsl(23 49% 88%), oklch(0.912 0.025 53.7). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Gray mean? → · Spice Cookie color name →
#F0DED3
oklch(0.912 0.025 53.7)
Color conversions
- HEX
- #f0ded3
- RGB
- rgb(240 222 211)
- HSL
- hsl(23 49% 88%)
- HWB
- hwb(23 83% 6%)
- OKLCH
- oklch(0.912 0.025 53.7)
- OKLab
- oklab(0.912 0.015 0.02)
- CIE Lab
- lab(89.72 5.05 7.76)
- LCH
- lch(89.72 9.25 57)
- CMYK
- cmyk(0% 7% 12% 6%)
Tints · Shades · Tones
Tints
- F2E1D7
- F3E5DC
- F5E8E0
- F6EBE4
- F8EEE9
- F9F2ED
- FBF5F2
- FCF8F6
- FEFCFB
Shades
- D1C1B7
- B2A59C
- 958982
- 786F69
- 5D5551
- 433D3A
- 2A2624
- 141210
- 030202
Tones
- E4D4CA
- D9CAC2
- CDC1B9
- C2B7B1
- B6AEA9
- ABA4A0
- A09B98
- 959290
- 8B8988
Color harmonies
Complementary +180°
- F0DED3
Spice Cookie
- D3E5F0
≈ Pattens Blue
Analogous -30° +30°
- F0DED3
Spice Cookie
- F2DCDA
≈ Hawaiian Shell
- EAE1D0
≈ Brandied Pears
Triadic +120° +240°
- F0DED3
Spice Cookie
- D2E8E0
≈ Aqua Glass
- E2DFF1
≈ Lingering Lilac
Split-complementary +150° +210°
- F0DED3
Spice Cookie
- D0E7E9
≈ Blue Phlox
- DAE2F3
≈ Aquarelle Purple
Tetradic +90° +180° +270°
- F0DED3
Spice Cookie
- D9E7D8
≈ Toadstool Dot
- D3E5F0
≈ Pattens Blue
- EBDDEC
≈ Sprinkle
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 {
--spice-cookie: #f0ded3;
--spice-cookie-rgb: 240 222 211;
--spice-cookie-oklch: oklch(0.912 0.025 53.7);
}
.element {
color: var(--spice-cookie);
background-color: hsl(23 49% 88%);
border-color: oklch(0.912 0.025 53.7);
}Tailwind CSS v4
@theme {
--color-spice-cookie: #f0ded3;
--color-spice-cookie-50: #fbf3ee;
--color-spice-cookie-100: #efe6e0;
--color-spice-cookie-200: #ddd2ca;
--color-spice-cookie-300: #c2b4ac;
--color-spice-cookie-400: #ab9b91;
--color-spice-cookie-500: #948277;
--color-spice-cookie-600: #7d6e65;
--color-spice-cookie-700: #645851;
--color-spice-cookie-800: #4a403b;
--color-spice-cookie-900: #332c28;
--color-spice-cookie-950: #1f1916;
}SCSS
$spice-cookie: #f0ded3;
$spice-cookie-rgb: 240, 222, 211;
$spice-cookie-light: mix(#fff, $spice-cookie, 20%);
$spice-cookie-dark: mix(#000, $spice-cookie, 20%);
.element {
color: $spice-cookie;
box-shadow: 0 0 0 2px rgba($spice-cookie, 0.35);
}