Color family
Shades of beige
A pale, grayish beige with warm undertones. The reference beige is #F5F5DC, as defined by the CSS named color.
| HEX | #F5F5DC | |
|---|---|---|
| RGB | rgb(245, 245, 220) | |
| HSL | hsl(60, 56%, 91%) | |
| HSV | hsv(60, 10%, 96%) | |
| OKLCH | oklch(96.4% 0.033 107.0) | |
| CMYK* | 0, 0, 10, 4 |
* CMYK is a simple conversion without a print profile; ask your printer for exact values.
What color is beige?
Beige comes from the French word for natural, undyed wool. It covers pale, slightly yellowish greys and browns, the colour family interior designers call warm neutrals. The CSS keyword beige is very pale and a little green, while the xkcd survey beige is darker and sandier, closer to what most people mean.
Beige hex codes by source
Color names are not standardized, so the same name can point to different colors. Here is every definition of beige in our three sources, with how close each one is to the reference.
| Name | HEX | Source | Compared with the reference |
|---|---|---|---|
| Beige | #F5F5DC | CSS named color | Reference shown on this page |
| Beige | #E6DAA6 | xkcd Color Survey | Noticeably different · 65% similar |
| Beige | #E6DAA6 | Color Names (meodai) | Noticeably different · 65% similar |
Beige vs Tan
#F5F5DC
#D2B48C
Tan is darker and more brown; beige is the pale, creamy end of the same family. In numbers: the two are 27% similar (OKLab distance 0.182). See Tan for its own codes.
Named shades of beige
32 names in the CSS keywords and the xkcd Color Survey belong to the beige family. To give a fuller range, 28 more beige names come from the Color Names list. They are sorted from light to dark; click a swatch to copy its code, or open the ones with their own page.
Light beige shades 57
Medium beige shades 3
Tints and shades of beige
The same hue from light to dark, generated in OKLab so the steps look even. Click a step to copy its HEX code.
Colors that go with beige
Classic color-wheel combinations built on #F5F5DC, computed in OKLCH so the partners keep the same lightness and intensity. Each swatch shows the nearest common name.
Complementary
Analogous
Triadic
Split complementary
Beige with white and black text
WCAG asks for a contrast of at least 4.5:1 for body text (AA) and 3:1 for large text. On a beige background, black text is the better choice.
Use beige in CSS
.beige {
color: #F5F5DC;
/* or */ color: rgb(245 245 220);
/* or */ color: hsl(60 56% 91%);
/* or */ color: oklch(96.4% 0.033 107.0);
/* CSS keyword */ color: beige;
}