The CSS beige is paler than you think
“Beige” comes from the French word for natural, undyed wool. The CSS keyword is #F5F5DC, so pale that next to white it looks like a faint cream. The beige most people picture for a sofa or a trench coat is deeper and warmer, closer to the community list's Beige, #E6DAA6, or to tan.
Beige vs tan vs cream
| Name | HEX | HSL | How to tell |
|---|---|---|---|
| Cream | #FFFFC2 | 60°, 100%, 88% | Clean, buttery yellow; no grey in it |
| beige (CSS) | #F5F5DC | 60°, 56%, 91% | Same hue as cream, greyed and paler |
| Beige (list) | #E6DAA6 | 49°, 56%, 78% | Sandy; the “interior” beige |
| tan (CSS) | #D2B48C | 34°, 44%, 69% | Darker and more orange; leather and skin tones |
The rule: cream is yellow, beige is grey-yellow, tan is brown. For the paler, warmer neutrals see cream and champagne.
Stopping beige from looking dull
Beige on its own can feel flat because it is low in both saturation and contrast. Give it something with depth:
- Navy: crisp and classic, like a trench coat with a navy scarf.
- Olive and terracotta: warm, earthy and natural. Note that olive text on CSS beige is only 3.79:1, so use olive for shapes, not small text.
- White: a tonal, airy look; add texture (linen, wood) to keep it from feeling empty.
Beige as a website background
Pale beige makes a friendly, paper-like page. Dark text holds up well: a near-black like #1E272E scores 13.70:1 on CSS beige. Avoid mid-greys for body text on beige; the background's slight yellow makes grey text look dirty.
Questions
What is the RGB code for beige?
CSS beige is rgb(245, 245, 220).
Is beige a warm or cool neutral?
Warm, because of its yellow. Greige (grey plus beige) is the cooler compromise.