Beige color: hex codes, shades and palettes

Palettes built around beige. Click any swatch to copy its hex code.

Beige is #F5F5DC, pale yellow. Below are its shades with hex codes, the values in every common format, and beige color palettes to copy.

Beige hex, RGB, HSL and OKLCH

#F5F5DC

HEX: #F5F5DC
RGB: rgb(245, 245, 220)
HSL: hsl(60, 56%, 91%)
OKLCH: oklch(96.4% 0.033 107.0)
On white: 1.11:1
On black: 18.98:1

Shades of beige

9 steps from one base color, generated in OKLCH so each step is an equal perceived step rather than an equal numeric one. Click a swatch to copy it.

Beige color values

#F5F5DCrgb(245, 245, 220)

Color spaces of #f5f5dc
RGB	245	245	220
HSL	60°	56%	91%
HSV	60°	10%	96%
CMYK	0.00	0.00	0.10	0.04
XYZ	83.2254	89.8851	80.6614
Yxy	89.8851	0.3280	0.3542
CIE-Lab	95.9491	-4.1929	12.0490
Hunter Lab	94.8078	-9.2204	15.9221
OKLCH	96.4%	0.033	107.0°

#F5F5DC is 245 red, 245 green and 220 blue. No single channel dominates it. The nearest of the 216 web safe colors is #FFFFCC.

CIE-Lab, XYZ and Yxy are measured against D65, the white point sRGB itself is defined against. Hunter Lab uses the original illuminant C constants, which is what paint and plastics specifications quote, so the two Lab rows are not directly comparable. CMYK is the plain arithmetic conversion: real ink values depend on the press, the paper and the profile.

Base numbers
Base	Red	Green	Blue
Binary	11110101	11110101	11011100
Octal	365	365	334
Decimal	245	245	220
Hex	F5	F5	DC

#f5f5dc mixed with black

Ten even steps of the classic shade ramp, worked out in RGB, which is how the term has always been defined and how other references list it. The OKLCH scale further down this page answers a different question: it steps by equal perceived amounts, so its values are not the same.

#F5F5DC
#DCDCC6
#C4C4B0
#ABAB9A
#939384
#7A7A6E
#626258
#494942
#30302B
#181815
#000000

#f5f5dc mixed with white

The tint ramp, by the same rule in the other direction.

#F5F5DC
#F6F6DF
#F7F7E3
#F8F8E6
#F9F9EA
#FAFAED
#FBFBF1
#FCFCF4
#FDFDF8
#FEFEFB
#FFFFFF

Channel shares

Red34.5%
Green34.5%
Blue31.0%

Color schemes

Turned in OKLCH rather than HSL, so every member keeps the lightness and chroma of the original instead of one of them arriving washed out.

Complementary

#F5F5DC
#F2F1FF

Triadic

#F5F5DC
#E4F7FF
#FFEDF6

Analogous

#F5F5DC
#E9F9E3
#FFF1DD

Monochromatic

#83836C
#A8A790
#CECEB5
#F5F5DC
#FAFAE1
#FAFAE1
#FAFAE1

#f5f5dc on black and on white

The quick brown fox jumps over the lazy dog. 18.98:1

The quick brown fox jumps over the lazy dog. 1.11:1

Body text needs 4.5:1 to meet AA and large text needs 3:1, so a ratio tells you which of the two backgrounds this color can be read on, and at what size.

CSS for #f5f5dc

color: #f5f5dc;
background-color: #f5f5dc;
border: 3px solid #f5f5dc;
box-shadow: 1px 1px 3px 2px #f5f5dc;
text-shadow: 4px 4px 2px rgba(245, 245, 220, 0.8);

/* Perceptually even, and what a modern stylesheet wants */
color: oklch(96.4% 0.033 107.0);

The OKLCH form is the same color stated so that lightening or darkening it moves by an amount the eye agrees with. Every current browser understands it.

Contrast and readability

Beige on white measures 1.11:1 and on black 18.98:1. WCAG AA asks for 4.5:1 on normal text and 3:1 on large text and UI components, so the higher of those two decides which background it belongs on. In the scale above, 500 is the first to clear 4.5:1 on white, at 5.26:1.

The contrast checker reports every level for a given pair and suggests the nearest passing shade on the same hue. The color picker builds this same scale from any color you paste in.

Related colors: ivory, cream. See every shade on the colors index.

#EDD8D3

#EBDBD0

#E6D6C5

#D5D1C4

#F8F0DC

#F0E6CE

#E3DDC9

#DDD2B9

#E5D1BA

#E6DACC

#F5E0CB

#F6E9DC

#F5E2CE

#E9E6DA

#D4D5BC

#E0E8DD

#EDD9CA

#DBD0C5

#E6DECC

#E0DDD1

#DBD5C1

#E0DED2

#E8E9CD

#ECF3DB

#EFE8DF

#F7F1E5

#ECE7D2

#E9EBD5

#F3ECDF

#F1E4CF

#E7DDCC

#E2D5C0

#F6D6CB

#EFD6C6

#FEEDD7

#E0DBD1

#DCD5C0

#E4DFCA

#EEE7D6

#F5F1E4

#DFD4C5

#E3DCD1

#ECE4D4

#F1ECDF

#F4E9DD

#EAE1D1

#E2D9C6

#D6D2BE

#E9DACB

#EBDCC6

#E4DBC1

#F1F1E1

#FFE8E7

#FDE0D6

#EBE0D7

#EEE7DC

#DECDCB

#E6D8D3

#E6D8CA

#E2DAC0

#E3CEB7

#E3D9CD

#EDE2D4

#F2ECE3

#FFEDE8

#F7E5D5

#F5EAD2

#E6E9D4

#E0CFBE

#E4DAD1

#F1E3D5

#FAEDE1

#F5F1E3

#F3E7CE

#E9DFC9

#DED7C8

#F8DFDE

#E0D1CC

#FAE2D2

#F4EBE2

#F1E9DE

#E9E1D2

#DED9CA

#D7D1BC

#F4F2DF

#EAEAD5

#DEE3D3

#D1DDCA

#DAD3C2

#E1DDCD

#EEE5CE

#F5EFD9

#FFE7DC

#DFCFC5

#F7E9DA

#F7EAD4