21 Shades of Beige with Hex Codes
Beige and its neighbors are the quiet backbone of warm, natural palettes. They pair with almost anything and keep layouts feeling soft and organic.
The beige hex code is #F5F5DC
#F5F5DC is rgb(245, 245, 220) in RGB, hsl(60, 56%, 91%) in HSL, and about cmyk(0%, 0%, 10%, 4%) in CMYK. Every other beige below has its own hex code.
#F5F5DCrgb(245, 245, 220)hsl(60, 56%, 91%)Named Beige Colors and Their Hex Codes
Ordered darkest to lightest. Names marked CSS are color keywords you can write directly in a stylesheet; the rest are common design and print names. Select any swatch for its full breakdown.
#C2B280rgb(194, 178, 128)#BEB7A4rgb(190, 183, 164)#D2B48Crgb(210, 180, 140)#DEB887rgb(222, 184, 135)#E3BC9Argb(227, 188, 154)#DFD3C3rgb(223, 211, 195)#E3DAC9rgb(227, 218, 201)#F0DC82rgb(240, 220, 130)#F5DEB3rgb(245, 222, 179)#FFDEADrgb(255, 222, 173)#FFE4C4rgb(255, 228, 196)#EDEAE0rgb(237, 234, 224)#FAEBD7rgb(250, 235, 215)#FFEBCDrgb(255, 235, 205)#FAF0E6rgb(250, 240, 230)#F5F5DCrgb(245, 245, 220)#FDF5E6rgb(253, 245, 230)#FFF5EErgb(255, 245, 238)#FFF8DCrgb(255, 248, 220)#FFFAF0rgb(255, 250, 240)#FFFFF0rgb(255, 255, 240)Beige Color Chart: Hex, RGB, HSL & CMYK
Every beige above in all four common formats. CMYK is a mathematical approximation for planning; confirm production print colors with your printer and ICC profile.
| Name | Hex | RGB | HSL | CMYK |
|---|---|---|---|---|
| Sand | #C2B280 | rgb(194, 178, 128) | hsl(45, 35%, 63%) | cmyk(0%, 8%, 34%, 24%) |
| Greige | #BEB7A4 | rgb(190, 183, 164) | hsl(44, 17%, 69%) | cmyk(0%, 4%, 14%, 25%) |
| Tan | #D2B48C | rgb(210, 180, 140) | hsl(34, 44%, 69%) | cmyk(0%, 14%, 33%, 18%) |
| BurlyWood | #DEB887 | rgb(222, 184, 135) | hsl(34, 57%, 70%) | cmyk(0%, 17%, 39%, 13%) |
| Nude | #E3BC9A | rgb(227, 188, 154) | hsl(28, 57%, 75%) | cmyk(0%, 17%, 32%, 11%) |
| Oat | #DFD3C3 | rgb(223, 211, 195) | hsl(34, 30%, 82%) | cmyk(0%, 5%, 13%, 13%) |
| Bone | #E3DAC9 | rgb(227, 218, 201) | hsl(39, 32%, 84%) | cmyk(0%, 4%, 11%, 11%) |
| Buff | #F0DC82 | rgb(240, 220, 130) | hsl(49, 79%, 73%) | cmyk(0%, 8%, 46%, 6%) |
| Wheat | #F5DEB3 | rgb(245, 222, 179) | hsl(39, 77%, 83%) | cmyk(0%, 9%, 27%, 4%) |
| NavajoWhite | #FFDEAD | rgb(255, 222, 173) | hsl(36, 100%, 84%) | cmyk(0%, 13%, 32%, 0%) |
| Bisque | #FFE4C4 | rgb(255, 228, 196) | hsl(33, 100%, 88%) | cmyk(0%, 11%, 23%, 0%) |
| Alabaster | #EDEAE0 | rgb(237, 234, 224) | hsl(46, 27%, 90%) | cmyk(0%, 1%, 5%, 7%) |
| AntiqueWhite | #FAEBD7 | rgb(250, 235, 215) | hsl(34, 78%, 91%) | cmyk(0%, 6%, 14%, 2%) |
| BlanchedAlmond | #FFEBCD | rgb(255, 235, 205) | hsl(36, 100%, 90%) | cmyk(0%, 8%, 20%, 0%) |
| Linen | #FAF0E6 | rgb(250, 240, 230) | hsl(30, 67%, 94%) | cmyk(0%, 4%, 8%, 2%) |
| Beige | #F5F5DC | rgb(245, 245, 220) | hsl(60, 56%, 91%) | cmyk(0%, 0%, 10%, 4%) |
| OldLace | #FDF5E6 | rgb(253, 245, 230) | hsl(39, 85%, 95%) | cmyk(0%, 3%, 9%, 1%) |
| SeaShell | #FFF5EE | rgb(255, 245, 238) | hsl(25, 100%, 97%) | cmyk(0%, 4%, 7%, 0%) |
| Cornsilk | #FFF8DC | rgb(255, 248, 220) | hsl(48, 100%, 93%) | cmyk(0%, 3%, 14%, 0%) |
| FloralWhite | #FFFAF0 | rgb(255, 250, 240) | hsl(40, 100%, 97%) | cmyk(0%, 2%, 6%, 0%) |
| Ivory | #FFFFF0 | rgb(255, 255, 240) | hsl(60, 100%, 97%) | cmyk(0%, 0%, 6%, 0%) |
Beige Scale from Light to Dark
A 12-step lightness scale built from the core beige hue, holding hue and saturation constant. This is the shape of a design-system color ramp. Select any swatch for the full breakdown of that color.
Need a perceptually even ramp with semantic roles and contrast evidence? Generate beige design tokens.
What Beige Communicates
Beige is what you reach for when white is too clinical. Every shade here sits above 90% lightness, which means none of them can carry text and all of them can carry a page. The difference between them is undertone: linen and ivory lean yellow, while greige leans gray and reads more contemporary.
Where beige works well
- Page and section backgrounds that need warmth without color
- Interior, wellness, and editorial brands
- Paper-like surfaces in reading interfaces
- Earth palettes alongside terracotta, sage, and brown
Colors that pair with beige
Copy the Beige Palette as CSS
Every shade on this page as CSS custom properties, ready to paste into a stylesheet.
:root {
--beige-sand: #C2B280;
--beige-greige: #BEB7A4;
--beige-tan: #D2B48C;
--beige-burlywood: #DEB887;
--beige-nude: #E3BC9A;
--beige-oat: #DFD3C3;
--beige-bone: #E3DAC9;
--beige-buff: #F0DC82;
--beige-wheat: #F5DEB3;
--beige-navajowhite: #FFDEAD;
--beige-bisque: #FFE4C4;
--beige-alabaster: #EDEAE0;
--beige-antiquewhite: #FAEBD7;
--beige-blanchedalmond: #FFEBCD;
--beige-linen: #FAF0E6;
--beige-beige: #F5F5DC;
--beige-oldlace: #FDF5E6;
--beige-seashell: #FFF5EE;
--beige-cornsilk: #FFF8DC;
--beige-floralwhite: #FFFAF0;
--beige-ivory: #FFFFF0;
}Beige Color Questions
What is the hex code for beige?
The standard beige hex code is #F5F5DC, which is rgb(245, 245, 220) in RGB and hsl(60, 56%, 91%) in HSL. There is no single "correct" beige — this page lists 21 named beige shades with their own hex codes.
How many shades of beige are there?
Displays can render millions of distinct beige values, so any count is a matter of which ones have names. This page lists 21 named shades of beige, combining the CSS color keywords with widely used beige names from design and print references, plus a generated 12-step lightness scale.
Can I use beige for text on a white background?
#F5F5DC scores 1.11:1 against white. WCAG 2.2 asks for at least 4.5:1 for normal body text and 3:1 for large text, so this shade does not pass and needs to be darkened. Check any specific pairing in the contrast checker.
What colors go well with beige?
brown, green, teal all pair well with beige. For a specific shade, open its color page to see the complementary, analogous, and triadic colors calculated from its exact hue.