#86A53C#86A53C
#86A53C is a light, vivid yellow-green. Relative luminance 0.323; OKLCH L 67.7% C 0.136 H 124.0°. Best body text is #000000 at 7.46:1 contrast (WCAG AA passes).
Color values
| HEX | #86A53C |
|---|---|
| RGB | rgb(134, 165, 60) |
| HSL | hsl(78, 47%, 44%) |
| HSV | hsv(78, 64%, 65%) |
| CMYK | cmyk(18.8%, 0%, 63.6%, 35.3%) |
| CIE-LAB | lab(63.59, -26.60, 49.34) |
| CIE-LCH | lch(63.59, 56.06, 118.33°) |
| OKLab | oklab(67.7% -0.0763 0.1131) |
| OKLCH | oklch(67.7% 0.136 124) |
| XYZ | xyz(24.1024, 32.3047, 9.2397) |
| Luminance | 0.3231 (WCAG relative) |
| Temperature | warm |
| Family | yellow-green |
Closest named colors
Avocado Green
#87A922
ΔE00 3.24
Avocado (survey)
#90B134
ΔE00 4.09
Leaf
#71AA34
ΔE00 4.47
Icky Green
#8FAE22
ΔE00 4.56
Pea Green
#8EAB12
ΔE00 5.00
Vomit Green
#89A203
ΔE00 5.05
Perceptual scales
Shades
Tints
Tones
OKLCH scale
Color harmonies
complementary
#86A53C #5B3CA5
analogous
#A5903C #86A53C #52A53C
triadic
#86A53C #3C86A5 #A53C86
tetradic
#86A53C #3CA590 #5B3CA5 #A53C52
square
#86A53C #3CA590 #5B3CA5 #A53C52
split-complementary
#86A53C #3C52A5 #903CA5
monochromatic
#3D4B1B #62782C #86A53C #A4C35B #BDD488
Accessibility & contrast
On white
2.81
#86A53C on #FFFFFF
AA ✗AA large ✗AAA ✗
On black
7.46
#86A53C on #000000
AA ✓AA large ✓AAA ✓
Best text color
#000000 on #86A53C
7.46:1 — WCAG AA (normal text) passes
Contrast matrix
| fg \ bg | ##86A53C | #FFFFFF | #000000 | ##000000 |
|---|---|---|---|---|
| ##86A53C | 1.00 | 2.81 | 7.46 | 7.46 |
| #FFFFFF | 2.81 | 1.00 | 21.00 | 21.00 |
| #000000 | 7.46 | 21.00 | 1.00 | 1.00 |
| ##000000 | 7.46 | 21.00 | 1.00 | 1.00 |
Color blindness preview
Protanopia (red-blind)
#AE9B2F
Deuteranopia (green-blind)
#AA9A44
Tritanopia (blue-blind)
#8C9D8F
Achromatopsia (no color)
#9A9A9A
Design tokens & code
CSS
--color: #86a53c; /* rgb */ color: rgb(134, 165, 60); /* oklch */ color: oklch(67.7% 0.136 124.0);
Tailwind
colors: {
custom: {
50: '#acbf77',
500: '#86a53c',
950: '#000000',
},
}SCSS
$custom: #86a53c; $custom-light: #acbf77; $custom-dark: #000000;
JSON
{
"hex": "#86a53c",
"rgb": {
"r": 134,
"g": 165,
"b": 60
},
"hsl": {
"h": 77.714,
"s": 46.667,
"l": 44.118
},
"oklch": {
"l": 0.67704,
"c": 0.13646,
"h": 124
},
"luminance": 0.32305
}Semantic roles & 50–950 ramp
primary
#86A53C
secondary
#917FBE
accent
#51D679
background
#FAFBF7
surface
#F4F7ED
border
#CED0C8
text
#101209
muted
#7F817B