Skip to content

Beige #f5f5dc

The neutral that quietly runs the world.

RGB
245, 245, 220
HSL
60°, 56%, 91%
CMYK
0, 0, 10, 4
Luminance
0.8988

About Beige

Beige, #f5f5dc, is the color of undyed wool — the French word literally meant exactly that. It is the most successful neutral in history: interiors, fashion basics, institutional walls and half the packaging on any shelf stand on beige and its cousins.

History

Beige entered fashion vocabulary in 19th-century France for natural, unbleached fabric, then conquered the 20th century twice: first as modernism’s softer wall, then as the “greige” minimalism of the 2010s. The infamous beige box PC era gave it a technological afterlife nobody asked for.

Psychology

Beige is calm, dependable and deliberately unassertive — warmth without opinion. Its risk is its virtue: read as timeless in interiors, it can read as bland in branding, which is why “beige” doubles as an insult for the inoffensive.

In design

Beige surfaces make white space feel like linen instead of plastic — this hub’s warm instrument canvases live in exactly this family. Pair with chocolate, olive, terracotta and black; add one saturated accent so the palette has a pulse. Beige is never a text color.

In culture

Beige-collar jobs, beige diplomacy, the Great Beige of rental apartments: the color of neutrality taken to a lifestyle. Burberry made one beige check into a century-old trademark.

Brands that own beige

Shades of beige

Every format

HEX#f5f5dc
RGBrgb(245, 245, 220)
HSLhsl(60, 56%, 91%)
CMYKcmyk(0%, 0%, 10%, 4%)
LABlab(96.0 -4.2 12.1)
LCHlch(96.0 12.8 109.2)
OKLCHoklch(0.964 0.033 107.0)

Copy-ready code

/* CSS */
color: #f5f5dc;
background-color: #f5f5dc;
/* Tailwind (arbitrary) */
class="text-[#f5f5dc] bg-[#f5f5dc]"
/* SCSS */
$brand: #f5f5dc;
/* SwiftUI */
Color(red: 0.961, green: 0.961, blue: 0.863)
/* Android */
Color.parseColor("#f5f5dc")

Accessibility — WCAG contrast

Aa
#f5f5dc on white: 1.11:1
AA ✗ fail · AA-large · AAA
Aa
#f5f5dc on black: 18.98:1
AA ✓ pass · AA-large · AAA
true color
protanopia
deuteranopia
tritanopia

RGB percentages

Red96.1%
Green96.1%
Blue86.3%

CMYK percentages

Cyan0.0%
Magenta0.0%
Yellow10.2%
Key (black)3.9%

Color previews

#f5f5dc text on a black background

contrast 18.98:1

Card sample

#f5f5dc text on a white background

contrast 1.11:1

Card sample

CSS3 live lab

Text font color

The quick brown fox

color: #f5f5dc;
Background color
Panel with #f5f5dc background
background-color: #f5f5dc;
Text shadow — hex

Glowing headline

text-shadow: 2px 2px 8px #f5f5dc;
Text shadow — RGB

Soft neon halo

text-shadow: 0 0 14px rgba(245, 245, 220, 0.45);
Div box shadow
Elevated card
box-shadow: 0 12px 32px -8px rgba(245, 245, 220, 0.45);
Border & gradient
Gradient panel
border: 3px solid #f5f5dc;
background: linear-gradient(135deg, #f5f5dc, #E4F5DC);

Monochromatic scale

Palettes built from #f5f5dc

Shades — darker

Tints — lighter

Hue & tone neighbors

Color harmonies

Nearest named colors

Beige, answered

What is the hex code for beige?

CSS beige is #f5f5dc. The family spans cream #fffdd0, tan #d2b48c, sand #c2b280 and the gray-beige hybrid “greige” around #b8b2a7.

Beige vs cream vs ivory — the difference?

Ivory leans white with warmth, cream adds a yellow note, beige adds brown/gray body. In hex terms they descend in lightness: #fffff0 → #fffdd0 → #f5f5dc.

How do I keep beige from looking boring?

Texture and contrast: pair it with deep accents (chocolate, black, forest) and one saturated color. Beige is a stage, not a performer.

Work with #f5f5dc in the Color Lab