Beige Color

CSS beige #F5F5DC — a very pale, slightly yellowish neutral.

Beige

#F5F5DC

HEX: #F5F5DC
RGB: rgb(245, 245, 220)
HSL: hsl(60, 55.6%, 91.2%)
HSV: hsv(60, 10.2%, 96.1%)
CMYKapproximation: cmyk(0%, 0%, 10%, 4%)
CSS name: beige

Open beige in the color picker to adjust it or copy other formats.

About beige

#F5F5DC is the CSS named color beige. It is much lighter than many people expect — closer to an off-white with a faint yellow-green cast than to the sandy beige of clothing or interiors.

In fashion and interior design, “beige” usually means a darker, warmer tone. The CSS colors wheat (#F5DEB3) and tan (#D2B48C) come closer to that look.

#F5F5DC is the value of the CSS named color beige, defined in the CSS Color specification and identical in every browser.

Other colors called beige

Wheat (CSS) #F5DEB3A warmer, sandier beige.
Tan (CSS) #D2B48CA darker, earthy beige.

Beige shades and tints

Shades mix beige with black, tints mix it with white — useful for hover states, borders and backgrounds. Click a swatch to copy its HEX code.

Colors that go with beige

Color harmonies based on the hue of #F5F5DC: its complement on the opposite side of the color wheel, its analogous neighbours and its triadic partners.

Beige contrast and readability

On a beige background, black text reads best (18.97:1). Here is how beige works as a text color:

#F5F5DC on white

1.10:1

Normal text sample

Large text

AA normal text (4.5:1)Fail
AA large text (3:1)Fail
AAA normal text (7:1)Fail
AAA large text (4.5:1)Fail

#F5F5DC on black

18.97:1

Normal text sample

Large text

AA normal text (4.5:1)Pass
AA large text (3:1)Pass
AAA normal text (7:1)Pass
AAA large text (4.5:1)Pass

CSS beige is a background color, useful for soft, paper-like sections. For a sandier beige, start from wheat or tan and adjust the lightness in the color picker.

Using beige in CSS and HTML

CSS custom property

:root {
  --color-beige: #F5F5DC;
}

.highlight {
  background-color: var(--color-beige);
}

Background and text color

.banner {
  background-color: beige;
  color: #000000;
}

.label {
  color: #F5F5DC;
  border: 2px solid rgb(245, 245, 220);
}

Inline style in HTML

<p style="background-color: #F5F5DC; color: #000000;">
  Beige background
</p>