#56A230#56A230
#56A230 is a light, vivid green. Relative luminance 0.280; OKLCH L 64.0% C 0.166 H 137.1°. Best body text is #000000 at 6.61:1 contrast (WCAG AA passes).
Color values
| HEX | #56A230 |
|---|---|
| RGB | rgb(86, 162, 48) |
| HSL | hsl(100, 54%, 41%) |
| HSV | hsv(100, 70%, 64%) |
| CMYK | cmyk(46.9%, 0%, 70.4%, 36.5%) |
| CIE-LAB | lab(59.92, -43.92, 49.66) |
| CIE-LCH | lch(59.92, 66.29, 131.49°) |
| OKLab | oklab(63.98% -0.1217 0.113) |
| OKLCH | oklch(63.98% 0.166 137.1) |
| XYZ | xyz(17.2911, 28.0314, 7.2952) |
| Luminance | 0.2803 (WCAG relative) |
| Temperature | warm |
| Family | green |
Closest named colors
Lawn Green
#4DA409
ΔE00 2.97
Grass
#5CAC2D
ΔE00 3.22
Mid Green
#50A747
ΔE00 3.62
Grassy Green
#419C03
ΔE00 3.69
Grass Green
#3F9B0B
ΔE00 3.75
Leaf Green
#5CA904
ΔE00 4.35
Perceptual scales
Shades
Tints
Tones
OKLCH scale
Color harmonies
complementary
#56A230 #7C30A2
analogous
#8FA230 #56A230 #30A243
triadic
#56A230 #3056A2 #A23056
tetradic
#56A230 #308FA2 #7C30A2 #A24330
square
#56A230 #308FA2 #7C30A2 #A24330
split-complementary
#56A230 #4330A2 #A2308F
monochromatic
#244414 #3D7322 #56A230 #72C847 #96D676
Accessibility & contrast
On white
3.18
#56A230 on #FFFFFF
AA ✗AA large ✓AAA ✗
On black
6.61
#56A230 on #000000
AA ✓AA large ✓AAA ✗
Best text color
#000000 on #56A230
6.61:1 — WCAG AA (normal text) passes
Contrast matrix
| fg \ bg | ##56A230 | #FFFFFF | #000000 | ##000000 |
|---|---|---|---|---|
| ##56A230 | 1.00 | 3.18 | 6.61 | 6.61 |
| #FFFFFF | 3.18 | 1.00 | 21.00 | 21.00 |
| #000000 | 6.61 | 21.00 | 1.00 | 1.00 |
| ##000000 | 6.61 | 21.00 | 1.00 | 1.00 |
Color blindness preview
Protanopia (red-blind)
#A7941F
Deuteranopia (green-blind)
#9D8E3B
Tritanopia (blue-blind)
#529C8B
Achromatopsia (no color)
#909090
Design tokens & code
CSS
--color: #56a230; /* rgb */ color: rgb(86, 162, 48); /* oklch */ color: oklch(64.0% 0.166 137.1);
Tailwind
colors: {
custom: {
50: '#8cbe6f',
500: '#56a230',
950: '#000000',
},
}SCSS
$custom: #56a230; $custom-light: #8cbe6f; $custom-dark: #000000;
JSON
{
"hex": "#56a230",
"rgb": {
"r": 86,
"g": 162,
"b": 48
},
"hsl": {
"h": 100,
"s": 54.286,
"l": 41.176
},
"oklch": {
"l": 0.63977,
"c": 0.16601,
"h": 137.1
},
"luminance": 0.28032
}Semantic roles & 50–950 ramp
primary
#56A230
secondary
#A46FBE
accent
#4ADEAC
background
#F9FBF6
surface
#F1F7EC
border
#CBD0C7
text
#0D1208
muted
#7E817B