#63A036#63A036
#63A036 is a light, vivid yellow-green. Relative luminance 0.281; OKLCH L 64.2% C 0.152 H 134.4°. Best body text is #000000 at 6.61:1 contrast (WCAG AA passes).
Color values
| HEX | #63A036 |
|---|---|
| RGB | rgb(99, 160, 54) |
| HSL | hsl(95, 50%, 42%) |
| HSV | hsv(95, 66%, 63%) |
| CMYK | cmyk(38.1%, 0%, 66.3%, 37.3%) |
| CIE-LAB | lab(59.94, -38.19, 47.39) |
| CIE-LCH | lch(59.94, 60.86, 128.86°) |
| OKLab | oklab(64.18% -0.1065 0.1088) |
| OKLCH | oklch(64.18% 0.152 134.4) |
| XYZ | xyz(18.3819, 28.0597, 7.9368) |
| Luminance | 0.2806 (WCAG relative) |
| Temperature | warm |
| Family | yellow-green |
Closest named colors
Flat Green
#699D4C
ΔE00 3.66
Leaf
#71AA34
ΔE00 3.77
Grass
#5CAC2D
ΔE00 4.01
Lawn Green
#4DA409
ΔE00 4.15
Off Green
#6BA353
ΔE00 4.24
Fern (survey)
#63A950
ΔE00 4.37
Perceptual scales
Shades
Tints
Tones
OKLCH scale
Color harmonies
complementary
#63A036 #7336A0
analogous
#98A036 #63A036 #36A03E
triadic
#63A036 #3663A0 #A03663
tetradic
#63A036 #3698A0 #7336A0 #A03E36
square
#63A036 #3698A0 #7336A0 #A03E36
split-complementary
#63A036 #3E36A0 #A03698
monochromatic
#2A4417 #477227 #63A036 #81C44F #A2D37D
Accessibility & contrast
On white
3.18
#63A036 on #FFFFFF
AA ✗AA large ✓AAA ✗
On black
6.61
#63A036 on #000000
AA ✓AA large ✓AAA ✗
Best text color
#000000 on #63A036
6.61:1 — WCAG AA (normal text) passes
Contrast matrix
| fg \ bg | ##63A036 | #FFFFFF | #000000 | ##000000 |
|---|---|---|---|---|
| ##63A036 | 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)
#A69428
Deuteranopia (green-blind)
#9E8F3F
Tritanopia (blue-blind)
#629A8A
Achromatopsia (no color)
#909090
Design tokens & code
CSS
--color: #63a036; /* rgb */ color: rgb(99, 160, 54); /* oklch */ color: oklch(64.2% 0.152 134.4);
Tailwind
colors: {
custom: {
50: '#94bc72',
500: '#63a036',
950: '#000000',
},
}SCSS
$custom: #63a036; $custom-light: #94bc72; $custom-dark: #000000;
JSON
{
"hex": "#63a036",
"rgb": {
"r": 99,
"g": 160,
"b": 54
},
"hsl": {
"h": 94.528,
"s": 49.533,
"l": 41.961
},
"oklch": {
"l": 0.64179,
"c": 0.15224,
"h": 134.4
},
"luminance": 0.28061
}Semantic roles & 50–950 ramp
primary
#63A036
secondary
#9E75BC
accent
#4FD99E
background
#F9FBF7
surface
#F2F6ED
border
#CCD0C8
text
#0E1208
muted
#7E817B