#77C87C#77C87C
#77C87C is a light, vivid green. Relative luminance 0.467; OKLCH L 76.2% C 0.134 H 145.5°. Best body text is #000000 at 10.34:1 contrast (WCAG AA passes).
Color values
| HEX | #77C87C |
|---|---|
| RGB | rgb(119, 200, 124) |
| HSL | hsl(124, 42%, 63%) |
| HSV | hsv(124, 41%, 78%) |
| CMYK | cmyk(40.5%, 0%, 38%, 21.6%) |
| CIE-LAB | lab(73.99, -40.41, 30.45) |
| CIE-LCH | lch(73.99, 50.59, 143.00°) |
| OKLab | oklab(76.17% -0.11 0.0757) |
| OKLCH | oklch(76.17% 0.134 145.5) |
| XYZ | xyz(31.8985, 46.6838, 26.3949) |
| Luminance | 0.4669 (WCAG relative) |
| Temperature | neutral |
| Family | green |
Closest named colors
Soft Green
#6FC276
ΔE00 1.70
Emerald
#50C878
ΔE00 4.02
Fern
#63B76C
ΔE00 4.81
Dark Mint
#48C072
ΔE00 5.04
Pistachio
#93C572
ΔE00 5.39
Boring Green
#63B365
ΔE00 5.91
Perceptual scales
Shades
Tints
Tones
OKLCH scale
Color harmonies
complementary
#77C87C #C877C3
analogous
#9AC877 #77C87C #77C8A5
triadic
#77C87C #7C77C8 #C87C77
tetradic
#77C87C #779AC8 #C877C3 #C8A577
square
#77C87C #779AC8 #C877C3 #C8A577
split-complementary
#77C87C #A577C8 #C8779A
monochromatic
#398C3E #4BB652 #77C87C #A3DAA6 #CEEBD0
Accessibility & contrast
On white
2.03
#77C87C on #FFFFFF
AA ✗AA large ✗AAA ✗
On black
10.34
#77C87C on #000000
AA ✓AA large ✓AAA ✓
Best text color
#000000 on #77C87C
10.34:1 — WCAG AA (normal text) passes
Contrast matrix
| fg \ bg | ##77C87C | #FFFFFF | #000000 | ##000000 |
|---|---|---|---|---|
| ##77C87C | 1.00 | 2.03 | 10.34 | 10.34 |
| #FFFFFF | 2.03 | 1.00 | 21.00 | 21.00 |
| #000000 | 10.34 | 21.00 | 1.00 | 1.00 |
| ##000000 | 10.34 | 21.00 | 1.00 | 1.00 |
Color blindness preview
Protanopia (red-blind)
#CBBB77
Deuteranopia (green-blind)
#BFB381
Tritanopia (blue-blind)
#6CC4B5
Achromatopsia (no color)
#B6B6B6
Design tokens & code
CSS
--color: #77c87c; /* rgb */ color: rgb(119, 200, 124); /* oklch */ color: oklch(76.2% 0.134 145.5);
Tailwind
colors: {
custom: {
50: '#a2d9a2',
500: '#77c87c',
950: '#000000',
},
}SCSS
$custom: #77c87c; $custom-light: #a2d9a2; $custom-dark: #000000;
JSON
{
"hex": "#77c87c",
"rgb": {
"r": 119,
"g": 200,
"b": 124
},
"hsl": {
"h": 123.704,
"s": 42.408,
"l": 62.549
},
"oklch": {
"l": 0.76173,
"c": 0.13353,
"h": 145.5
},
"luminance": 0.46686
}Semantic roles & 50–950 ramp
primary
#77C87C
secondary
#DCBFDA
accent
#30ADB5
background
#FAFDFA
surface
#F4FAF3
border
#CED3CD
text
#0F150F
muted
#7F837F