#21C225#21C225
#21C225 is a light, highly saturated green. Relative luminance 0.390; OKLCH L 70.9% C 0.227 H 142.9°. Best body text is #000000 at 8.81:1 contrast (WCAG AA passes).
Color values
| HEX | #21C225 |
|---|---|
| RGB | rgb(33, 194, 37) |
| HSL | hsl(121, 71%, 45%) |
| HSV | hsv(121, 83%, 76%) |
| CMYK | cmyk(83%, 0%, 80.9%, 23.9%) |
| CIE-LAB | lab(68.78, -66.79, 61.65) |
| CIE-LCH | lch(68.78, 90.89, 137.29°) |
| OKLab | oklab(70.91% -0.1811 0.1369) |
| OKLCH | oklch(70.91% 0.227 142.9) |
| XYZ | xyz(20.2516, 39.0380, 8.2177) |
| Luminance | 0.3904 (WCAG relative) |
| Temperature | neutral |
| Family | green |
Closest named colors
Lime Green
#32CD32
ΔE00 2.94
Kelly Green
#4CBB17
ΔE00 3.33
Leafy Green
#51B73B
ΔE00 4.16
Shamrock Green
#02C14D
ΔE00 4.52
Frog Green
#58BC08
ΔE00 4.55
Green (survey)
#15B01A
ΔE00 5.00
Perceptual scales
Shades
Tints
Tones
OKLCH scale
Color harmonies
complementary
#21C225 #C221BE
analogous
#6DC221 #21C225 #21C276
triadic
#21C225 #2521C2 #C22521
tetradic
#21C225 #216DC2 #C221BE #C27621
square
#21C225 #216DC2 #C221BE #C27621
split-complementary
#21C225 #7621C2 #C2216D
monochromatic
#0F5911 #188E1B #21C225 #41DF45 #76E879
Accessibility & contrast
On white
2.38
#21C225 on #FFFFFF
AA ✗AA large ✗AAA ✗
On black
8.81
#21C225 on #000000
AA ✓AA large ✓AAA ✓
Best text color
#000000 on #21C225
8.81:1 — WCAG AA (normal text) passes
Contrast matrix
| fg \ bg | ##21C225 | #FFFFFF | #000000 | ##000000 |
|---|---|---|---|---|
| ##21C225 | 1.00 | 2.38 | 8.81 | 8.81 |
| #FFFFFF | 2.38 | 1.00 | 21.00 | 21.00 |
| #000000 | 8.81 | 21.00 | 1.00 | 1.00 |
| ##000000 | 8.81 | 21.00 | 1.00 | 1.00 |
Color blindness preview
Protanopia (red-blind)
#C6AF00
Deuteranopia (green-blind)
#B6A339
Tritanopia (blue-blind)
#00BCA5
Achromatopsia (no color)
#A8A8A8
Design tokens & code
CSS
--color: #21c225; /* rgb */ color: rgb(33, 194, 37); /* oklch */ color: oklch(70.9% 0.227 142.9);
Tailwind
colors: {
custom: {
50: '#7dd66d',
500: '#21c225',
950: '#000000',
},
}SCSS
$custom: #21c225; $custom-light: #7dd66d; $custom-dark: #000000;
JSON
{
"hex": "#21c225",
"rgb": {
"r": 33,
"g": 194,
"b": 37
},
"hsl": {
"h": 121.491,
"s": 70.925,
"l": 44.51
},
"oklch": {
"l": 0.7091,
"c": 0.22706,
"h": 142.9
},
"luminance": 0.3904
}Semantic roles & 50–950 ramp
primary
#21C225
secondary
#CF70CD
accent
#3AE9EE
background
#F8FDF7
surface
#F0FAED
border
#CBD3C8
text
#0C1408
muted
#7D837B