#63ADA2#63ADA2
#63ADA2 is a light, moderate teal. Relative luminance 0.351; OKLCH L 69.6% C 0.076 H 183.5°. Best body text is #000000 at 8.03:1 contrast (WCAG AA passes).
Color values
| HEX | #63ADA2 |
|---|---|
| RGB | rgb(99, 173, 162) |
| HSL | hsl(171, 31%, 53%) |
| HSV | hsv(171, 43%, 68%) |
| CMYK | cmyk(42.8%, 0%, 6.4%, 32.2%) |
| CIE-LAB | lab(65.86, -25.77, -1.57) |
| CIE-LCH | lch(65.86, 25.82, 183.48°) |
| OKLab | oklab(69.62% -0.0761 -0.0046) |
| OKLCH | oklch(69.62% 0.076 183.5) |
| XYZ | xyz(26.6082, 35.1464, 39.5572) |
| Luminance | 0.3515 (WCAG relative) |
| Temperature | cool |
| Family | teal |
Closest named colors
Dull Teal
#5F9E8F
ΔE00 4.95
Lightseagreen
#20B2AA
ΔE00 5.57
Greyish Teal
#719F91
ΔE00 5.85
Grey Teal
#5E9B8A
ΔE00 6.20
Topaz
#13BBAF
ΔE00 6.72
Cadetblue
#5F9EA0
ΔE00 6.96
Perceptual scales
Shades
Tints
Tones
OKLCH scale
Color harmonies
complementary
#63ADA2 #AD636E
analogous
#63AD7D #63ADA2 #6393AD
triadic
#63ADA2 #A263AD #ADA263
tetradic
#63ADA2 #7D63AD #AD636E #93AD63
square
#63ADA2 #7D63AD #AD636E #93AD63
split-complementary
#63ADA2 #AD6393 #AD7D63
monochromatic
#34625B #498A80 #63ADA2 #8BC2BA #B3D7D2
Accessibility & contrast
On white
2.62
#63ADA2 on #FFFFFF
AA ✗AA large ✗AAA ✗
On black
8.03
#63ADA2 on #000000
AA ✓AA large ✓AAA ✓
Best text color
#000000 on #63ADA2
8.03:1 — WCAG AA (normal text) passes
Contrast matrix
| fg \ bg | ##63ADA2 | #FFFFFF | #000000 | ##000000 |
|---|---|---|---|---|
| ##63ADA2 | 1.00 | 2.62 | 8.03 | 8.03 |
| #FFFFFF | 2.62 | 1.00 | 21.00 | 21.00 |
| #000000 | 8.03 | 21.00 | 1.00 | 1.00 |
| ##000000 | 8.03 | 21.00 | 1.00 | 1.00 |
Color blindness preview
Protanopia (red-blind)
#A7A5A2
Deuteranopia (green-blind)
#9A9CA3
Tritanopia (blue-blind)
#45B0A9
Achromatopsia (no color)
#A0A0A0
Design tokens & code
CSS
--color: #63ada2; /* rgb */ color: rgb(99, 173, 162); /* oklch */ color: oklch(69.6% 0.076 183.5);
Tailwind
colors: {
custom: {
50: '#94c5bd',
500: '#63ada2',
950: '#000000',
},
}SCSS
$custom: #63ada2; $custom-light: #94c5bd; $custom-dark: #000000;
JSON
{
"hex": "#63ada2",
"rgb": {
"r": 99,
"g": 173,
"b": 162
},
"hsl": {
"h": 171.081,
"s": 31.092,
"l": 53.333
},
"oklch": {
"l": 0.6962,
"c": 0.07622,
"h": 183.5
},
"luminance": 0.35148
}Semantic roles & 50–950 ramp
primary
#63ADA2
secondary
#C6A6AB
accent
#6170C7
background
#F9FCFB
surface
#F2F8F6
border
#CCD1D0
text
#0D1312
muted
#7E8281