THE COLOR LIBRARY / Neutral
Beige color codes.
The CSS beige color code is #F5F5DC. Its RGB value is rgb(245, 245, 220) and its HSL value is hsl(60, 55.56%, 91.18%). Start with the exact reference, then choose a shade for the job.
A color name describes a family in everyday language. This page uses the standardized CSS keyword as its reference; your brand’s beige may be different.
Explore the shades ↓COPY. PASTE. MAKE IT YOURS.
Beige in HEX, RGB, and HSL
#F5F5DCrgb(245, 245, 220)hsl(60, 55.56%, 91.18%)HEX and RGB encode the same sRGB reference. HSL is calculated from it and rounded to two decimals for display. These are screen color values, not a CMYK print specification.
ONE COLOR. DIFFERENT ROLES.
Explore beige tints and shades
Select a swatch to see its codes and compare text contrast.
Make the next step clear.
A label, a surface, and room to breathe.
Selected: ReferenceSelected color
Reference · #F5F5DC
rgb(245, 245, 220)hsl(60, 55.56%, 91.18%)The specimen picks whichever of black or white has higher contrast. It demonstrates a pair, not a complete accessible component.
Illustrative scale: tints mix the reference with white, shades with black, by the stated percentage in encoded sRGB channels. This is not a perceptually uniform scale. Black tints and white shades remain useful; mixing black with black or white with white repeats the reference.
Text contrast on beige
The table follows your selected swatch, currently #F5F5DC. Decisions use the full calculated ratio; displayed ratios are rounded.
| Text color | Ratio | AA ordinary text | AA large text |
|---|---|---|---|
| Black #000000 | 18.98:1 | Pass · 4.5:1 | Pass · 3:1 |
| White #FFFFFF | 1.11:1 | Fail · 4.5:1 | Fail · 3:1 |
Large text is at least 18pt, or 14pt bold. These numeric checks apply to opaque, solid color pairs. Other criteria, states, backgrounds, and exceptions need review. Read W3C’s contrast guidance.
Beige is a defined CSS value, but cream, ivory, and beige are not interchangeable codes. Preserve the exact background token across design and implementation.
Check a custom color pair ↗IN A REAL INTERFACE
How to use beige in product design
Give it one clear role
Beige can replace a stark white canvas with a warmer neutral. Check product imagery and data colors against it because a warm background changes the surrounding visual relationship.
A UI example to try
Use beige for a reading view with dark body text and a visibly distinct link treatment. Keep form fields identifiable without making the entire page a collection of heavy outlines.
Work through a real screen
Use beige as the canvas for a content-heavy screen and compare cards, dividers, links, and form fields on top of it. A warm surface can fit an editorial identity, but low-contrast borders or secondary text may disappear against it. Test the real content instead of approving the palette on an empty page.
Compare nearby colors by purpose
Compare beige with white for clearer surface separation and brown for a related foreground family. Keep the actual contrast calculation in the decision; a warm pairing is not automatically a readable pairing.
- Choose the role. Decide whether beige is a surface, foreground, accent, or status. Name the semantic token after that purpose.
- Test the actual pair. Compare its foreground and background at the intended size. Test hover, selected, focus, and supported themes independently.
- Document the decision. Keep the approved code, usage rule, and contrasting companion together. Preserve labels and non-color cues when communicating a state.
Copy a beige CSS palette
These numeric names are illustrative palette tokens, not a standard scale. Connect approved values to semantic tokens such as --surface-highlight or --text-primary after testing their pairs.
:root {
--beige-100: #FDFDF8;
--beige-300: #F9F9EA;
--beige-500: #F5F5DC;
--beige-700: #B8B8A5;
--beige-900: #7B7B6E;
}Common questions about beige
What is the HEX code for beige?
The CSS named color beige is #F5F5DC. Use that exact value when you want the standardized reference; use your own documented token when you mean a particular brand shade.
Is beige accessible?
A color by itself cannot pass or fail accessibility. The foreground/background pair, content size, interaction state, and meaning all matter. Use the table above for the selected solid-color pair, then review the complete interface.