Named color · #F9E5C2
Havana Cream
Havana Cream is #F9E5C2: rgb(249 229 194), hsl(38 82% 87%), oklch(0.929 0.051 81.6). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Orange mean? → · Havana Cream color name →
#F9E5C2
oklch(0.929 0.051 81.6)
Color conversions
- HEX
- #f9e5c2
- RGB
- rgb(249 229 194)
- HSL
- hsl(38 82% 87%)
- HWB
- hwb(38 76% 2%)
- OKLCH
- oklch(0.929 0.051 81.6)
- OKLab
- oklab(0.929 0.007 0.05)
- CIE Lab
- lab(91.92 3.1 19.75)
- LCH
- lch(91.92 19.99 81.1)
- CMYK
- cmyk(0% 8% 22% 2%)
Tints · Shades · Tones
Tints
- FAE8C8
- FAEACE
- FBEDD4
- FBEFDB
- FCF2E1
- FDF5E7
- FDF7ED
- FEFAF3
- FEFCF9
Shades
- D9C7A8
- B9AA8F
- 9A8E77
- 7D7260
- 615849
- 463F34
- 2C2820
- 15120E
- 030302
Tones
- ECDABB
- E0D0B5
- D3C6AE
- C7BBA7
- BBB1A1
- AFA79A
- A39D94
- 97938D
- 8B8A87
Color harmonies
Complementary +180°
- F9E5C2
Havana Cream
- DBE8FF
≈ Veiling Waterfalls
Analogous -30° +30°
- F9E5C2
Havana Cream
- FFE1CF
≈ Powdered Peach
- E8ECC5
≈ Olive Creed
Triadic +120° +240°
- F9E5C2
Havana Cream
- C1F2F6
≈ Pale Sky
- F8DDFC
≈ Sugarpills
Split-complementary +150° +210°
- F9E5C2
Havana Cream
- CDEDFF
≈ Blue Hijab
- E7E4FF
≈ Lavender Mist
Tetradic +90° +180° +270°
- F9E5C2
Havana Cream
- C7F3E3
≈ Shallow End
- DBE8FF
≈ Veiling Waterfalls
- FFDDEB
≈ Transparent Pink
Contrast & accessibility
Ag
FailOn white
WCAG 1.23:1 · APCA Lc 12
Ag
AAAOn black
WCAG 17.01:1 · APCA Lc 92
Best text color: #000000
WCAG 17.01:1 (AAA) · APCA Lc 92
Contrast pairs
Code snippets
CSS
:root {
--havana-cream: #f9e5c2;
--havana-cream-rgb: 249 229 194;
--havana-cream-oklch: oklch(0.929 0.051 81.6);
}
.element {
color: var(--havana-cream);
background-color: hsl(38 82% 87%);
border-color: oklch(0.929 0.051 81.6);
}Tailwind CSS v4
@theme {
--color-havana-cream: #f9e5c2;
--color-havana-cream-50: #fcf4e5;
--color-havana-cream-100: #f0e7d5;
--color-havana-cream-200: #dfd3bc;
--color-havana-cream-300: #c4b69a;
--color-havana-cream-400: #ae9c7d;
--color-havana-cream-500: #97835f;
--color-havana-cream-600: #806f51;
--color-havana-cream-700: #665941;
--color-havana-cream-800: #4c412e;
--color-havana-cream-900: #352d1f;
--color-havana-cream-950: #201a0f;
}SCSS
$havana-cream: #f9e5c2;
$havana-cream-rgb: 249, 229, 194;
$havana-cream-light: mix(#fff, $havana-cream, 20%);
$havana-cream-dark: mix(#000, $havana-cream, 20%);
.element {
color: $havana-cream;
box-shadow: 0 0 0 2px rgba($havana-cream, 0.35);
}