#4CB570#4CB570
#4CB570 is a light, vivid green. Relative luminance 0.358; OKLCH L 69.4% C 0.141 H 152.2°. Best body text is #000000 at 8.15:1 contrast (WCAG AA passes).
Color values
| HEX | #4CB570 |
|---|---|
| RGB | rgb(76, 181, 112) |
| HSL | hsl(141, 42%, 50%) |
| HSV | hsv(141, 58%, 71%) |
| CMYK | cmyk(58%, 0%, 38.1%, 29%) |
| CIE-LAB | lab(66.33, -45.90, 26.31) |
| CIE-LCH | lch(66.33, 52.91, 150.18°) |
| OKLab | oklab(69.39% -0.1244 0.0657) |
| OKLCH | oklch(69.39% 0.141 152.2) |
| XYZ | xyz(22.4273, 35.7520, 21.0450) |
| Luminance | 0.3575 (WCAG relative) |
| Temperature | neutral |
| Family | green |
Closest named colors
Mediumseagreen
#3CB371
ΔE00 1.66
Algae
#54AC68
ΔE00 2.80
Cool Green
#33B864
ΔE00 2.89
Jade Green
#2BAF6A
ΔE00 2.93
Seaweed Green
#35AD6B
ΔE00 2.98
Fern
#63B76C
ΔE00 3.06
Perceptual scales
Shades
Tints
Tones
OKLCH scale
Color harmonies
complementary
#4CB570 #B54C91
analogous
#5DB54C #4CB570 #4CB5A4
triadic
#4CB570 #704CB5 #B5704C
tetradic
#4CB570 #4C5DB5 #B54C91 #B5A44C
square
#4CB570 #4C5DB5 #B54C91 #B5A44C
split-complementary
#4CB570 #A44CB5 #B54C5D
monochromatic
#275F3B #398B55 #4CB570 #77C793 #A3D9B5
Accessibility & contrast
On white
2.58
#4CB570 on #FFFFFF
AA ✗AA large ✗AAA ✗
On black
8.15
#4CB570 on #000000
AA ✓AA large ✓AAA ✓
Best text color
#000000 on #4CB570
8.15:1 — WCAG AA (normal text) passes
Contrast matrix
| fg \ bg | ##4CB570 | #FFFFFF | #000000 | ##000000 |
|---|---|---|---|---|
| ##4CB570 | 1.00 | 2.58 | 8.15 | 8.15 |
| #FFFFFF | 2.58 | 1.00 | 21.00 | 21.00 |
| #000000 | 8.15 | 21.00 | 1.00 | 1.00 |
| ##000000 | 8.15 | 21.00 | 1.00 | 1.00 |
Color blindness preview
Protanopia (red-blind)
#B5A76B
Deuteranopia (green-blind)
#A79D74
Tritanopia (blue-blind)
#2DB3A4
Achromatopsia (no color)
#A1A1A1
Design tokens & code
CSS
--color: #4cb570; /* rgb */ color: rgb(76, 181, 112); /* oklch */ color: oklch(69.4% 0.141 152.2);
Tailwind
colors: {
custom: {
50: '#87cc99',
500: '#4cb570',
950: '#000000',
},
}SCSS
$custom: #4cb570; $custom-light: #87cc99; $custom-dark: #000000;
JSON
{
"hex": "#4cb570",
"rgb": {
"r": 76,
"g": 181,
"b": 112
},
"hsl": {
"h": 140.571,
"s": 41.502,
"l": 50.392
},
"oklch": {
"l": 0.69394,
"c": 0.14065,
"h": 152.2
},
"luminance": 0.35754
}Semantic roles & 50–950 ramp
primary
#4CB570
secondary
#C697B6
accent
#56A7D1
background
#F8FCF9
surface
#F0F9F2
border
#CBD2CC
text
#0C130E
muted
#7D827E