Skip to content
ColorPlum

Colors · value from the CSS Color Module Level 4 (W3C)

Beige color: hex code #F5F5DC, RGB and palettes

Beige is #F5F5DC (RGB 245, 245, 220), a CSS named color: a pale, slightly yellow-green off-white. Dark text suits it; black reaches 18.97:1, while white text is only 1.10:1.

By Paul Gunder. Every value is computed from published standards; see how ColorPlum works.

Updated

ColorPlum swatchBeigepale, soft yellow
HEX
#F5F5DC
RGB
rgb(245, 245, 220)
HSL
hsl(60, 56%, 91%)

Best text on it: black at 18.97:1

Copy codes as
Build a paletteMake a gradientCheck contrastWallpaper

Every code for Beige

  • HEX#F5F5DC
  • RGBrgb(245, 245, 220)
  • HSLhsl(60, 56%, 91%)
  • HSV60°, 10%, 96%
  • CMYK0%, 0%, 10%, 4%
  • Lablab(96% -3.1 12.1)
  • OKLCHoklch(96.4% 0.033 107)
  • Decimal16119260

Tints, shades and tones

From white to black in 10% steps, with Beige in the middle. Tap a code to copy it.

  1. 90%#FEFEFC
  2. 80%#FDFDF8
  3. 70%#FCFCF5
  4. 60%#FBFBF1
  5. 50%#FAFAEE
  6. 40%#F9F9EA
  7. 30%#F8F8E7
  8. 20%#F7F7E3
  9. 10%#F6F6E0
  10. Base#F5F5DC
  11. 10%#DDDDC6
  12. 20%#C4C4B0
  13. 30%#ACAC9A
  14. 40%#939384
  15. 50%#7B7B6E
  16. 60%#626258
  17. 70%#4A4A42
  18. 80%#31312C
  19. 90%#191916

Tones (mixed with gray)

  1. 10%#E9E9D3
  2. 20%#DEDECA
  3. 30%#D2D2C0
  4. 40%#C6C6B7
  5. 50%#BBBBAE
  6. 60%#AFAFA5
  7. 70%#A3A39C
  8. 80%#979792
  9. 90%#8C8C89

Matching colors

Complementary
Analogous
Triadic
Split complementary
Tetradic (square)
Monochromatic
  • #D3D365
  • #E4E4A1
  • #F5F5DC
  • #FAFAEF
  • #FAFAEF

Beige in 3D color space

OKLab, the space ColorPlum does its math in: lightness runs up the pole, hue goes around it and saturation grows outward. The faint shell is every color a screen can show (saturation is drawn wider than lightness so hues separate). Drag to turn it.

Beige with its complement, its triad and its tint and shade
  • Beige
  • Triad #DCF5F5
  • Triad #F5DCF5
  • Complement
  • 50% tint
  • 50% shade

Beige in use

New collectionAutumn edit

Card body text stays dark for reading; beige carries the header and the button.

Shop nowTag

Headline in Beige

A paragraph with a link in dark text, because this color is too light for text on white; use it for fills instead.

How it looks with color-vision deficiency

A simulation (Machado and colleagues, 2009) of how the color and its complement read without one type of cone.

  • Typical color vision#F5F5DC
  • Protanopia (no red cones)#FAF3DB
  • Deuteranopia (no green cones)#FAF4DD
  • Tritanopia (no blue cones)#F9F2EE

Contrast and readability

PairingRatioWCAG 2.2
as text on white1.10:1AA AA large AAA
as text on black18.97:1AA AA large AAA
white text on it1.10:1AA AA large AAA
black text on it18.97:1AA AA large AAA
on your background1.03:1AA AA large AAA

Export

:root {
  --beige: #f5f5dc;
  --beige-rgb: 245 245 220;
  --beige-on: #000000;
}
On this page

Among the CSS keywords, beige has the value #F5F5DC. The word comes from a French term for natural, undyed wool, and it has come to mean a pale, quiet neutral. In CSS, though, beige is a little more yellow-green than many people expect, closer to a pale oatmeal or bone than to a warm sand.

What the codes mean

In RGB, beige is 245, 245, 220: red and green are equal and high, blue is lower. Equal red and green put its hue at 60° in HSL, which is pure yellow, with 56% saturation and 91% lightness. The CMYK estimate is 0%, 0%, 10%, 4%.

The xkcd survey disagrees. Its "beige" is #E6DAA6, a darker, more golden shade that sits 8.7 away in OKLab distance, so they are clearly two different colors. Closer to CSS beige in the survey are "pale" (#FFF9D0, 2.5 away), "off white" (#FFFFE4, 2.9) and "eggshell" (#FFFFD4, 3.4). Inside CSS, cornsilk (#FFF8DC) is 1.6 away and oldlace (#FDF5E6) 1.8 away. If you want a warmer neutral, try tan or lemon chiffon.

Using beige well

  • Text on it: black is 18.97:1, and charcoal #3C4142 reaches 9.36:1. White text fails at 1.10:1.
  • As a background: it gives pages a paper-like warmth that pure white lacks, without becoming obviously yellow.
  • Shades: the 40% shade, #939384, is a muted olive-gray, and the 70% shade, #4A4A42, is a soft near-black for text.
  • Pairings: the complement is a lilac, #DCDCF5, but most people prefer deep green, navy, burgundy or terracotta on a beige page.

Worked example

You are laying out a recipe page for a family cookbook that will be shared as a PDF. Set the page in beige and the recipe text in #4A4A42, which measures 8.07:1, above AAA. Step numbers in burnt orange (#C04E01) measure 4.38:1 on the beige, just under the 4.5:1 AA line, so make them bold and large or pick a darker accent. White boxes for ingredient lists would show only 1.10:1 against the page, so give them a thin outline. Printing this page on cream paper will make the beige nearly vanish, so choose white stock for the PDF's print version.

Beige versus cream and ivory

Beige carries more color than cream or ivory, and it sits further from white. Cream is lighter and ivory is warmer, but all three overlap in everyday speech. Using the hex code avoids guesswork. The shade and tint generator lets you walk from this one toward white or toward a darker oatmeal.

Sources

  1. W3C, CSS Color Module Level 4: named colors and color conversions (checked 2026-11-10) w3.org
  2. xkcd, Color survey results: the 954 most common color names (Randall Munroe, 2010; checked 2026-11-10) xkcd.com
  3. W3C, Web Content Accessibility Guidelines (WCAG) 2.2: contrast minimum (checked 2026-11-10) w3.org