#85562A#85562A
#85562A is a mid, moderate orange. Relative luminance 0.118; OKLCH L 49.6% C 0.086 H 61.7°. Best body text is #FFFFFF at 6.25:1 contrast (WCAG AA passes).
Color values
| HEX | #85562A |
|---|---|
| RGB | rgb(133, 86, 42) |
| HSL | hsl(29, 52%, 34%) |
| HSV | hsv(29, 68%, 52%) |
| CMYK | cmyk(0%, 35.3%, 68.4%, 47.8%) |
| CIE-LAB | lab(40.91, 15.04, 32.98) |
| CIE-LCH | lch(40.91, 36.25, 65.48°) |
| OKLab | oklab(49.62% 0.0408 0.0757) |
| OKLCH | oklch(49.62% 0.086 61.7) |
| XYZ | xyz(13.4195, 11.8105, 3.7629) |
| Luminance | 0.1181 (WCAG relative) |
| Temperature | warm |
| Family | orange |
Closest named colors
Milk Chocolate
#7F4E1E
ΔE00 2.83
Medium Brown
#7F5112
ΔE00 4.59
Sepia
#985E2B
ΔE00 4.87
Cocoa
#875F42
ΔE00 5.25
Warm Brown
#964E02
ΔE00 6.69
Saddlebrown
#8B4513
ΔE00 6.85
Perceptual scales
Shades
Tints
Tones
OKLCH scale
Color harmonies
complementary
#85562A #2A5985
analogous
#852A2C #85562A #85842A
triadic
#85562A #2A8556 #562A85
tetradic
#85562A #2C852A #2A5985 #842A85
square
#85562A #2C852A #2A5985 #842A85
split-complementary
#85562A #2A8584 #2A2C85
monochromatic
#281A0D #56381B #85562A #B47439 #CC935D
Accessibility & contrast
On white
6.25
#85562A on #FFFFFF
AA ✓AA large ✓AAA ✗
On black
3.36
#85562A on #000000
AA ✗AA large ✓AAA ✗
Best text color
#FFFFFF on #85562A
6.25:1 — WCAG AA (normal text) passes
Contrast matrix
| fg \ bg | ##85562A | #FFFFFF | #000000 | ##FFFFFF |
|---|---|---|---|---|
| ##85562A | 1.00 | 6.25 | 3.36 | 6.25 |
| #FFFFFF | 6.25 | 1.00 | 21.00 | 1.00 |
| #000000 | 3.36 | 21.00 | 1.00 | 21.00 |
| ##FFFFFF | 6.25 | 1.00 | 21.00 | 1.00 |
Color blindness preview
Protanopia (red-blind)
#655A26
Deuteranopia (green-blind)
#70652B
Tritanopia (blue-blind)
#914C4C
Achromatopsia (no color)
#606060
Design tokens & code
CSS
--color: #85562a; /* rgb */ color: rgb(133, 86, 42); /* oklch */ color: oklch(49.6% 0.086 61.7);
Tailwind
colors: {
custom: {
50: '#ac8565',
500: '#85562a',
950: '#000000',
},
}SCSS
$custom: #85562a; $custom-light: #ac8565; $custom-dark: #000000;
JSON
{
"hex": "#85562a",
"rgb": {
"r": 133,
"g": 86,
"b": 42
},
"hsl": {
"h": 29.011,
"s": 52,
"l": 34.314
},
"oklch": {
"l": 0.49619,
"c": 0.08601,
"h": 61.7
},
"luminance": 0.11809
}Semantic roles & 50–950 ramp
primary
#85562A
secondary
#5987B2
accent
#96DB4C
background
#FBF8F6
surface
#F6EFEB
border
#D0CAC6
text
#110B06
muted
#807C7A