#60AF5C#60AF5C
#60AF5C is a light, vivid green. Relative luminance 0.339; OKLCH L 68.3% C 0.141 H 142.9°. Best body text is #000000 at 7.78:1 contrast (WCAG AA passes).
Color values
| HEX | #60AF5C |
|---|---|
| RGB | rgb(96, 175, 92) |
| HSL | hsl(117, 34%, 52%) |
| HSV | hsv(117, 47%, 69%) |
| CMYK | cmyk(45.1%, 0%, 47.4%, 31.4%) |
| CIE-LAB | lab(64.90, -41.31, 35.04) |
| CIE-LCH | lch(64.90, 54.16, 139.70°) |
| OKLab | oklab(68.33% -0.1125 0.0852) |
| OKLCH | oklch(68.33% 0.141 142.9) |
| XYZ | xyz(22.0846, 33.9180, 15.5062) |
| Luminance | 0.3392 (WCAG relative) |
| Temperature | neutral |
| Family | green |
Closest named colors
Dark Pastel Green
#56AE57
ΔE00 1.24
Boring Green
#63B365
ΔE00 1.61
Fern (survey)
#63A950
ΔE00 2.50
Fern
#63B76C
ΔE00 3.01
Algae
#54AC68
ΔE00 3.57
Mid Green
#50A747
ΔE00 3.60
Perceptual scales
Shades
Tints
Tones
OKLCH scale
Color harmonies
complementary
#60AF5C #AB5CAF
analogous
#8AAF5C #60AF5C #5CAF81
triadic
#60AF5C #5C60AF #AF5C60
tetradic
#60AF5C #5C8AAF #AB5CAF #AF815C
square
#60AF5C #5C8AAF #AB5CAF #AF815C
split-complementary
#60AF5C #815CAF #AF5C8A
monochromatic
#326130 #478A44 #60AF5C #88C385 #B0D7AE
Accessibility & contrast
On white
2.70
#60AF5C on #FFFFFF
AA ✗AA large ✗AAA ✗
On black
7.78
#60AF5C on #000000
AA ✓AA large ✓AAA ✓
Best text color
#000000 on #60AF5C
7.78:1 — WCAG AA (normal text) passes
Contrast matrix
| fg \ bg | ##60AF5C | #FFFFFF | #000000 | ##000000 |
|---|---|---|---|---|
| ##60AF5C | 1.00 | 2.70 | 7.78 | 7.78 |
| #FFFFFF | 2.70 | 1.00 | 21.00 | 21.00 |
| #000000 | 7.78 | 21.00 | 1.00 | 1.00 |
| ##000000 | 7.78 | 21.00 | 1.00 | 1.00 |
Color blindness preview
Protanopia (red-blind)
#B2A255
Deuteranopia (green-blind)
#A79B61
Tritanopia (blue-blind)
#57AB9B
Achromatopsia (no color)
#9D9D9D
Design tokens & code
CSS
--color: #60af5c; /* rgb */ color: rgb(96, 175, 92); /* oklch */ color: oklch(68.3% 0.141 142.9);
Tailwind
colors: {
custom: {
50: '#92c78b',
500: '#60af5c',
950: '#000000',
},
}SCSS
$custom: #60af5c; $custom-light: #92c78b; $custom-dark: #000000;
JSON
{
"hex": "#60af5c",
"rgb": {
"r": 96,
"g": 175,
"b": 92
},
"hsl": {
"h": 117.108,
"s": 34.156,
"l": 52.353
},
"oklch": {
"l": 0.68326,
"c": 0.14112,
"h": 142.9
},
"luminance": 0.33919
}Semantic roles & 50–950 ramp
primary
#60AF5C
secondary
#C4A1C5
accent
#5ECAC5
background
#F9FCF8
surface
#F2F8F0
border
#CCD1CB
text
#0D130C
muted
#7E827D