Beige color (#F5F5DC)
Beige is one of the 148 CSS named colors. Use the keyword beige
anywhere CSS accepts a color, or its hex code #F5F5DC, which is rgb(245, 245, 220) in RGB.
It is a very light, muted color with a hue angle of 60° on the HSL color wheel and a perceived lightness of 96% in OKLCH. On a beige background, black text gives the higher contrast at 18.97:1, which passes WCAG AA for normal text.
Beige color codes
| CSS name | beige |
|
|---|---|---|
| HEX | #F5F5DC |
|
| HEX (8-digit) | #F5F5DCFF |
|
| RGB | rgb(245, 245, 220) |
|
| HSL | hsl(60, 56%, 91%) |
|
| HSV / HSB | hsv(60, 10%, 96%) |
|
| OKLCH | oklch(96.4% 0.0328 107) |
|
| CMYK | cmyk(0%, 0%, 10.2%, 3.9%) |
Contrast with white and black
WCAG 2 contrast ratios and APCA lightness contrast (Lc) for beige used as text and as a background.
Tints and shades of beige
Tints mix beige with white; shades mix it with black, in 10% steps. Click a swatch to copy it, or build custom scales in the tint & shade generator.
Tints
Shades
Colors that go with beige
Harmonies calculated on the HSL color wheel. Explore more in the color scheme generator.
Complementary
Analogous
Triadic
Split-Complementary
Beige with color blindness
Approximately how beige appears with each type of color vision deficiency. Test full designs with the color blindness simulator.
Using beige in CSS
.element {
color: beige;
background-color: #f5f5dc;
border-color: rgb(245 245 220 / 50%);
outline-color: oklch(96.4% 0.0328 107);
}Similar named colors
See all shades of white or browse every CSS color name.