#31958F#31958F
#31958F is a mid, moderate teal. Relative luminance 0.241; OKLCH L 61.2% C 0.091 H 189.3°. Best body text is #000000 at 5.83:1 contrast (WCAG AA passes).
Color values
| HEX | #31958F |
|---|---|
| RGB | rgb(49, 149, 143) |
| HSL | hsl(176, 51%, 39%) |
| HSV | hsv(176, 67%, 58%) |
| CMYK | cmyk(67.1%, 0%, 4%, 41.6%) |
| CIE-LAB | lab(56.22, -29.73, -5.26) |
| CIE-LCH | lch(56.22, 30.20, 190.03°) |
| OKLab | oklab(61.16% -0.0896 -0.0147) |
| OKLCH | oklch(61.16% 0.091 189.3) |
| XYZ | xyz(16.9697, 24.1291, 29.7443) |
| Luminance | 0.2413 (WCAG relative) |
| Temperature | cool |
| Family | teal |
Closest named colors
Sea
#3C9992
ΔE00 1.62
Blue Green
#0F9B8E
ΔE00 3.62
Teal (survey)
#029386
ΔE00 3.63
Dusty Teal
#4C9085
ΔE00 3.90
Greenish Blue
#0B8B87
ΔE00 4.05
Darkcyan
#008B8B
ΔE00 4.56
Perceptual scales
Shades
Tints
Tones
OKLCH scale
Color harmonies
complementary
#31958F #953137
analogous
#31955D #31958F #316995
triadic
#31958F #8F3195 #958F31
tetradic
#31958F #5D3195 #953137 #699531
square
#31958F #5D3195 #953137 #699531
split-complementary
#31958F #953169 #955D31
monochromatic
#133937 #226763 #31958F #42C1B9 #70D0CA
Accessibility & contrast
On white
3.60
#31958F on #FFFFFF
AA ✗AA large ✓AAA ✗
On black
5.83
#31958F on #000000
AA ✓AA large ✓AAA ✗
Best text color
#000000 on #31958F
5.83:1 — WCAG AA (normal text) passes
Contrast matrix
| fg \ bg | ##31958F | #FFFFFF | #000000 | ##000000 |
|---|---|---|---|---|
| ##31958F | 1.00 | 3.60 | 5.83 | 5.83 |
| #FFFFFF | 3.60 | 1.00 | 21.00 | 21.00 |
| #000000 | 5.83 | 21.00 | 1.00 | 1.00 |
| ##000000 | 5.83 | 21.00 | 1.00 | 1.00 |
Color blindness preview
Protanopia (red-blind)
#8D8D8F
Deuteranopia (green-blind)
#7E8290
Tritanopia (blue-blind)
#009993
Achromatopsia (no color)
#878787
Design tokens & code
CSS
--color: #31958f; /* rgb */ color: rgb(49, 149, 143); /* oklch */ color: oklch(61.2% 0.091 189.3);
Tailwind
colors: {
custom: {
50: '#77b4af',
500: '#31958f',
950: '#000000',
},
}SCSS
$custom: #31958f; $custom-light: #77b4af; $custom-dark: #000000;
JSON
{
"hex": "#31958f",
"rgb": {
"r": 49,
"g": 149,
"b": 143
},
"hsl": {
"h": 176.4,
"s": 50.505,
"l": 38.824
},
"oklch": {
"l": 0.61155,
"c": 0.09083,
"h": 189.3
},
"luminance": 0.24131
}Semantic roles & 50–950 ramp
primary
#31958F
secondary
#B86A6F
accent
#4E56DA
background
#F7FBFA
surface
#EEF6F4
border
#C9D0CE
text
#0A1110
muted
#7C807F