#63A29A#63A29A
#63A29A is a light, moderate teal. Relative luminance 0.308; OKLCH L 66.7% C 0.066 H 185.5°. Best body text is #000000 at 7.17:1 contrast (WCAG AA passes).
Color values
| HEX | #63A29A |
|---|---|
| RGB | rgb(99, 162, 154) |
| HSL | hsl(172, 25%, 51%) |
| HSV | hsv(172, 39%, 64%) |
| CMYK | cmyk(38.9%, 0%, 4.9%, 36.5%) |
| CIE-LAB | lab(62.36, -22.18, -2.23) |
| CIE-LCH | lch(62.36, 22.29, 185.75°) |
| OKLab | oklab(66.73% -0.066 -0.0063) |
| OKLCH | oklch(66.73% 0.066 185.5) |
| XYZ | xyz(23.8965, 30.8248, 35.2562) |
| Luminance | 0.3083 (WCAG relative) |
| Temperature | cool |
| Family | teal |
Closest named colors
Dull Teal
#5F9E8F
ΔE00 3.16
Greyish Teal
#719F91
ΔE00 3.93
Grey Teal
#5E9B8A
ΔE00 4.35
Cadetblue
#5F9EA0
ΔE00 4.35
Sea
#3C9992
ΔE00 5.29
Dusty Teal
#4C9085
ΔE00 6.55
Perceptual scales
Shades
Tints
Tones
OKLCH scale
Color harmonies
complementary
#63A29A #A2636B
analogous
#63A27A #63A29A #638AA2
triadic
#63A29A #9A63A2 #A29A63
tetradic
#63A29A #7A63A2 #A2636B #8AA263
square
#63A29A #7A63A2 #A2636B #8AA263
split-complementary
#63A29A #A2638A #A27A63
monochromatic
#345752 #4B7D77 #63A29A #89B9B3 #B0D0CC
Accessibility & contrast
On white
2.93
#63A29A on #FFFFFF
AA ✗AA large ✗AAA ✗
On black
7.17
#63A29A on #000000
AA ✓AA large ✓AAA ✓
Best text color
#000000 on #63A29A
7.17:1 — WCAG AA (normal text) passes
Contrast matrix
| fg \ bg | ##63A29A | #FFFFFF | #000000 | ##000000 |
|---|---|---|---|---|
| ##63A29A | 1.00 | 2.93 | 7.17 | 7.17 |
| #FFFFFF | 2.93 | 1.00 | 21.00 | 21.00 |
| #000000 | 7.17 | 21.00 | 1.00 | 1.00 |
| ##000000 | 7.17 | 21.00 | 1.00 | 1.00 |
Color blindness preview
Protanopia (red-blind)
#9C9C9A
Deuteranopia (green-blind)
#91939B
Tritanopia (blue-blind)
#4BA59F
Achromatopsia (no color)
#979797
Design tokens & code
CSS
--color: #63a29a; /* rgb */ color: rgb(99, 162, 154); /* oklch */ color: oklch(66.7% 0.066 185.5);
Tailwind
colors: {
custom: {
50: '#92bdb7',
500: '#63a29a',
950: '#000000',
},
}SCSS
$custom: #63a29a; $custom-light: #92bdb7; $custom-dark: #000000;
JSON
{
"hex": "#63a29a",
"rgb": {
"r": 99,
"g": 162,
"b": 154
},
"hsl": {
"h": 172.381,
"s": 25.301,
"l": 51.176
},
"oklch": {
"l": 0.66729,
"c": 0.06632,
"h": 185.5
},
"luminance": 0.30826
}Semantic roles & 50–950 ramp
primary
#63A29A
secondary
#BEA2A6
accent
#6672C2
background
#F9FBFB
surface
#F1F6F6
border
#CBD0D0
text
#0D1211
muted
#7E8180