Cream Background
#FFFDD0 · rgb(255, 253, 208)
About the cream background
Cream (#FFFDD0) is white warmed with yellow — rgb(255, 253, 208) — and it instantly makes a layout feel cozy, organic and a little retro. It carries the calm of a pastel while still behaving like a neutral.
Because it's bright enough to pair with almost any foreground color, cream works as a full-page background for blogs, bakeries, coffee brands and anything that wants warmth without going full beige.
What to use a cream background for
- Food, bakery and coffee brand backgrounds
- Cozy, retro-styled blogs and newsletters
- Warm neutral canvas for earthy color palettes
- Paper-like backgrounds for journals and planners
How to use cream in CSS
Copy the snippet below, or click any code chip on this page to grab a single value.
/* Full-page cream background */
body {
margin: 0;
background-color: #FFFDD0;
}
/* A single section or element */
.hero {
background-color: rgb(255, 253, 208);
} Cream shades and tints
Click any swatch to copy it. Tints mix cream with white; shades mix it with black.
Cream background FAQ
What colors go well with a cream background?
Cream pairs naturally with browns, terracotta, sage green and navy. For text, dark browns and near-blacks keep the palette warm while staying WCAG accessible.
Is cream the same as beige?
No. Cream #FFFDD0 is a bright, yellow-leaning near-white, while beige #F5F5DC is grayer and duller. Cream feels brighter and sweeter; beige feels muted and earthy.
What is the hex code for cream?
Cream is #FFFDD0 in hexadecimal, rgb(255, 253, 208) in RGB and hsl(57, 100%, 91%) in HSL. Paste #FFFDD0 into any CSS background-color property to use it.
How do I set a cream background in CSS?
Add background-color: #FFFDD0; to any element, or apply it to the whole page: body { background-color: #FFFDD0; margin: 0; }. You can also use the CSS keyword or the rgb() form — rgb(255, 253, 208) — with identical results.