#31A359#31A359
#31A359 is a light, vivid green. Relative luminance 0.276; OKLCH L 63.4% C 0.149 H 151.0°. Best body text is #000000 at 6.51:1 contrast (WCAG AA passes).
Color values
| HEX | #31A359 |
|---|---|
| RGB | rgb(49, 163, 89) |
| HSL | hsl(141, 54%, 42%) |
| HSV | hsv(141, 70%, 64%) |
| CMYK | cmyk(69.9%, 0%, 45.4%, 36.1%) |
| CIE-LAB | lab(59.50, -48.38, 29.42) |
| CIE-LCH | lch(59.50, 56.62, 148.70°) |
| OKLab | oklab(63.44% -0.1304 0.0723) |
| OKLCH | oklch(63.44% 0.149 151) |
| XYZ | xyz(16.1657, 27.5668, 13.9182) |
| Luminance | 0.2757 (WCAG relative) |
| Temperature | neutral |
| Family | green |
Closest named colors
Emerald (survey)
#01A049
ΔE00 2.90
Greenish
#40A368
ΔE00 3.06
Seaweed Green
#35AD6B
ΔE00 3.74
Jade Green
#2BAF6A
ΔE00 4.04
Algae
#54AC68
ΔE00 4.22
Teal Green
#25A36F
ΔE00 5.06
Perceptual scales
Shades
Tints
Tones
OKLCH scale
Color harmonies
complementary
#31A359 #A3317B
analogous
#42A331 #31A359 #31A392
triadic
#31A359 #5931A3 #A35931
tetradic
#31A359 #3142A3 #A3317B #A39231
square
#31A359 #3142A3 #A3317B #A39231
split-complementary
#31A359 #9231A3 #A33142
monochromatic
#154526 #23743F #31A359 #49C876 #78D699
Accessibility & contrast
On white
3.22
#31A359 on #FFFFFF
AA ✗AA large ✓AAA ✗
On black
6.51
#31A359 on #000000
AA ✓AA large ✓AAA ✗
Best text color
#000000 on #31A359
6.51:1 — WCAG AA (normal text) passes
Contrast matrix
| fg \ bg | ##31A359 | #FFFFFF | #000000 | ##000000 |
|---|---|---|---|---|
| ##31A359 | 1.00 | 3.22 | 6.51 | 6.51 |
| #FFFFFF | 3.22 | 1.00 | 21.00 | 21.00 |
| #000000 | 6.51 | 21.00 | 1.00 | 1.00 |
| ##000000 | 6.51 | 21.00 | 1.00 | 1.00 |
Color blindness preview
Protanopia (red-blind)
#A49553
Deuteranopia (green-blind)
#968B5E
Tritanopia (blue-blind)
#00A091
Achromatopsia (no color)
#8F8F8F
Design tokens & code
CSS
--color: #31a359; /* rgb */ color: rgb(49, 163, 89); /* oklch */ color: oklch(63.4% 0.149 151.0);
Tailwind
colors: {
custom: {
50: '#78bf89',
500: '#31a359',
950: '#000000',
},
}SCSS
$custom: #31a359; $custom-light: #78bf89; $custom-dark: #000000;
JSON
{
"hex": "#31a359",
"rgb": {
"r": 49,
"g": 163,
"b": 89
},
"hsl": {
"h": 141.053,
"s": 53.774,
"l": 41.569
},
"oklch": {
"l": 0.63442,
"c": 0.14908,
"h": 151
},
"luminance": 0.27569
}Semantic roles & 50–950 ramp
primary
#31A359
secondary
#BF71A3
accent
#4BAADD
background
#F7FBF8
surface
#EEF7F0
border
#C9D0CB
text
#0A120B
muted
#7C817C