#508B91#508B91
#508B91 is a mid, moderate teal. Relative luminance 0.222; OKLCH L 59.9% C 0.062 H 204.0°. Best body text is #000000 at 5.44:1 contrast (WCAG AA passes).
Color values
| HEX | #508B91 |
|---|---|
| RGB | rgb(80, 139, 145) |
| HSL | hsl(186, 29%, 44%) |
| HSV | hsv(186, 45%, 57%) |
| CMYK | cmyk(44.8%, 4.1%, 0%, 43.1%) |
| CIE-LAB | lab(54.25, -17.56, -9.22) |
| CIE-LCH | lch(54.25, 19.83, 207.70°) |
| OKLab | oklab(59.89% -0.0568 -0.0254) |
| OKLCH | oklch(59.89% 0.062 204) |
| XYZ | xyz(17.6498, 22.2137, 30.1402) |
| Luminance | 0.2221 (WCAG relative) |
| Temperature | cool |
| Family | teal |
Closest named colors
Cadetblue
#5F9EA0
ΔE00 6.61
Dark Cyan
#0A888A
ΔE00 6.79
Teal Blue
#01889F
ΔE00 7.03
Darkcyan
#008B8B
ΔE00 7.25
Dusty Teal
#4C9085
ΔE00 7.82
Greenish Blue
#0B8B87
ΔE00 8.07
Perceptual scales
Shades
Tints
Tones
OKLCH scale
Color harmonies
complementary
#508B91 #915650
analogous
#509177 #508B91 #506B91
triadic
#508B91 #91508B #8B9150
tetradic
#508B91 #775091 #915650 #6B9150
square
#508B91 #775091 #915650 #6B9150
split-complementary
#508B91 #91506B #917750
monochromatic
#243F42 #3A656A #508B91 #6FA9AF #96C1C5
Accessibility & contrast
On white
3.86
#508B91 on #FFFFFF
AA ✗AA large ✓AAA ✗
On black
5.44
#508B91 on #000000
AA ✓AA large ✓AAA ✗
Best text color
#000000 on #508B91
5.44:1 — WCAG AA (normal text) passes
Contrast matrix
| fg \ bg | ##508B91 | #FFFFFF | #000000 | ##000000 |
|---|---|---|---|---|
| ##508B91 | 1.00 | 3.86 | 5.44 | 5.44 |
| #FFFFFF | 3.86 | 1.00 | 21.00 | 21.00 |
| #000000 | 5.44 | 21.00 | 1.00 | 1.00 |
| ##000000 | 5.44 | 21.00 | 1.00 | 1.00 |
Color blindness preview
Protanopia (red-blind)
#838691
Deuteranopia (green-blind)
#787E91
Tritanopia (blue-blind)
#318F8D
Achromatopsia (no color)
#828282
Design tokens & code
CSS
--color: #508b91; /* rgb */ color: rgb(80, 139, 145); /* oklch */ color: oklch(59.9% 0.062 204.0);
Tailwind
colors: {
custom: {
50: '#85adb1',
500: '#508b91',
950: '#000000',
},
}SCSS
$custom: #508b91; $custom-light: #85adb1; $custom-dark: #000000;
JSON
{
"hex": "#508b91",
"rgb": {
"r": 80,
"g": 139,
"b": 145
},
"hsl": {
"h": 185.538,
"s": 28.889,
"l": 44.118
},
"oklch": {
"l": 0.59893,
"c": 0.06223,
"h": 204
},
"luminance": 0.22215
}Semantic roles & 50–950 ramp
primary
#508B91
secondary
#B28E8B
accent
#6C63C5
background
#F8FAFA
surface
#F0F4F5
border
#CBCECF
text
#0B1010
muted
#7C7F7F