#36CFCF#36CFCF
#36CFCF is a light, vivid teal. Relative luminance 0.499; OKLCH L 77.9% C 0.122 H 194.9°. Best body text is #000000 at 10.98:1 contrast (WCAG AA passes).
Color values
| HEX | #36CFCF |
|---|---|
| RGB | rgb(54, 207, 207) |
| HSL | hsl(180, 61%, 51%) |
| HSV | hsv(180, 74%, 81%) |
| CMYK | cmyk(73.9%, 0%, 0%, 18.8%) |
| CIE-LAB | lab(76.01, -37.92, -11.30) |
| CIE-LCH | lch(76.01, 39.57, 196.59°) |
| OKLab | oklab(77.9% -0.1178 -0.0314) |
| OKLCH | oklch(77.9% 0.122 194.9) |
| XYZ | xyz(35.0914, 49.9106, 66.8036) |
| Luminance | 0.4991 (WCAG relative) |
| Temperature | cool |
| Family | teal |
Closest named colors
Darkturquoise
#00CED1
ΔE00 1.41
Mediumturquoise
#48D1CC
ΔE00 1.89
Aqua Blue
#02D8E9
ΔE00 5.89
Turquoise
#40E0D0
ΔE00 6.57
Topaz
#13BBAF
ΔE00 7.09
Lightseagreen
#20B2AA
ΔE00 8.42
Perceptual scales
Shades
Tints
Tones
OKLCH scale
Color harmonies
complementary
#36CFCF #CF3636
analogous
#36CF82 #36CFCF #3682CF
triadic
#36CFCF #CF36CF #CFCF36
tetradic
#36CFCF #8236CF #CF3636 #82CF36
square
#36CFCF #8236CF #CF3636 #82CF36
split-complementary
#36CFCF #CF3682 #CF8236
monochromatic
#1B7070 #27A1A1 #36CFCF #67DBDB #99E7E7
Accessibility & contrast
On white
1.91
#36CFCF on #FFFFFF
AA ✗AA large ✗AAA ✗
On black
10.98
#36CFCF on #000000
AA ✓AA large ✓AAA ✓
Best text color
#000000 on #36CFCF
10.98:1 — WCAG AA (normal text) passes
Contrast matrix
| fg \ bg | ##36CFCF | #FFFFFF | #000000 | ##000000 |
|---|---|---|---|---|
| ##36CFCF | 1.00 | 1.91 | 10.98 | 10.98 |
| #FFFFFF | 1.91 | 1.00 | 21.00 | 21.00 |
| #000000 | 10.98 | 21.00 | 1.00 | 1.00 |
| ##000000 | 10.98 | 21.00 | 1.00 | 1.00 |
Color blindness preview
Protanopia (red-blind)
#C1C5CF
Deuteranopia (green-blind)
#ABB5D0
Tritanopia (blue-blind)
#00D6CF
Achromatopsia (no color)
#BBBBBB
Design tokens & code
CSS
--color: #36cfcf; /* rgb */ color: rgb(54, 207, 207); /* oklch */ color: oklch(77.9% 0.122 194.9);
Tailwind
colors: {
custom: {
50: '#86dedd',
500: '#36cfcf',
950: '#000000',
},
}SCSS
$custom: #36cfcf; $custom-light: #86dedd; $custom-dark: #000000;
JSON
{
"hex": "#36cfcf",
"rgb": {
"r": 54,
"g": 207,
"b": 207
},
"hsl": {
"h": 180,
"s": 61.446,
"l": 51.176
},
"oklch": {
"l": 0.77903,
"c": 0.12191,
"h": 194.9
},
"luminance": 0.49915
}Semantic roles & 50–950 ramp
primary
#36CFCF
secondary
#D28F8F
accent
#4343E5
background
#F9FDFD
surface
#F1FBFB
border
#CBD4D4
text
#0D1515
muted
#7E8383