#FFE0B2 colour

#FFE0B2 is a light orange close to CSS navajowhite. RGB 255, 224, 178, HSL 36, 100%, 85%. Black text passes AAA (16.56:1), white fails (1.27:1).

#FFE0B2

Nearest CSS name: navajowhite #ffdead (not an exact match)
Described as: a light orange
Red, green, blue: 255, 224, 178
Material 2014: Orange 100
Web safe: No
Luminance: 0.7779 (WCAG relative luminance, 0 is black, 1 is white)

Colour codes

HEX	`#ffe0b2`
RGB	`rgb(255, 224, 178)`
RGB (percent)	`rgb(100% 87.8% 69.8%)`
HSL	`hsl(35.8, 100%, 84.9%)`
HSV / HSB	`hsv(35.8, 30.2%, 100%)`
HWB	`hwb(35.8 69.8% 0%)`
CMYK (naive)	`cmyk(0%, 12%, 30%, 0%)`
CIELAB (D50)	`lab(90.96% 6.22 26.74)`
OKLCH	`oklch(92.13% 0.0687 77.49)`
Decimal	`16769202`

CMYK here is the plain formula with no colour profile, so treat it as a starting point; a printer's profile gives the real ink values. CIELAB uses a D50 white point, as CSS lab() does. HSV is not a CSS function, so it is shown for design apps only.

Contrast with white and black text

White text, 1.27:1The quick brown fox jumps over the lazy dog.

Black text, 16.56:1The quick brown fox jumps over the lazy dog.

Text	Ratio	AA normal (4.5)	AA large (3)	AAA normal (7)	AAA large (4.5)
White	1.27:1	Fail	Fail	Fail	Fail
Black	16.56:1	Pass	Pass	Pass	Pass

Black text is the better choice on #FFE0B2 (16.56:1). Ratios use the WCAG 2.2 formula; large text means at least 24px, or 18.66px bold. Check another pair.

Tints and shades

Mixed with white, then with black, in ten even steps (straight sRGB mixing, as most design tools do).

9%#ffe3b9 18%#ffe6c0 27%#ffe8c7 36%#ffebce 45%#ffeed5 55%#fff1dc 64%#fff4e3 73%#fff7ea 82%#fff9f1 91%#fffcf8

9%#e8cca2 18%#d1b792 27%#b9a381 36%#a28f71 45%#8b7a61 55%#746651 64%#5d5141 73%#463d31 82%#2e2920 91%#171410

Colour harmonies

Hue turned around the HSL colour wheel, saturation and lightness kept.

Complementary

The hue opposite on the colour wheel (180°).

#ffe0b2 #b2d1ff

Analogous

Neighbours 30° either side.

#ffbab2 #ffe0b2 #f8ffb2

Triadic

Three hues 120° apart.

#ffe0b2 #b2ffe0 #e0b2ff

Split complementary

The two hues either side of the complement (150° and 210°).

#ffe0b2 #b2f8ff #bab2ff

Tetradic (square)

Four hues 90° apart.

#ffe0b2 #b2ffba #b2d1ff #ffb2f8

How it looks with colour blindness

Normal vision#ffe0b2 Protanopia#ede0af Deuteranopia#f4e7b3 Tritanopia#ffd7d4 Achromatopsia#e4e4e4

Simulated with the Machado, Oliveira and Fernandes (2009) matrices at full severity, applied in linear RGB; achromatopsia shows the colour's luminance as grey. Milder forms (protanomaly, deuteranomaly) are far more common and shift colours less. Never use colour as the only way to carry meaning.

Material Orange palette

50#fff3e0 100#ffe0b2 200#ffcc80 300#ffb74d 400#ffa726 500#ff9800 600#fb8c00 700#f57c00 800#ef6c00 900#e65100 A100#ffd180 A200#ffab40 A400#ff9100 A700#ff6d00

CSS

Text colour	`color: #ffe0b2;`
Background	`background-color: #ffe0b2;`
Border	`border: 1px solid #ffe0b2;`
Half transparent	`background-color: rgb(255 224 178 / 50%);`
Custom property	`--colour-main: #ffe0b2;`
Gradient to a darker shade	`background: linear-gradient(135deg, #ffe0b2, #99866b);`
Gradient from a lighter tint	`background: linear-gradient(180deg, #ffecd1, #ffe0b2);`
Text on this colour	`background-color: #ffe0b2; color: #000;`

Similar named colours

Distance is measured in OKLab, scaled by 100; under about 2 is hard to tell apart side by side.

Convert #FFE0B2 to other formats · Build a palette from it · Check contrast · All named colours

Colour names from CSS Color Module Level 4. Palette values from the Tailwind CSS v3 default palette (MIT licence) and the Material Design 2014 colour palette as published in Material Design Lite (Apache License 2.0). All other values are calculated from the hex code.