#649C8E#649C8E
#649C8E is a light, moderate teal. Relative luminance 0.284; OKLCH L 65.0% C 0.063 H 176.7°. Best body text is #000000 at 6.69:1 contrast (WCAG AA passes).
Color values
| HEX | #649C8E |
|---|---|
| RGB | rgb(100, 156, 142) |
| HSL | hsl(165, 22%, 50%) |
| HSV | hsv(165, 36%, 61%) |
| CMYK | cmyk(35.9%, 0%, 9%, 38.8%) |
| CIE-LAB | lab(60.28, -21.69, 1.50) |
| CIE-LCH | lch(60.28, 21.75, 176.04°) |
| OKLab | oklab(64.96% -0.0628 0.0037) |
| OKLCH | oklch(64.96% 0.063 176.7) |
| XYZ | xyz(22.0247, 28.4379, 29.9145) |
| Luminance | 0.2844 (WCAG relative) |
| Temperature | cool |
| Family | teal |
Closest named colors
Dull Teal
#5F9E8F
ΔE00 1.25
Grey Teal
#5E9B8A
ΔE00 1.53
Greyish Teal
#719F91
ΔE00 2.45
Dusty Teal
#4C9085
ΔE00 5.08
Sea
#3C9992
ΔE00 5.83
Cadetblue
#5F9EA0
ΔE00 6.75
Perceptual scales
Shades
Tints
Tones
OKLCH scale
Color harmonies
complementary
#649C8E #9C6472
analogous
#649C72 #649C8E #648E9C
triadic
#649C8E #8E649C #9C8E64
tetradic
#649C8E #72649C #9C6472 #8E9C64
square
#649C8E #72649C #9C6472 #8E9C64
split-complementary
#649C8E #9C648E #9C7264
monochromatic
#34524A #4C776C #649C8E #89B4A9 #AFCCC4
Accessibility & contrast
On white
3.14
#649C8E on #FFFFFF
AA ✗AA large ✓AAA ✗
On black
6.69
#649C8E on #000000
AA ✓AA large ✓AAA ✗
Best text color
#000000 on #649C8E
6.69:1 — WCAG AA (normal text) passes
Contrast matrix
| fg \ bg | ##649C8E | #FFFFFF | #000000 | ##000000 |
|---|---|---|---|---|
| ##649C8E | 1.00 | 3.14 | 6.69 | 6.69 |
| #FFFFFF | 3.14 | 1.00 | 21.00 | 21.00 |
| #000000 | 6.69 | 21.00 | 1.00 | 1.00 |
| ##000000 | 6.69 | 21.00 | 1.00 | 1.00 |
Color blindness preview
Protanopia (red-blind)
#98968D
Deuteranopia (green-blind)
#8E8E8F
Tritanopia (blue-blind)
#539D98
Achromatopsia (no color)
#919191
Design tokens & code
CSS
--color: #649c8e; /* rgb */ color: rgb(100, 156, 142); /* oklch */ color: oklch(65.0% 0.063 176.7);
Tailwind
colors: {
custom: {
50: '#92b9af',
500: '#649c8e',
950: '#000000',
},
}SCSS
$custom: #649c8e; $custom-light: #92b9af; $custom-dark: #000000;
JSON
{
"hex": "#649c8e",
"rgb": {
"r": 100,
"g": 156,
"b": 142
},
"hsl": {
"h": 165,
"s": 22.047,
"l": 50.196
},
"oklch": {
"l": 0.64964,
"c": 0.06295,
"h": 176.7
},
"luminance": 0.28439
}Semantic roles & 50–950 ramp
primary
#649C8E
secondary
#BAA1A8
accent
#697FBF
background
#F9FBFA
surface
#F1F6F4
border
#CBD0CE
text
#0D1110
muted
#7E807F