Beige HEX Code
The HEX code for beige is #F5F5DC. Beige is a light, neutral tan color that serves as a versatile background in design. Named after the natural color of unbleached wool, it's warm and understated.
Beige Color Values
| Format | Value |
|---|---|
| HEX | #F5F5DC |
| RGB | rgb(245, 245, 220) |
| HSL | hsl(60, 56%, 91%) |
| CMYK | C:0 M:0 Y:10 K:4 |
Beige and Neutral Variations
| Shade | HEX | Description |
|---|---|---|
| Ivory | #FFFFF0 | Lighter |
| Linen | #FAF0E6 | Warm white |
| Beige | #F5F5DC | CSS beige |
| Wheat | #F5DEB3 | Golden |
| Tan | #D2B48C | Darker |
| Khaki | #F0E68C | Yellow-ish |
Beige in Design
Beige conveys:
- Neutrality: Unobtrusive, versatile
- Warmth: Cozy, comfortable
- Elegance: Sophisticated, timeless
- Natural: Organic, earthy
Using Beige in Design
``css
/* Neutral palette */
:root {
--beige-light: #FFFFF0;
--beige: #F5F5DC;
--beige-dark: #D2B48C;
}
/* Warm background */
.warm-bg {
background-color: #F5F5DC;
color: #4A4A4A;
}
`
Beige Color Palettes
| Theme | Background | Text | Accent |
|---|---|---|---|
| Minimal | #F5F5DC | #333333 | #8B4513 |
| Elegant | #FAF0E6 | #2C2C2C | #B8860B |
| Natural | #F5F5DC | #556B2F | #8B0000 |
Beige is perfect for backgrounds in elegant, minimal, and natural design aesthetics.Beige in Every Format
| Format | Value |
|---|---|
| HEX | #F5F5DC |
| RGB | rgb(245, 245, 220) |
| HSL | hsl(60, 56%, 91%) |
| CMYK | cmyk(0%, 0%, 10%, 4%) |
| Nearest Tailwind | orange-100 (#FFEDD5) |
About This Colour
Beige is #F5F5DC, a very light yellow-grey. It is a background colour by nature — at 1.06:1 against white it is nearly invisible as an accent.
Will It Pass Contrast?
| Combination | Ratio | WCAG |
|---|---|---|
| Beige text on white | 1.11:1 | fails |
| Beige text on black | 18.98:1 | AAA |
| White text on beige | 1.11:1 | fails |
WCAG AA needs 4.5:1 for body text and 3:1 for text above 18pt or 14pt bold. Beige passes on black, so reserve it for dark backgrounds.Building a Palette Around It
| Role | Colour |
|---|---|
| Lighter (+20%) | #ffffff |
| Base | #F5F5DC |
| Darker (−20%) | #dede8c |
| Complementary | #dbdbf5 |
| Triadic | #dbf5f5, #f5dbf5 |
Tints (toward white): #f8f8e5, #fafaee, #fdfdf6Shades (toward black): #b8b8a5, #7b7b6e, #3d3d37
Using It
`css
:root {
--beige: #f5f5dc;
--beige-light: #ffffff;
--beige-dark: #dede8c;
}
.badge {
background: var(--beige);
color: #fff;
}
`
Define the colour once as a custom property rather than repeating the hex. When the brand
changes — and it will — you edit one line instead of grepping a stylesheet.
A Full Ramp From This Colour
Design systems settle on a 50–900 scale because it covers backgrounds, borders, text and
states without anyone reaching outside the palette. Mixing toward white and black rather
than adjusting HSL lightness keeps more of the hue's character:
| Step | Colour | Contrast on white | Safe for |
|---|---|---|---|
| 50 | #F5F9FF | 1.06:1 | backgrounds and fills |
| 100 | #EBF3FE | 1.12:1 | backgrounds and fills |
| 200 | #CEE0FD | 1.34:1 | backgrounds and fills |
| 300 | #B1CDFB | 1.62:1 | backgrounds and fills |
| 400 | #76A8F9 | 2.40:1 | backgrounds and fills |
| 500 | #3B82F6 | 3.68:1 | large text, borders |
| 600 | #326FD1 | 4.85:1 | body text on white |
| 700 | #295BAC | 6.59:1 | body text on white |
| 800 | #204887 | 8.98:1 | body text on white |
| 900 | #183462 | 12.31:1 | body text on white |
The contrast column is the one that decides usage. Steps below 3:1 cannot carry text at
any size and belong in fills and dividers; steps at 4.5:1 and above are safe for body copy.Adjusting It
Base colour in HSL is hsl(217, 91%, 60%). Two useful moves:
`css
/* +10% lightness, same hue */
--lighter: #6da2f8;
/* −10% lightness */
--darker: #0b64f4;
``
Raising lightness also drops perceived saturation, so a lightened colour reads greyer than its numbers suggest. Adding 5–10% saturation alongside every 20% of lightness keeps the ramp looking like one hue rather than a fade to grey.