#628080#628080
#628080 is a mid, muted teal. Relative luminance 0.196; OKLCH L 57.7% C 0.034 H 196.2°. Best body text is #000000 at 4.92:1 contrast (WCAG AA passes).
Color values
| HEX | #628080 |
|---|---|
| RGB | rgb(98, 128, 128) |
| HSL | hsl(180, 13%, 44%) |
| HSV | hsv(180, 23%, 50%) |
| CMYK | cmyk(23.4%, 0%, 0%, 49.8%) |
| CIE-LAB | lab(51.37, -10.63, -3.50) |
| CIE-LCH | lch(51.37, 11.19, 198.24°) |
| OKLab | oklab(57.68% -0.0329 -0.0096) |
| OKLCH | oklch(57.68% 0.034 196.2) |
| XYZ | xyz(16.6513, 19.5928, 23.3223) |
| Luminance | 0.1959 (WCAG relative) |
| Temperature | cool |
| Family | teal |
Closest named colors
Steel Grey
#6F828A
ΔE00 6.70
Battleship Grey
#6B7C85
ΔE00 7.54
Flint
#6F7A80
ΔE00 8.46
Bluish Grey
#748B97
ΔE00 8.80
Grey Blue
#647D8E
ΔE00 9.27
Dusty Teal
#4C9085
ΔE00 10.18
Perceptual scales
Shades
Tints
Tones
OKLCH scale
Color harmonies
complementary
#628080 #806262
analogous
#628071 #628080 #627180
triadic
#628080 #806280 #808062
tetradic
#628080 #716280 #806262 #718062
square
#628080 #716280 #806262 #718062
split-complementary
#628080 #806271 #807162
monochromatic
#2D3B3B #475D5D #628080 #819E9E #A3B9B9
Accessibility & contrast
On white
4.27
#628080 on #FFFFFF
AA ✗AA large ✓AAA ✗
On black
4.92
#628080 on #000000
AA ✓AA large ✓AAA ✗
Best text color
#000000 on #628080
4.92:1 — WCAG AA (normal text) passes
Contrast matrix
| fg \ bg | ##628080 | #FFFFFF | #000000 | ##000000 |
|---|---|---|---|---|
| ##628080 | 1.00 | 4.27 | 4.92 | 4.92 |
| #FFFFFF | 4.27 | 1.00 | 21.00 | 21.00 |
| #000000 | 4.92 | 21.00 | 1.00 | 1.00 |
| ##000000 | 4.92 | 21.00 | 1.00 | 1.00 |
Color blindness preview
Protanopia (red-blind)
#7C7D80
Deuteranopia (green-blind)
#767980
Tritanopia (blue-blind)
#588280
Achromatopsia (no color)
#7A7A7A
Design tokens & code
CSS
--color: #628080; /* rgb */ color: rgb(98, 128, 128); /* oklch */ color: oklch(57.7% 0.034 196.2);
Tailwind
colors: {
custom: {
50: '#8fa4a4',
500: '#628080',
950: '#000000',
},
}SCSS
$custom: #628080; $custom-light: #8fa4a4; $custom-dark: #000000;
JSON
{
"hex": "#628080",
"rgb": {
"r": 98,
"g": 128,
"b": 128
},
"hsl": {
"h": 180,
"s": 13.274,
"l": 44.314
},
"oklch": {
"l": 0.5768,
"c": 0.03423,
"h": 196.2
},
"luminance": 0.19594
}Semantic roles & 50–950 ramp
primary
#628080
secondary
#A89696
accent
#7272B6
background
#F8FAFA
surface
#F0F4F4
border
#CBCECE
text
#0C0F0F
muted
#7D7F7F