Beige Color Code: HEX, RGB, 30 Shades of Beige and Palettes

The beige color code is #F5F5DC, which is RGB 245, 245, 220. It’s the CSS color named beige, a pale, slightly yellow off-white. If you want a warmer, browner beige, popular options are tan #D2B48C (RGB 210, 180, 140), almond #EED9C4 and desert sand #EDC9AF.

Below you’ll find the HEX, RGB, CMYK and HSL values for beige and tan, 30 shades of beige with their codes, the difference between beige, cream, ecru, khaki and taupe, six beige color palettes and quick steps for using beige in Canva, Photoshop and CSS.

Shades marked CSS are official CSS color keywords. The other names use the hex values listed in Wikipedia’s color lists, checked on 12 November 2026. CMYK figures are simple conversions from RGB, so check them against a printed proof before a big print run.

Beige Color Code Values at a Glance

Use #F5F5DC for backgrounds, cards and page sections where you want a soft, neutral base. Use tan #D2B48C for buttons, borders and accents that need more depth.

Format	Beige	Tan
HEX	#F5F5DC	#D2B48C
RGB	245, 245, 220	210, 180, 140
CMYK	0, 0, 10, 4	0, 14, 33, 18
HSL	60°, 56%, 91%	34°, 44%, 69%
HSV	60°, 10%, 96%	34°, 33%, 82%
CSS	beige or #F5F5DC	tan or #D2B48C

What Is Beige?

Wikipedia describes beige as a pale sandy fawn color, a grayish tan, a light grayish yellowish brown or a pale to grayish yellow. The name comes from French, where it originally meant natural wool that had been neither bleached nor dyed.

That loose definition is why beige codes vary from site to site. The word has come to cover a whole range of light, neutral and warm tints, from the near-white #F5F5DC to deeper sandy browns. Wikipedia lists #F5F5DC as the standard web beige, and the 30 shades below show the range around it.

Wikipedia also notes that beige is popular in clothing and interior design, and that AT&T sold desert sand colored telephones in the 1960s but called the color beige. It’s a good reminder that people use the name for many different tints.

Which Beige Should You Use?

Beige runs from near-white creams to deep, sandy browns. Pick the shade by the job it has to do:

• #F5F5DC (beige) is the CSS keyword. It has a slight yellow tint, which suits soft backgrounds, cards and notes.
• #FAF0E6 (linen), #FDF5E6 (old lace) and #FFF8E7 (cosmic latte) are lighter, warmer off-whites. They make page backgrounds that feel softer than white.
• #EED9C4 (almond) and #EDC9AF (desert sand) lean peachy. They suit weddings, interiors and beauty brands.
• #D2B48C (tan) and #DEB887 (burlywood) are deeper CSS beiges for buttons, borders and illustrations.
• #C3B091 (khaki) and #C2B280 (ecru) are grayer and more muted. They work for earthy, minimal and outdoor brands.
• #A67B5B (French beige) is a deep, brownish beige. Use it for accents and large headlines, not small text.

On screen, beige is a light, low-saturation mix where red and green are high and blue is lower. With red and green equal, as in #F5F5DC, the tint is yellowish. Make red a little higher than green and the beige turns peachy, as with almond and desert sand. Lower all three values and it deepens toward tan, camel and French beige.

Shades of Beige With Hex Codes

These 30 shades of beige run from pale cosmic latte and linen to deep camel and French beige. Copy any hex code and paste it straight into your design tool.

Shade	HEX	RGB	CMYK
Cosmic latte	#FFF8E7	255, 248, 231	0, 3, 9, 0
Old lace (CSS)	#FDF5E6	253, 245, 230	0, 3, 9, 1
Isabelline	#F4F0EC	244, 240, 236	0, 2, 3, 4
Linen (CSS)	#FAF0E6	250, 240, 230	0, 4, 8, 2
Cornsilk (CSS)	#FFF8DC	255, 248, 220	0, 3, 14, 0
Papaya whip (CSS)	#FFEFD5	255, 239, 213	0, 6, 16, 0
Antique white (CSS)	#FAEBD7	250, 235, 215	0, 6, 14, 2
Beige (CSS)	#F5F5DC	245, 245, 220	0, 0, 10, 4
Blanched almond (CSS)	#FFEBCD	255, 235, 205	0, 8, 20, 0
Magnolia	#F2E8D7	242, 232, 215	0, 4, 11, 5
Champagne	#F7E7CE	247, 231, 206	0, 6, 17, 3
Eggshell	#F0EAD6	240, 234, 214	0, 3, 11, 6
Bisque (CSS)	#FFE4C4	255, 228, 196	0, 11, 23, 0
Parchment	#F1E9D2	241, 233, 210	0, 3, 13, 5
Almond	#EED9C4	238, 217, 196	0, 9, 18, 7
Moccasin (CSS)	#FFE4B5	255, 228, 181	0, 11, 29, 0
Bone	#E3DAC9	227, 218, 201	0, 4, 11, 11
Dutch white	#EFDFBB	239, 223, 187	0, 7, 22, 6
Navajo white (CSS)	#FFDEAD	255, 222, 173	0, 13, 32, 0
Wheat (CSS)	#F5DEB3	245, 222, 179	0, 9, 27, 4
Desert sand	#EDC9AF	237, 201, 175	0, 15, 26, 7
Lion	#DECC9C	222, 204, 156	0, 8, 30, 13
Burlywood (CSS)	#DEB887	222, 184, 135	0, 17, 39, 13
Tumbleweed	#DEAA88	222, 170, 136	0, 23, 39, 13
Tan (CSS)	#D2B48C	210, 180, 140	0, 14, 33, 18
Khaki (classic)	#C3B091	195, 176, 145	0, 10, 26, 24
Light French beige	#C8AD7F	200, 173, 127	0, 13, 36, 22
Ecru	#C2B280	194, 178, 128	0, 8, 34, 24
Camel	#C19A6B	193, 154, 107	0, 20, 45, 24
French beige	#A67B5B	166, 123, 91	0, 26, 45, 35

Thirteen of these are official CSS color names, so you can type the name instead of the code: beige, linen, oldlace, cornsilk, antiquewhite, papayawhip, blanchedalmond, bisque, moccasin, wheat, navajowhite, burlywood and tan. Watch out for khaki. The CSS keyword is #F0E68C, a bright yellow, not the muted beige-brown #C3B091 listed here as classic khaki.

Light Beige Color Codes

For light beiges, try cosmic latte #FFF8E7, old lace #FDF5E6, linen #FAF0E6, isabelline #F4F0EC, eggshell #F0EAD6 or beige #F5F5DC. They make soft backgrounds, but they need dark text on top.

Dark Beige Color Codes

For deeper beiges, try tan #D2B48C, khaki #C3B091, ecru #C2B280, camel #C19A6B or French beige #A67B5B. They suit buttons, borders, furniture and earthy illustrations.

Beige vs Cream vs Ecru vs Khaki vs Taupe

These neutrals get mixed up all the time. Here’s how they compare:

Color	HEX	RGB	What it looks like
Beige	#F5F5DC	245, 245, 220	A pale, slightly yellow off-white
Cream	#FFFDD0	255, 253, 208	Lighter and more yellow than beige
Ecru	#C2B280	194, 178, 128	A deeper, sandy yellow-beige
Khaki (classic)	#C3B091	195, 176, 145	A muted, grayish beige-brown
Tan	#D2B48C	210, 180, 140	A warm, light brown-beige
Taupe	#483C32	72, 60, 50	A dark gray-brown, far deeper than beige

An easy way to remember it: cream is lighter and more yellow than beige, ecru and khaki are deeper and sandier, and taupe is much darker. Cream #FFFDD0 has 18% saturation in HSV against 10% for beige, which is why it looks more yellow. Wikipedia notes that ecru meant exactly the same color as beige until at least 1930 and has been treated as a different color since at least the 1950s.

Beige Color Palettes (With Hex Codes)

Beige is a neutral, so it works as a base for almost any accent color. Here are six beige color palettes ready to copy:

Palette	Hex codes	Good for
Beige, cream and brown	#F5F5DC, #E3DAC9, #C19A6B, #6F4E37, #2E2118	Cafés, bakeries and cozy interiors
Beige and sage green	#F5F5DC, #D9DEC5, #A3B18A, #588157, #3A5A40	Wellness, eco brands and minimal websites
Beige and navy	#F5F5DC, #D9CBB0, #8DA9C4, #1B2A49, #FFFFFF	Finance, law and classic business designs
Beige and terracotta	#FAEBD7, #E5C1A5, #C8693F, #8C4A2F, #3E2A22	Boho decor, ceramics and autumn campaigns
Beige and blush	#FFF8E7, #F1DDCF, #D9A5A0, #A8696B, #5E3A3C	Weddings, beauty and fashion
Warm neutrals	#FFF8E7, #EED9C4, #D2B48C, #C19A6B, #A67B5B	Branding, social posts and presentations

For softer tints, see our pastel color codes. For deeper, earthier tones to pair with beige, see the brown color code guide.

What Colors Go With Beige?

• White and cream: a soft, airy look. Keep some white in the design so the beige doesn’t look flat.
• Navy: a classic, polished pairing. Navy text on beige scores 12.9:1 for contrast.
• Sage and olive green: a natural, calm look that suits wellness and eco brands.
• Brown and chocolate: warm and cozy, and good for cafés and interiors. See the brown color code for more browns.
• Terracotta and rust: an earthy, boho look. Our red color code guide has warm reds to add punch.
• Blush and dusty pink: a soft, romantic look for weddings and beauty. See the hot pink color code for a bolder pink or our feminine colors for more soft combinations.
• Black and charcoal: a modern, high-contrast look for fashion and minimal brands.
• Gold: warm and elegant, especially with light beiges. Our gold color code guide lists the best golds to use.
• Turquoise and teal: a fresh contrast with warm neutrals. Our turquoise guide has codes.

How to Use the Beige Color Code in Canva, Photoshop and CSS

1. Canva: select your background or shape, click the color tile on the toolbar, choose the plus icon to add a new color and paste #F5F5DC into the hex field.
2. Photoshop: click the foreground color swatch, type F5F5DC into the # field of the Color Picker and select OK.
3. CSS: write background: #F5F5DC; or use a named color such as background: beige; or color: tan;.
4. Brand kits: save your beige with its RGB and CMYK values so screen and print match. Pale beiges can shift in print, so order a proof. Our brand kit examples show how brands document their colors.

Make Sure Text on Beige Is Readable

Beige is a light background, so dark text works well on it. Problems start with light or mid-tone text. #F5F5DC is almost as light as white, so beige text on a white page scores only about 1.1:1, and white text on tan #D2B48C scores just 2:1. Here’s how common pairings score:

Text color	Background	Contrast ratio	Normal text
#1B2A49 navy	#F5F5DC beige	12.9:1	Passes
#483C32 taupe	#F5F5DC beige	9.6:1	Passes
#8B4513 saddle brown	#F5F5DC beige	6.4:1	Passes
#A67B5B French beige	#F5F5DC beige	3.4:1	Large text only
#FFFFFF white	#D2B48C tan	2:1	Fails
#000000 black	#D2B48C tan	10.7:1	Passes

In short, use navy, taupe or saddle brown for text on beige, and use black rather than white on tan. Keep French beige for large headlines and decorative elements. It scores 3.4:1 on beige, which only passes for large text.

What Does the Color Beige Mean?

Beige is a calm, neutral color. It tends to feel natural, warm and understated, which is why it’s so common in interior design, clothing and minimalist branding. Because beige is quiet, it lets other colors and photos stand out. Used on its own, it can look flat, so add a stronger accent such as navy, green or terracotta and keep plenty of contrast between text and background.

Building a full palette? Our guides to the brown color code, gold color code and yellow color code have more hex codes that pair well with beige.

Frequently Asked Questions