#5FA776#5FA776
#5FA776 is a light, moderate green. Relative luminance 0.314; OKLCH L 66.8% C 0.103 H 153.0°. Best body text is #000000 at 7.28:1 contrast (WCAG AA passes).
Color values
| HEX | #5FA776 |
|---|---|
| RGB | rgb(95, 167, 118) |
| HSL | hsl(139, 29%, 51%) |
| HSV | hsv(139, 43%, 65%) |
| CMYK | cmyk(43.1%, 0%, 29.3%, 34.5%) |
| CIE-LAB | lab(62.82, -33.67, 18.47) |
| CIE-LCH | lch(62.82, 38.40, 151.25°) |
| OKLab | oklab(66.77% -0.0921 0.0468) |
| OKLCH | oklch(66.77% 0.103 153) |
| XYZ | xyz(21.8066, 31.3769, 22.0433) |
| Luminance | 0.3138 (WCAG relative) |
| Temperature | neutral |
| Family | green |
Closest named colors
Tea
#65AB7C
ΔE00 1.47
Greenish
#40A368
ΔE00 4.05
Dusty Green
#76A973
ΔE00 4.16
Algae
#54AC68
ΔE00 4.20
Dark Seafoam Green
#3EAF76
ΔE00 4.35
Seaweed Green
#35AD6B
ΔE00 5.17
Perceptual scales
Shades
Tints
Tones
OKLCH scale
Color harmonies
complementary
#5FA776 #A75F90
analogous
#6CA75F #5FA776 #5FA79A
triadic
#5FA776 #765FA7 #A7765F
tetradic
#5FA776 #5F6CA7 #A75F90 #A79A5F
square
#5FA776 #5F6CA7 #A75F90 #A79A5F
split-complementary
#5FA776 #9A5FA7 #A75F6C
monochromatic
#325A3E #47825A #5FA776 #86BD98 #AED2BA
Accessibility & contrast
On white
2.89
#5FA776 on #FFFFFF
AA ✗AA large ✗AAA ✗
On black
7.28
#5FA776 on #000000
AA ✓AA large ✓AAA ✓
Best text color
#000000 on #5FA776
7.28:1 — WCAG AA (normal text) passes
Contrast matrix
| fg \ bg | ##5FA776 | #FFFFFF | #000000 | ##000000 |
|---|---|---|---|---|
| ##5FA776 | 1.00 | 2.89 | 7.28 | 7.28 |
| #FFFFFF | 2.89 | 1.00 | 21.00 | 21.00 |
| #000000 | 7.28 | 21.00 | 1.00 | 1.00 |
| ##000000 | 7.28 | 21.00 | 1.00 | 1.00 |
Color blindness preview
Protanopia (red-blind)
#A79D73
Deuteranopia (green-blind)
#9C9579
Tritanopia (blue-blind)
#51A59A
Achromatopsia (no color)
#989898
Design tokens & code
CSS
--color: #5fa776; /* rgb */ color: rgb(95, 167, 118); /* oklch */ color: oklch(66.8% 0.103 153.0);
Tailwind
colors: {
custom: {
50: '#90c19d',
500: '#5fa776',
950: '#000000',
},
}SCSS
$custom: #5fa776; $custom-light: #90c19d; $custom-dark: #000000;
JSON
{
"hex": "#5fa776",
"rgb": {
"r": 95,
"g": 167,
"b": 118
},
"hsl": {
"h": 139.167,
"s": 29.032,
"l": 51.373
},
"oklch": {
"l": 0.66769,
"c": 0.1033,
"h": 153
},
"luminance": 0.31378
}Semantic roles & 50–950 ramp
primary
#5FA776
secondary
#C1A1B7
accent
#62A6C5
background
#F9FBF9
surface
#F1F7F2
border
#CBD0CC
text
#0D120E
muted
#7E817E