#36A062#36A062
#36A062 is a light, vivid green. Relative luminance 0.268; OKLCH L 62.9% C 0.134 H 153.9°. Best body text is #000000 at 6.36:1 contrast (WCAG AA passes).
Color values
| HEX | #36A062 |
|---|---|
| RGB | rgb(54, 160, 98) |
| HSL | hsl(145, 50%, 42%) |
| HSV | hsv(145, 66%, 63%) |
| CMYK | cmyk(66.3%, 0%, 38.8%, 37.3%) |
| CIE-LAB | lab(58.79, -44.62, 23.71) |
| CIE-LCH | lch(58.79, 50.53, 152.02°) |
| OKLab | oklab(62.95% -0.1207 0.0592) |
| OKLCH | oklch(62.95% 0.134 153.9) |
| XYZ | xyz(16.2953, 26.8060, 15.8682) |
| Luminance | 0.2681 (WCAG relative) |
| Temperature | neutral |
| Family | green |
Closest named colors
Greenish
#40A368
ΔE00 1.42
Teal Green
#25A36F
ΔE00 3.14
Seaweed Green
#35AD6B
ΔE00 3.91
Jade
#1FA774
ΔE00 4.17
Bluish Green
#10A674
ΔE00 4.45
Jade Green
#2BAF6A
ΔE00 4.52
Perceptual scales
Shades
Tints
Tones
OKLCH scale
Color harmonies
complementary
#36A062 #A03674
analogous
#3FA036 #36A062 #36A097
triadic
#36A062 #6236A0 #A06236
tetradic
#36A062 #363FA0 #A03674 #A09736
square
#36A062 #363FA0 #A03674 #A09736
split-complementary
#36A062 #9736A0 #A0363F
monochromatic
#17442A #277246 #36A062 #4FC480 #7DD3A1
Accessibility & contrast
On white
3.30
#36A062 on #FFFFFF
AA ✗AA large ✓AAA ✗
On black
6.36
#36A062 on #000000
AA ✓AA large ✓AAA ✗
Best text color
#000000 on #36A062
6.36:1 — WCAG AA (normal text) passes
Contrast matrix
| fg \ bg | ##36A062 | #FFFFFF | #000000 | ##000000 |
|---|---|---|---|---|
| ##36A062 | 1.00 | 3.30 | 6.36 | 6.36 |
| #FFFFFF | 3.30 | 1.00 | 21.00 | 21.00 |
| #000000 | 6.36 | 21.00 | 1.00 | 1.00 |
| ##000000 | 6.36 | 21.00 | 1.00 | 1.00 |
Color blindness preview
Protanopia (red-blind)
#A0935E
Deuteranopia (green-blind)
#928A66
Tritanopia (blue-blind)
#009E90
Achromatopsia (no color)
#8D8D8D
Design tokens & code
CSS
--color: #36a062; /* rgb */ color: rgb(54, 160, 98); /* oklch */ color: oklch(62.9% 0.134 153.9);
Tailwind
colors: {
custom: {
50: '#79bd8f',
500: '#36a062',
950: '#000000',
},
}SCSS
$custom: #36a062; $custom-light: #79bd8f; $custom-dark: #000000;
JSON
{
"hex": "#36a062",
"rgb": {
"r": 54,
"g": 160,
"b": 98
},
"hsl": {
"h": 144.906,
"s": 49.533,
"l": 41.961
},
"oklch": {
"l": 0.62947,
"c": 0.13442,
"h": 153.9
},
"luminance": 0.26808
}Semantic roles & 50–950 ramp
primary
#36A062
secondary
#BC759F
accent
#4FA0D9
background
#F7FBF8
surface
#EEF7F0
border
#C9D0CB
text
#0A120C
muted
#7C817D