#31897D#31897D
#31897D is a mid, moderate teal. Relative luminance 0.200; OKLCH L 57.4% C 0.085 H 182.7°. Best body text is #000000 at 5.01:1 contrast (WCAG AA passes).
Color values
| HEX | #31897D |
|---|---|
| RGB | rgb(49, 137, 125) |
| HSL | hsl(172, 47%, 36%) |
| HSV | hsv(172, 64%, 54%) |
| CMYK | cmyk(64.2%, 0%, 8.8%, 46.3%) |
| CIE-LAB | lab(51.86, -29.01, -1.29) |
| CIE-LCH | lch(51.86, 29.04, 182.54°) |
| OKLab | oklab(57.44% -0.085 -0.0039) |
| OKLCH | oklch(57.44% 0.085 182.7) |
| XYZ | xyz(13.9122, 20.0235, 22.5298) |
| Luminance | 0.2003 (WCAG relative) |
| Temperature | cool |
| Family | teal |
Closest named colors
Greenish Blue
#0B8B87
ΔE00 3.75
Teal (survey)
#029386
ΔE00 3.95
Dusty Teal
#4C9085
ΔE00 3.95
Darkcyan
#008B8B
ΔE00 5.21
Dark Cyan
#0A888A
ΔE00 5.86
Sea
#3C9992
ΔE00 6.11
Perceptual scales
Shades
Tints
Tones
OKLCH scale
Color harmonies
complementary
#31897D #89313D
analogous
#318951 #31897D #316989
triadic
#31897D #7D3189 #897D31
tetradic
#31897D #513189 #89313D #698931
square
#31897D #513189 #89313D #698931
split-complementary
#31897D #893169 #895131
monochromatic
#112F2B #215C54 #31897D #41B6A6 #6BCABD
Accessibility & contrast
On white
4.20
#31897D on #FFFFFF
AA ✗AA large ✓AAA ✗
On black
5.01
#31897D on #000000
AA ✓AA large ✓AAA ✗
Best text color
#000000 on #31897D
5.01:1 — WCAG AA (normal text) passes
Contrast matrix
| fg \ bg | ##31897D | #FFFFFF | #000000 | ##000000 |
|---|---|---|---|---|
| ##31897D | 1.00 | 4.20 | 5.01 | 5.01 |
| #FFFFFF | 4.20 | 1.00 | 21.00 | 21.00 |
| #000000 | 5.01 | 21.00 | 1.00 | 1.00 |
| ##000000 | 5.01 | 21.00 | 1.00 | 1.00 |
Color blindness preview
Protanopia (red-blind)
#83817D
Deuteranopia (green-blind)
#76787E
Tritanopia (blue-blind)
#008C85
Achromatopsia (no color)
#7C7C7C
Design tokens & code
CSS
--color: #31897d; /* rgb */ color: rgb(49, 137, 125); /* oklch */ color: oklch(57.4% 0.085 182.7);
Tailwind
colors: {
custom: {
50: '#74aca2',
500: '#31897d',
950: '#000000',
},
}SCSS
$custom: #31897d; $custom-light: #74aca2; $custom-dark: #000000;
JSON
{
"hex": "#31897d",
"rgb": {
"r": 49,
"g": 137,
"b": 125
},
"hsl": {
"h": 171.818,
"s": 47.312,
"l": 36.471
},
"oklch": {
"l": 0.57443,
"c": 0.08505,
"h": 182.7
},
"luminance": 0.20025
}Semantic roles & 50–950 ramp
primary
#31897D
secondary
#B1646F
accent
#5163D7
background
#F7FAF9
surface
#EDF4F2
border
#C8CECC
text
#09100F
muted
#7B7F7E