#567B60#567B60
#567B60 is a mid, muted green. Relative luminance 0.170; OKLCH L 54.7% C 0.059 H 152.5°. Best body text is #FFFFFF at 4.78:1 contrast (WCAG AA passes).
Color values
| HEX | #567B60 |
|---|---|
| RGB | rgb(86, 123, 96) |
| HSL | hsl(136, 18%, 41%) |
| HSV | hsv(136, 30%, 48%) |
| CMYK | cmyk(30.1%, 0%, 22%, 51.8%) |
| CIE-LAB | lab(48.25, -19.10, 10.65) |
| CIE-LCH | lch(48.25, 21.87, 150.84°) |
| OKLab | oklab(54.7% -0.0526 0.0273) |
| OKLCH | oklch(54.7% 0.059 152.5) |
| XYZ | xyz(13.0314, 16.9883, 13.6565) |
| Luminance | 0.1699 (WCAG relative) |
| Temperature | neutral |
| Family | green |
Closest named colors
Dark Sage
#598556
ΔE00 6.45
Slate Green
#658D6D
ΔE00 6.83
Dark Sea Green
#11875D
ΔE00 9.53
Sea Green
#2E8B57
ΔE00 9.78
Green Grey
#77926F
ΔE00 9.96
Viridian
#1E9167
ΔE00 10.91
Perceptual scales
Shades
Tints
Tones
OKLCH scale
Color harmonies
complementary
#567B60 #7B5671
analogous
#5E7B56 #567B60 #567B72
triadic
#567B60 #60567B #7B6056
tetradic
#567B60 #565E7B #7B5671 #7B7256
square
#567B60 #565E7B #7B5671 #7B7256
split-complementary
#567B60 #72567B #7B565E
monochromatic
#243328 #3D5744 #567B60 #729C7D #96B69E
Accessibility & contrast
On white
4.78
#567B60 on #FFFFFF
AA ✓AA large ✓AAA ✗
On black
4.40
#567B60 on #000000
AA ✗AA large ✓AAA ✗
Best text color
#FFFFFF on #567B60
4.78:1 — WCAG AA (normal text) passes
Contrast matrix
| fg \ bg | ##567B60 | #FFFFFF | #000000 | ##FFFFFF |
|---|---|---|---|---|
| ##567B60 | 1.00 | 4.78 | 4.40 | 4.78 |
| #FFFFFF | 4.78 | 1.00 | 21.00 | 1.00 |
| #000000 | 4.40 | 21.00 | 1.00 | 21.00 |
| ##FFFFFF | 4.78 | 1.00 | 21.00 | 1.00 |
Color blindness preview
Protanopia (red-blind)
#7B755E
Deuteranopia (green-blind)
#757161
Tritanopia (blue-blind)
#507A73
Achromatopsia (no color)
#737373
Design tokens & code
CSS
--color: #567b60; /* rgb */ color: rgb(86, 123, 96); /* oklch */ color: oklch(54.7% 0.059 152.5);
Tailwind
colors: {
custom: {
50: '#86a18d',
500: '#567b60',
950: '#000000',
},
}SCSS
$custom: #567b60; $custom-light: #86a18d; $custom-dark: #000000;
JSON
{
"hex": "#567b60",
"rgb": {
"r": 86,
"g": 123,
"b": 96
},
"hsl": {
"h": 136.216,
"s": 17.703,
"l": 40.98
},
"oklch": {
"l": 0.547,
"c": 0.05929,
"h": 152.5
},
"luminance": 0.16989
}Semantic roles & 50–950 ramp
primary
#567B60
secondary
#A3899C
accent
#6DA6BA
background
#F8F9F8
surface
#EFF2F0
border
#CACCCB
text
#0B0F0C
muted
#7C7E7D