#56513E#56513E
#56513E is a dark, muted yellow. Relative luminance 0.082; OKLCH L 43.4% C 0.030 H 95.1°. Best body text is #FFFFFF at 7.95:1 contrast (WCAG AA passes).
Color values
| HEX | #56513E |
|---|---|
| RGB | rgb(86, 81, 62) |
| HSL | hsl(48, 16%, 29%) |
| HSV | hsv(48, 28%, 34%) |
| CMYK | cmyk(0%, 5.8%, 27.9%, 66.3%) |
| CIE-LAB | lab(34.42, -1.45, 11.94) |
| CIE-LCH | lch(34.42, 12.03, 96.91°) |
| OKLab | oklab(43.42% -0.0027 0.0303) |
| OKLCH | oklch(43.42% 0.03 95.1) |
| XYZ | xyz(7.6497, 8.2113, 5.7385) |
| Luminance | 0.0821 (WCAG relative) |
| Temperature | warm |
| Family | yellow |
Closest named colors
Walnut
#5C4A3D
ΔE00 9.19
Umber
#635147
ΔE00 10.12
Greyish Brown
#7A6A4F
ΔE00 11.27
Espresso
#4B382A
ΔE00 12.09
Charcoal Grey
#3C4142
ΔE00 12.20
Charcoal (survey)
#343837
ΔE00 12.83
Perceptual scales
Shades
Tints
Tones
OKLCH scale
Color harmonies
complementary
#56513E #3E4356
analogous
#56453E #56513E #4F563E
triadic
#56513E #3E5651 #513E56
tetradic
#56513E #3E5645 #3E4356 #563E4F
square
#56513E #3E5645 #3E4356 #563E4F
split-complementary
#56513E #3E4F56 #453E56
monochromatic
#12110D #323024 #56513E #7A7258 #9B9374
Accessibility & contrast
On white
7.95
#56513E on #FFFFFF
AA ✓AA large ✓AAA ✓
On black
2.64
#56513E on #000000
AA ✗AA large ✗AAA ✗
Best text color
#FFFFFF on #56513E
7.95:1 — WCAG AA (normal text) passes
Contrast matrix
| fg \ bg | ##56513E | #FFFFFF | #000000 | ##FFFFFF |
|---|---|---|---|---|
| ##56513E | 1.00 | 7.95 | 2.64 | 7.95 |
| #FFFFFF | 7.95 | 1.00 | 21.00 | 1.00 |
| #000000 | 2.64 | 21.00 | 1.00 | 21.00 |
| ##FFFFFF | 7.95 | 1.00 | 21.00 | 1.00 |
Color blindness preview
Protanopia (red-blind)
#55503D
Deuteranopia (green-blind)
#56523F
Tritanopia (blue-blind)
#5A4E4C
Achromatopsia (no color)
#515151
Design tokens & code
CSS
--color: #56513e; /* rgb */ color: rgb(86, 81, 62); /* oklch */ color: oklch(43.4% 0.030 95.1);
Tailwind
colors: {
custom: {
50: '#868173',
500: '#56513e',
950: '#000000',
},
}SCSS
$custom: #56513e; $custom-light: #868173; $custom-dark: #000000;
JSON
{
"hex": "#56513e",
"rgb": {
"r": 86,
"g": 81,
"b": 62
},
"hsl": {
"h": 47.5,
"s": 16.216,
"l": 29.02
},
"oklch": {
"l": 0.43415,
"c": 0.03043,
"h": 95.1
},
"luminance": 0.08211
}Semantic roles & 50–950 ramp
primary
#56513E
secondary
#6A7086
accent
#7EB96F
background
#F8F7F6
surface
#EFEEEC
border
#CAC9C7
text
#0B0A08
muted
#7C7C7B