Beige Background
#F5F5DC · rgb(245, 245, 220)
About the beige background
Beige (#F5F5DC) is the original quiet neutral: a pale gray-yellow that takes its name from the French word for undyed wool. It reads as calm, natural and understated, sitting between white and tan.
In interface design beige has had a renaissance as the base of 'quiet luxury' and organic branding. It's bright enough for dark text to pass contrast checks easily, yet warm enough to kill the sterile feel of pure white.
What to use a beige background for
- Organic, natural and 'quiet luxury' branding
- Neutral canvas for fashion and interior design lookbooks
- Warm UI themes and aged-paper effects
- Understated backgrounds for serif-heavy editorial design
How to use beige in CSS
Copy the snippet below, or click any code chip on this page to grab a single value.
/* Full-page beige background */
body {
margin: 0;
background-color: #F5F5DC;
}
/* A single section or element */
.hero {
background-color: rgb(245, 245, 220);
} Beige shades and tints
Click any swatch to copy it. Tints mix beige with white; shades mix it with black.
Beige background FAQ
Is beige a good website background color?
Yes — beige #F5F5DC has roughly 17:1 contrast with black text, passes every WCAG level, and creates a softer, more organic feel than white. Just avoid pairing it with low-contrast light grays.
What's the RGB value of beige?
Beige is rgb(245, 245, 220) — equal red and green with a slightly lower blue channel, which produces its signature pale warmth.
What is the hex code for beige?
Beige is #F5F5DC in hexadecimal, rgb(245, 245, 220) in RGB and hsl(60, 56%, 91%) in HSL. Paste #F5F5DC into any CSS background-color property to use it.
How do I set a beige background in CSS?
Add background-color: #F5F5DC; to any element, or apply it to the whole page: body { background-color: #F5F5DC; margin: 0; }. You can also use the CSS keyword or the rgb() form — rgb(245, 245, 220) — with identical results.