#ECB89A#ECB89A
#ECB89A is a very light, moderate orange. Relative luminance 0.544; OKLCH L 82.2% C 0.073 H 51.4°. Best body text is #000000 at 11.89:1 contrast (WCAG AA passes).
Color values
| HEX | #ECB89A |
|---|---|
| RGB | rgb(236, 184, 154) |
| HSL | hsl(22, 68%, 76%) |
| HSV | hsv(22, 35%, 93%) |
| CMYK | cmyk(0%, 22%, 34.7%, 7.5%) |
| CIE-LAB | lab(78.72, 14.75, 22.45) |
| CIE-LCH | lch(78.72, 26.86, 56.70°) |
| OKLab | oklab(82.21% 0.0455 0.0569) |
| OKLCH | oklch(82.21% 0.073 51.4) |
| XYZ | xyz(57.5669, 54.4500, 38.0433) |
| Luminance | 0.5445 (WCAG relative) |
| Temperature | warm |
| Family | orange |
Closest named colors
Apricot
#FBCEB1
ΔE00 5.30
Peach (survey)
#FFB07C
ΔE00 6.90
Pale Salmon
#FFB19A
ΔE00 6.99
Pinkish Tan
#D99B82
ΔE00 7.91
Light Salmon
#FEA993
ΔE00 8.49
Burlywood
#DEB887
ΔE00 8.65
Perceptual scales
Shades
Tints
Tones
OKLCH scale
Color harmonies
complementary
#ECB89A #9ACEEC
analogous
#EC9AA5 #ECB89A #ECE19A
triadic
#ECB89A #9AECB8 #B89AEC
tetradic
#ECB89A #A5EC9A #9ACEEC #E19AEC
square
#ECB89A #A5EC9A #9ACEEC #E19AEC
split-complementary
#ECB89A #9AECE1 #9AA5EC
monochromatic
#D97033 #E29466 #ECB89A #F6DCCE #FAEDE5
Accessibility & contrast
On white
1.77
#ECB89A on #FFFFFF
AA ✗AA large ✗AAA ✗
On black
11.89
#ECB89A on #000000
AA ✓AA large ✓AAA ✓
Best text color
#000000 on #ECB89A
11.89:1 — WCAG AA (normal text) passes
Contrast matrix
| fg \ bg | ##ECB89A | #FFFFFF | #000000 | ##000000 |
|---|---|---|---|---|
| ##ECB89A | 1.00 | 1.77 | 11.89 | 11.89 |
| #FFFFFF | 1.77 | 1.00 | 21.00 | 21.00 |
| #000000 | 11.89 | 21.00 | 1.00 | 1.00 |
| ##000000 | 11.89 | 21.00 | 1.00 | 1.00 |
Color blindness preview
Protanopia (red-blind)
#C6BC98
Deuteranopia (green-blind)
#D2C79A
Tritanopia (blue-blind)
#FAAFB0
Achromatopsia (no color)
#C3C3C3
Design tokens & code
CSS
--color: #ecb89a; /* rgb */ color: rgb(236, 184, 154); /* oklch */ color: oklch(82.2% 0.073 51.4);
Tailwind
colors: {
custom: {
50: '#f3cdb8',
500: '#ecb89a',
950: '#000000',
},
}SCSS
$custom: #ecb89a; $custom-light: #f3cdb8; $custom-dark: #000000;
JSON
{
"hex": "#ecb89a",
"rgb": {
"r": 236,
"g": 184,
"b": 154
},
"hsl": {
"h": 21.951,
"s": 68.333,
"l": 76.471
},
"oklch": {
"l": 0.82212,
"c": 0.07291,
"h": 51.4
},
"luminance": 0.54447
}Semantic roles & 50–950 ramp
primary
#ECB89A
secondary
#62A3C8
accent
#8CD015
background
#FFFEFD
surface
#FEFAF8
border
#D6D3D1
text
#171311
muted
#858381