Beige color: code #F5F5DC

Beige

#F5F5DC

Color codes

  • HEX#F5F5DC
  • RGBrgb(245, 245, 220)
  • HSLhsl(60, 56%, 91%)
  • HSVhsv(60, 10%, 96%)
  • CMYKcmyk(0%, 0%, 10%, 4%)
  • LABlab(96% -4.2 12.1)
  • OKLCHoklch(96.4% 0.033 107)

About the color Beige

Beige has the HEX code #F5F5DC, which corresponds to rgb(245, 245, 220) in the RGB model. On the color wheel its hue sits at 60°, with 56% saturation and 91% lightness (hsl(60, 56%, 91%)).

Because of its hue it reads as a warm color: it tends to feel energetic and close, and it visually “advances” in a composition.

As a background it calls for dark text: black reaches a 18.97:1 contrast ratio on it, versus 1.10:1 for white.

For print, the approximate conversion is cmyk(0%, 0%, 10%, 4%). Always confirm with your printer’s color profile, because the result depends on paper and ink.

Lighter tints

Darker shades

Color combinations with Beige

Complementary

#F5F5DC · #DBDBF5

Analogous

#F5E8DB · #F5F5DC · #E8F5DB

Triadic

#F5F5DC · #DBF5F5 · #F5DBF5

Tetradic

#F5F5DC · #DBF5E8 · #DBDBF5 · #F5DBE8

Split-complementary

#F5F5DC · #DBE8F5 · #E8DBF5

Monochromatic

#D9D978 · #EAEAB3 · #F5F5DC · #FFFFFF · #FFFFFF

Beige with white and black text

White text Aa Bb Cc 123
1.10:1 · fails WCAG
Black text Aa Bb Cc 123
18.97:1 · AAA

Test other pairs in the contrast checker

If you came here looking for “the beige on my living room wall,” a quick heads-up: the web’s beige, #F5F5DC, is much lighter and slightly greener than the beige most people picture. It started life as an X11 named color and was inherited by CSS, where beige is exactly this old-paper shade. Everyday beige, the color of linen, sand and cardboard, tends to be warmer and darker, somewhere around #D8C3A5 or the CSS tan (#D2B48C).

A neutral with temperature

Beige almost always reads as neutral, understated and welcoming. In fashion and interiors it stands for classic style, “warm minimalism” and natural fabrics like linen and unbleached cotton. For some people, though, beige feels bland or dated: perception depends on generation, culture and whether the color is carrying a design on its own. With texture and natural materials it gains depth; as a flat screen fill it can look like dingy white.

Uses that work

What to pair it with

Contrast: always use dark text

With very high luminance, #F5F5DC has a contrast ratio of only 1.1:1 against white, so white text on beige is practically invisible. Use black, charcoal or dark brown text. Also note that beige on white is hard to tell apart, so separate areas with borders or shadows. In dark mode, swap the beige background for a deep grayish brown and keep beige for the text. Check your pairs in the contrast checker, and see how beige differs from nude and cream on their own pages.

How to use it in CSS

:root {
  --color-beige: #F5F5DC;
  --color-beige-rgb: 245, 245, 220;
}

.elemento {
  background-color: var(--color-beige);
  color: #000000;
}

Similar colors

Use Beige in our tools