Shades of Teal | Colormapped

Shades of Teal color ramp

These swatches are generated from one base hue using fixed HSL lightness steps. They are computed references, not official color names.

#E5FFFF HSL lightness 95%

#B3FFFF HSL lightness 85%

#80FFFF HSL lightness 75%

#4DFFFF HSL lightness 65%

#1AFFFF HSL lightness 55%

#00E5E6 HSL lightness 45%

#00B2B3 HSL lightness 35%

#007F80 HSL lightness 25%

#004C4D HSL lightness 15%

Base reference: #008080. Use the Tints and Shades Generator when you need a ramp based on a specific project color.

Common CSS teal, cyan, and turquoise colors

Teal sits between blue and green, so nearby CSS keywords include cyan-leaning, turquoise, and muted blue-green values.

ColorCSS keywordHEX

Light Cyan lightcyan #E0FFFF

Pale Turquoise paleturquoise #AFEEEE

Aquamarine aquamarine #7FFFD4

Turquoise turquoise #40E0D0

Medium Turquoise mediumturquoise #48D1CC

Dark Turquoise darkturquoise #00CED1

Light Sea Green lightseagreen #20B2AA

Cadet Blue cadetblue #5F9EA0

Dark Cyan darkcyan #008B8B

Teal teal #008080

Named-color values above use the standardized CSS sRGB keywords documented by MDN. The list is curated for this color family; it is not a perceptually uniform scale.

Teal sits between blue and green, so small hue changes can push it toward cyan, turquoise, or green. This ramp keeps the teal hue relationship stable while changing lightness in fixed steps.

A mid or dark teal can provide strong contrast with light text, while pale teal often works better as a background or subtle state color. Use exact contrast measurements for the final pair because “teal” by itself does not imply an accessibility level.

Useful next steps

Try a specific color in the Tints and Shades Generator, or browse other shade families.