#5C330C#5C330C
#5C330C is a dark, moderate orange. Relative luminance 0.047; OKLCH L 36.6% C 0.078 H 59.0°. Best body text is #FFFFFF at 10.86:1 contrast (WCAG AA passes).
Color values
| HEX | #5C330C |
|---|---|
| RGB | rgb(92, 51, 12) |
| HSL | hsl(29, 77%, 20%) |
| HSV | hsv(29, 87%, 36%) |
| CMYK | cmyk(0%, 44.6%, 87%, 63.9%) |
| CIE-LAB | lab(25.77, 15.24, 30.84) |
| CIE-LCH | lch(25.77, 34.40, 63.69°) |
| OKLab | oklab(36.57% 0.0399 0.0665) |
| OKLCH | oklch(36.57% 0.078 59) |
| XYZ | xyz(5.6643, 4.6701, 0.9509) |
| Luminance | 0.0467 (WCAG relative) |
| Temperature | warm |
| Family | orange |
Closest named colors
Brown (survey)
#653700
ΔE00 3.52
Chocolate
#7B3F00
ΔE00 7.86
Chestnut
#742802
ΔE00 8.90
Chocolate (survey)
#3D1C02
ΔE00 9.21
Mud Brown
#60460F
ΔE00 9.38
Milk Chocolate
#7F4E1E
ΔE00 9.84
Perceptual scales
Shades
Tints
Tones
OKLCH scale
Color harmonies
complementary
#5C330C #0C355C
analogous
#5C0C0D #5C330C #5C5B0C
triadic
#5C330C #0C5C33 #330C5C
tetradic
#5C330C #0D5C0C #0C355C #5B0C5C
square
#5C330C #0D5C0C #0C355C #5B0C5C
split-complementary
#5C330C #0C5C5B #0C0D5C
monochromatic
#1B0F04 #261505 #5C330C #925113 #C86F1A
Accessibility & contrast
On white
10.86
#5C330C on #FFFFFF
AA ✓AA large ✓AAA ✓
On black
1.93
#5C330C on #000000
AA ✗AA large ✗AAA ✗
Best text color
#FFFFFF on #5C330C
10.86:1 — WCAG AA (normal text) passes
Contrast matrix
| fg \ bg | ##5C330C | #FFFFFF | #000000 | ##FFFFFF |
|---|---|---|---|---|
| ##5C330C | 1.00 | 10.86 | 1.93 | 10.86 |
| #FFFFFF | 10.86 | 1.00 | 21.00 | 1.00 |
| #000000 | 1.93 | 21.00 | 1.00 | 21.00 |
| ##FFFFFF | 10.86 | 1.00 | 21.00 | 1.00 |
Color blindness preview
Protanopia (red-blind)
#3F3706
Deuteranopia (green-blind)
#49410C
Tritanopia (blue-blind)
#652A2B
Achromatopsia (no color)
#3D3D3D
Design tokens & code
CSS
--color: #5c330c; /* rgb */ color: rgb(92, 51, 12); /* oklch */ color: oklch(36.6% 0.078 59.0);
Tailwind
colors: {
custom: {
50: '#8f6b4e',
500: '#5c330c',
950: '#000000',
},
}SCSS
$custom: #5c330c; $custom-light: #8f6b4e; $custom-dark: #000000;
JSON
{
"hex": "#5c330c",
"rgb": {
"r": 92,
"g": 51,
"b": 12
},
"hsl": {
"h": 29.25,
"s": 76.923,
"l": 20.392
},
"oklch": {
"l": 0.36574,
"c": 0.07756,
"h": 59
},
"luminance": 0.0467
}Semantic roles & 50–950 ramp
primary
#5C330C
secondary
#2D6397
accent
#96F334
background
#F9F6F4
surface
#F1EBE7
border
#CBC6C3
text
#0D0602
muted
#7E7A78