Turquoise color (#40E0D0)
Turquoise is one of the 148 CSS named colors. Use the keyword turquoise
anywhere CSS accepts a color, or its hex code #40E0D0, which is rgb(64, 224, 208) in RGB.
It is a light, vivid cool color with a hue angle of 174° on the HSL color wheel and a perceived lightness of 82% in OKLCH. On a turquoise background, black text gives the higher contrast at 12.79:1, which passes WCAG AA for normal text.
Turquoise color codes
| CSS name | turquoise |
|
|---|---|---|
| HEX | #40E0D0 |
|
| HEX (8-digit) | #40E0D0FF |
|
| RGB | rgb(64, 224, 208) |
|
| HSL | hsl(174, 72%, 57%) |
|
| HSV / HSB | hsv(174, 71%, 88%) |
|
| OKLCH | oklch(82.2% 0.1307 185.1) |
|
| CMYK | cmyk(71.4%, 0%, 7.1%, 12.2%) |
Contrast with white and black
WCAG 2 contrast ratios and APCA lightness contrast (Lc) for turquoise used as text and as a background.
Tints and shades of turquoise
Tints mix turquoise with white; shades mix it with black, in 10% steps. Click a swatch to copy it, or build custom scales in the tint & shade generator.
Tints
Shades
Colors that go with turquoise
Harmonies calculated on the HSL color wheel. Explore more in the color scheme generator.
Complementary
Analogous
Triadic
Split-Complementary
Turquoise with color blindness
Approximately how turquoise appears with each type of color vision deficiency. Test full designs with the color blindness simulator.
Using turquoise in CSS
.element {
color: turquoise;
background-color: #40e0d0;
border-color: rgb(64 224 208 / 50%);
outline-color: oklch(82.2% 0.1307 185.1);
}Similar named colors
See all shades of cyan or browse every CSS color name.