#63CFCC#63CFCC
#63CFCC is a light, moderate teal. Relative luminance 0.516; OKLCH L 79.0% C 0.100 H 192.9°. Best body text is #000000 at 11.33:1 contrast (WCAG AA passes).
Color values
| HEX | #63CFCC |
|---|---|
| RGB | rgb(99, 207, 204) |
| HSL | hsl(178, 53%, 60%) |
| HSV | hsv(178, 52%, 81%) |
| CMYK | cmyk(52.2%, 0%, 1.4%, 18.8%) |
| CIE-LAB | lab(77.06, -31.65, -8.00) |
| CIE-LCH | lch(77.06, 32.64, 194.19°) |
| OKLab | oklab(79.04% -0.097 -0.0222) |
| OKLCH | oklch(79.04% 0.1 192.9) |
| XYZ | xyz(38.3529, 51.6343, 65.0603) |
| Luminance | 0.5164 (WCAG relative) |
| Temperature | cool |
| Family | teal |
Closest named colors
Mediumturquoise
#48D1CC
ΔE00 2.29
Darkturquoise
#00CED1
ΔE00 4.24
Turquoise
#40E0D0
ΔE00 6.46
Aqua Blue
#02D8E9
ΔE00 7.23
Topaz
#13BBAF
ΔE00 7.76
Seafoam Blue
#78D1B6
ΔE00 8.84
Perceptual scales
Shades
Tints
Tones
OKLCH scale
Color harmonies
complementary
#63CFCC #CF6366
analogous
#63CF96 #63CFCC #639CCF
triadic
#63CFCC #CC63CF #CFCC63
tetradic
#63CFCC #9663CF #CF6366 #9CCF63
square
#63CFCC #9663CF #CF6366 #9CCF63
split-complementary
#63CFCC #CF639C #CF9663
monochromatic
#2B8C8A #3ABBB8 #63CFCC #92DDDB #C1ECEB
Accessibility & contrast
On white
1.85
#63CFCC on #FFFFFF
AA ✗AA large ✗AAA ✗
On black
11.33
#63CFCC on #000000
AA ✓AA large ✓AAA ✓
Best text color
#000000 on #63CFCC
11.33:1 — WCAG AA (normal text) passes
Contrast matrix
| fg \ bg | ##63CFCC | #FFFFFF | #000000 | ##000000 |
|---|---|---|---|---|
| ##63CFCC | 1.00 | 1.85 | 11.33 | 11.33 |
| #FFFFFF | 1.85 | 1.00 | 21.00 | 21.00 |
| #000000 | 11.33 | 21.00 | 1.00 | 1.00 |
| ##000000 | 11.33 | 21.00 | 1.00 | 1.00 |
Color blindness preview
Protanopia (red-blind)
#C4C6CC
Deuteranopia (green-blind)
#B2B9CD
Tritanopia (blue-blind)
#03D4CE
Achromatopsia (no color)
#BEBEBE
Design tokens & code
CSS
--color: #63cfcc; /* rgb */ color: rgb(99, 207, 204); /* oklch */ color: oklch(79.0% 0.100 192.9);
Tailwind
colors: {
custom: {
50: '#98dedb',
500: '#63cfcc',
950: '#000000',
},
}SCSS
$custom: #63cfcc; $custom-light: #98dedb; $custom-dark: #000000;
JSON
{
"hex": "#63cfcc",
"rgb": {
"r": 99,
"g": 207,
"b": 204
},
"hsl": {
"h": 178.333,
"s": 52.941,
"l": 60
},
"oklch": {
"l": 0.79043,
"c": 0.09953,
"h": 192.9
},
"luminance": 0.51638
}Semantic roles & 50–950 ramp
primary
#63CFCC
secondary
#934346
accent
#4B4FDC
background
#FCFEFE
surface
#F5FCFB
border
#CFD5D4
text
#0F1515
muted
#808484