Named color · #FAF5E7
Whipping Cream
Whipping Cream is #FAF5E7: rgb(250 245 231), hsl(44 66% 94%), oklch(0.97 0.019 90.5). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Gray mean? → · Whipping Cream color name →
#FAF5E7
oklch(0.97 0.019 90.5)
Color conversions
- HEX
- #faf5e7
- RGB
- rgb(250 245 231)
- HSL
- hsl(44 66% 94%)
- HWB
- hwb(44 91% 2%)
- OKLCH
- oklch(0.97 0.019 90.5)
- OKLab
- oklab(0.97 0 0.019)
- CIE Lab
- lab(96.65 -0.03 7.39)
- LCH
- lch(96.65 7.39 90.2)
- CMYK
- cmyk(0% 2% 8% 2%)
Tints · Shades · Tones
Tints
- FAF6E9
- FBF7EC
- FBF8EE
- FCF9F1
- FCFAF3
- FDFBF5
- FDFCF8
- FEFDFA
- FEFEFD
Shades
- D9D5C9
- BAB6AB
- 9B988F
- 7D7B73
- 615F59
- 464440
- 2D2B28
- 151513
- 030303
Tones
- EDE9DC
- E0DDD2
- D4D0C7
- C7C5BD
- BBB9B2
- AFADA8
- A3A29E
- 979694
- 8B8B8A
Color harmonies
Complementary +180°
- FAF5E7
Whipping Cream
- F1F5FF
≈ Cotton Ball
Analogous -30° +30°
- FAF5E7
Whipping Cream
- FFF3E9
≈ Ambrosia Ivory
- F3F7E9
≈ Garden Dawn
Triadic +120° +240°
- FAF5E7
Whipping Cream
- E7F9FC
≈ Calm Waters
- FDF1FB
≈ Pinkish White
Split-complementary +150° +210°
- FAF5E7
Whipping Cream
- ECF7FF
≈ Alice Blue
- F7F3FF
≈ Sugar Crystal
Tetradic +90° +180° +270°
- FAF5E7
Whipping Cream
- E8FAF6
≈ Melting Glacier
- F1F5FF
≈ Cotton Ball
- FFF1F5
≈ Lavender Blush
Contrast & accessibility
Ag
FailOn white
WCAG 1.08:1 · APCA Lc 0
Ag
AAAOn black
WCAG 19.27:1 · APCA Lc 101
Best text color: #000000
WCAG 19.27:1 (AAA) · APCA Lc 101
Contrast pairs
Code snippets
CSS
:root {
--whipping-cream: #faf5e7;
--whipping-cream-rgb: 250 245 231;
--whipping-cream-oklch: oklch(0.97 0.019 90.5);
}
.element {
color: var(--whipping-cream);
background-color: hsl(44 66% 94%);
border-color: oklch(0.97 0.019 90.5);
}Tailwind CSS v4
@theme {
--color-whipping-cream: #faf5e7;
--color-whipping-cream-50: #f7f5ef;
--color-whipping-cream-100: #eae8e1;
--color-whipping-cream-200: #d7d4cb;
--color-whipping-cream-300: #bbb7ad;
--color-whipping-cream-400: #a39e92;
--color-whipping-cream-500: #8b8678;
--color-whipping-cream-600: #757166;
--color-whipping-cream-700: #5e5b51;
--color-whipping-cream-800: #45423b;
--color-whipping-cream-900: #302e28;
--color-whipping-cream-950: #1c1a16;
}SCSS
$whipping-cream: #faf5e7;
$whipping-cream-rgb: 250, 245, 231;
$whipping-cream-light: mix(#fff, $whipping-cream, 20%);
$whipping-cream-dark: mix(#000, $whipping-cream, 20%);
.element {
color: $whipping-cream;
box-shadow: 0 0 0 2px rgba($whipping-cream, 0.35);
}