#8FA886#8FA886
#8FA886 is a light, muted green. Relative luminance 0.356; OKLCH L 70.3% C 0.056 H 137.5°. Best body text is #000000 at 8.11:1 contrast (WCAG AA passes).
Color values
| HEX | #8FA886 |
|---|---|
| RGB | rgb(143, 168, 134) |
| HSL | hsl(104, 16%, 59%) |
| HSV | hsv(104, 20%, 66%) |
| CMYK | cmyk(14.9%, 0%, 20.2%, 34.1%) |
| CIE-LAB | lab(66.19, -15.22, 14.74) |
| CIE-LCH | lch(66.19, 21.19, 135.91°) |
| OKLab | oklab(70.3% -0.0412 0.0378) |
| OKLCH | oklch(70.3% 0.056 137.5) |
| XYZ | xyz(29.6325, 35.5657, 27.8533) |
| Luminance | 0.3557 (WCAG relative) |
| Temperature | warm |
| Family | green |
Closest named colors
Greenish Grey
#96AE8D
ΔE00 1.92
Grey Green
#86A17D
ΔE00 2.47
Sage Green
#9CAF88
ΔE00 3.33
Greyish Green
#82A67D
ΔE00 3.40
Greeny Grey
#7EA07A
ΔE00 3.96
Sage
#87AE73
ΔE00 6.52
Perceptual scales
Shades
Tints
Tones
OKLCH scale
Color harmonies
complementary
#8FA886 #9F86A8
analogous
#A0A886 #8FA886 #86A88E
triadic
#8FA886 #868FA8 #A8868F
tetradic
#8FA886 #86A0A8 #9F86A8 #A88E86
square
#8FA886 #86A0A8 #9F86A8 #A88E86
split-complementary
#8FA886 #8E86A8 #A886A0
monochromatic
#53684B #6F8C65 #8FA886 #B0C2AA #D1DBCD
Accessibility & contrast
On white
2.59
#8FA886 on #FFFFFF
AA ✗AA large ✗AAA ✗
On black
8.11
#8FA886 on #000000
AA ✓AA large ✓AAA ✓
Best text color
#000000 on #8FA886
8.11:1 — WCAG AA (normal text) passes
Contrast matrix
| fg \ bg | ##8FA886 | #FFFFFF | #000000 | ##000000 |
|---|---|---|---|---|
| ##8FA886 | 1.00 | 2.59 | 8.11 | 8.11 |
| #FFFFFF | 2.59 | 1.00 | 21.00 | 21.00 |
| #000000 | 8.11 | 21.00 | 1.00 | 1.00 |
| ##000000 | 8.11 | 21.00 | 1.00 | 1.00 |
Color blindness preview
Protanopia (red-blind)
#ABA284
Deuteranopia (green-blind)
#A6A088
Tritanopia (blue-blind)
#8EA59F
Achromatopsia (no color)
#A1A1A1
Design tokens & code
CSS
--color: #8fa886; /* rgb */ color: rgb(143, 168, 134); /* oklch */ color: oklch(70.3% 0.056 137.5);
Tailwind
colors: {
custom: {
50: '#b0c2a9',
500: '#8fa886',
950: '#000000',
},
}SCSS
$custom: #8fa886; $custom-light: #b0c2a9; $custom-dark: #000000;
JSON
{
"hex": "#8fa886",
"rgb": {
"r": 143,
"g": 168,
"b": 134
},
"hsl": {
"h": 104.118,
"s": 16.346,
"l": 59.216
},
"oklch": {
"l": 0.70303,
"c": 0.05591,
"h": 137.5
},
"luminance": 0.35566
}Semantic roles & 50–950 ramp
primary
#8FA886
secondary
#C8BECC
accent
#6FB9A5
background
#FAFBFA
surface
#F4F7F4
border
#CED0CE
text
#10120F
muted
#7F817F