#64A63F#64A63F
#64A63F is a light, vivid yellow-green. Relative luminance 0.303; OKLCH L 65.9% C 0.153 H 136.0°. Best body text is #000000 at 7.07:1 contrast (WCAG AA passes).
Color values
| HEX | #64A63F |
|---|---|
| RGB | rgb(100, 166, 63) |
| HSL | hsl(98, 45%, 45%) |
| HSV | hsv(98, 62%, 65%) |
| CMYK | cmyk(39.8%, 0%, 62%, 34.9%) |
| CIE-LAB | lab(61.95, -39.63, 45.64) |
| CIE-LCH | lch(61.95, 60.44, 130.97°) |
| OKLab | oklab(65.85% -0.1098 0.1061) |
| OKLCH | oklch(65.85% 0.153 136) |
| XYZ | xyz(19.7884, 30.3396, 9.5151) |
| Luminance | 0.3034 (WCAG relative) |
| Temperature | warm |
| Family | yellow-green |
Closest named colors
Fern (survey)
#63A950
ΔE00 2.70
Grass
#5CAC2D
ΔE00 3.01
Leaf
#71AA34
ΔE00 3.25
Mid Green
#50A747
ΔE00 3.32
Off Green
#6BA353
ΔE00 3.49
Asparagus
#77AB56
ΔE00 3.77
Perceptual scales
Shades
Tints
Tones
OKLCH scale
Color harmonies
complementary
#64A63F #813FA6
analogous
#97A63F #64A63F #3FA64E
triadic
#64A63F #3F64A6 #A63F64
tetradic
#64A63F #3F97A6 #813FA6 #A64E3F
square
#64A63F #3F97A6 #813FA6 #A64E3F
split-complementary
#64A63F #4E3FA6 #A63F97
monochromatic
#2F4D1D #497A2E #64A63F #83C360 #A6D38C
Accessibility & contrast
On white
2.97
#64A63F on #FFFFFF
AA ✗AA large ✗AAA ✗
On black
7.07
#64A63F on #000000
AA ✓AA large ✓AAA ✓
Best text color
#000000 on #64A63F
7.07:1 — WCAG AA (normal text) passes
Contrast matrix
| fg \ bg | ##64A63F | #FFFFFF | #000000 | ##000000 |
|---|---|---|---|---|
| ##64A63F | 1.00 | 2.97 | 7.07 | 7.07 |
| #FFFFFF | 2.97 | 1.00 | 21.00 | 21.00 |
| #000000 | 7.07 | 21.00 | 1.00 | 1.00 |
| ##000000 | 7.07 | 21.00 | 1.00 | 1.00 |
Color blindness preview
Protanopia (red-blind)
#AC9933
Deuteranopia (green-blind)
#A29447
Tritanopia (blue-blind)
#62A090
Achromatopsia (no color)
#969696
Design tokens & code
CSS
--color: #64a63f; /* rgb */ color: rgb(100, 166, 63); /* oklch */ color: oklch(65.9% 0.153 136.0);
Tailwind
colors: {
custom: {
50: '#95c178',
500: '#64a63f',
950: '#000000',
},
}SCSS
$custom: #64a63f; $custom-light: #95c178; $custom-dark: #000000;
JSON
{
"hex": "#64a63f",
"rgb": {
"r": 100,
"g": 166,
"b": 63
},
"hsl": {
"h": 98.447,
"s": 44.978,
"l": 44.902
},
"oklch": {
"l": 0.65855,
"c": 0.1527,
"h": 136
},
"luminance": 0.30341
}Semantic roles & 50–950 ramp
primary
#64A63F
secondary
#A983BE
accent
#53D5A6
background
#F9FBF7
surface
#F2F7ED
border
#CCD0C8
text
#0E1209
muted
#7E817B