#FFFDD0Cream hex code: #FFFDD0 · RGB 255, 253, 208. Also called cream white, off-white.
Cream is a warm, pale yellowish white, like dairy cream. The common reference value is #FFFDD0, which is quite yellow on most screens. Designers usually reach for softer warm whites such as #FAF6EC or #F8F1DC when they say 'cream'.
Cream is one of the most useful background colors on the web: it feels warmer and more premium than pure white, and it's less glaring for long reading. It's a staple of editorial, food, wedding, bakery and heritage brands.
Nearly any dark text passes on cream. Pair cream with forest or hunter green, burgundy, navy, terracotta or charcoal. If #FFFDD0 looks too yellow beside photos, use ivory cream (#FAF6EC).
Popular color names rarely have one official value. "Reference" values are the ones commonly listed in general color references; "HueWiz pick" values are lighter, deeper or muted versions chosen for interface work. Click a code to copy it.
#FFFDD0rgb(255, 253, 208) · reference#F8F1DCrgb(248, 241, 220) · HueWiz pick#FAF6ECrgb(250, 246, 236) · HueWiz pick#EFE3C2rgb(239, 227, 194) · HueWiz pickThe same base color in a light and a dark theme. Surfaces and text are tinted with cream's hue; links are adjusted until they reach 4.5:1 against the surface. The accent comes from the first palette below.
Spring collection
Designed around cream.
A short paragraph shows how body text reads on this surface, with an inline link in the brand color.
#F8F7EF · text #202015 · link #75724ASpring collection
Designed around cream.
A short paragraph shows how body text reads on this surface, with an inline link in the brand color.
#15140B · text #EFEFEA · link #FFFDD0Hand-picked combinations that work with cream. Hover a swatch to see its code; click to copy.
WCAG 2.x asks for 4.5:1 for normal text (AA), 3:1 for large text and 7:1 for AAA. Ratios are truncated, not rounded, so a pass shown here is a real pass. Check your exact pairs in the contrast checker.
| Pairing | Ratio | Normal text | Large text |
|---|---|---|---|
| White text on cream | 1.03:1 | Fail | Fail |
| Black text on cream | 20.21:1 | AAA | AAA |
| Cream text on white | 1.03:1 | Fail | Fail |
| Cream text on near-black #111111 | 18.17:1 | AAA | AAA |
| White text on deeper cream #7A7850 | 4.53:1 | AA | AAA |
An 11-step 50–950 ramp generated in OKLCH from #FFFDD0. Light steps suit backgrounds and borders, middle steps buttons, dark steps text. This is a generated ramp, not an official Tailwind palette.
@import "tailwindcss";
@theme {
--color-cream-50: #FCFACD;
--color-cream-100: #F2F0C5;
--color-cream-200: #DFDDB7;
--color-cream-300: #C6C5A3;
--color-cream-400: #A9A88C;
--color-cream-500: #8D8C76;
--color-cream-600: #727160;
--color-cream-700: #5B5A4D;
--color-cream-800: #45443B;
--color-cream-900: #302F29;
--color-cream-950: #1C1C17;
--color-cream: #FFFDD0;
}:root {
--cream: #FFFDD0;
--cream-rgb: 255 253 208;
--cream-light: #F2F0C5;
--cream-dark: #45443B;
}
.btn-cream {
background: #7A7850;
color: #000000;
}Need semantic roles (surface, text, primary, accent) and exports? Open cream in the Tailwind color generator.
#FFFDD0 is the value HueWiz uses for cream; it equals rgb(255, 253, 208). Other common versions include #F8F1DC (warm cream), #FAF6EC (ivory cream), #EFE3C2 (deep cream).
With an HSL hue of 57° and 100% saturation, cream reads as a warm yellow.
Use dark text. White on #FFFDD0 measures 1.03:1 and black measures 20.21:1; WCAG AA needs 4.5:1 for normal text. For white text, deepen it to about #7A7850.
Try classic editorial (#FAF6EC, #1F1F1F, #800020); bakery (#FFFDD0, #C19A6B, #E2725B); cream & green (#F8F1DC, #355E3B, #9CAF88). Each palette above can be copied or opened in the HueWiz studio.
Cream isn't a CSS keyword. These built-in CSS colors are the nearest by perceptual (OKLab) distance; lower ΔE means closer.
#FFFACD · ΔE 1#FAFAD2 · ΔE 1#FFFFE0 · ΔE 2#FFF8DC · ΔE 2