HCHTML Color

Shades of teal

Teal and cyan sit between green and blue. They feel calm and technical at the same time, which is why they are popular in health, fintech and developer tools.

teal · #008080

13 teal color names

Every CSS named color in the teal family, lightest to darkest. Each name works directly in CSS. Open any swatch for its full conversions, 50–950 scale and harmonies.

lightcyan#e0ffffrgb(224 255 255)oklch(0.978 0.032 196.6)aquamarine#7fffd4rgb(127 255 212)oklch(0.915 0.13 169)paleturquoise#afeeeergb(175 238 238)oklch(0.907 0.063 196.1)cyan#00ffffrgb(0 255 255)oklch(0.905 0.155 194.8)turquoise#40e0d0rgb(64 224 208)oklch(0.822 0.131 185.1)mediumturquoise#48d1ccrgb(72 209 204)oklch(0.787 0.116 191.6)mediumaquamarine#66cdaargb(102 205 170)oklch(0.777 0.11 168.8)darkturquoise#00ced1rgb(0 206 209)oklch(0.772 0.131 196.6)lightseagreen#20b2aargb(32 178 170)oklch(0.691 0.114 189)cadetblue#5f9ea0rgb(95 158 160)oklch(0.658 0.065 198.3)darkcyan#008b8brgb(0 139 139)oklch(0.577 0.098 194.8)teal#008080rgb(0 128 128)oklch(0.543 0.093 194.8)darkslategray#2f4f4frgb(47 79 79)oklch(0.403 0.038 195.8)

Tailwind teal scales

The Tailwind v4 default palette families closest to teal, 50 to 950.

Using teal in a UI

Teal works well as a secondary accent next to a blue or violet primary. Its mid shades hold chroma well inside sRGB, so OKLCH ramps stay vivid.

teal-colors.css
:root {
  --lightcyan: oklch(0.978 0.032 196.6); /* #e0ffff */
  --aquamarine: oklch(0.915 0.13 169); /* #7fffd4 */
  --paleturquoise: oklch(0.907 0.063 196.1); /* #afeeee */
  --cyan: oklch(0.905 0.155 194.8); /* #00ffff */
  --turquoise: oklch(0.822 0.131 185.1); /* #40e0d0 */
  --mediumturquoise: oklch(0.787 0.116 191.6); /* #48d1cc */
  --mediumaquamarine: oklch(0.777 0.11 168.8); /* #66cdaa */
  --darkturquoise: oklch(0.772 0.131 196.6); /* #00ced1 */
  --lightseagreen: oklch(0.691 0.114 189); /* #20b2aa */
  --cadetblue: oklch(0.658 0.065 198.3); /* #5f9ea0 */
  --darkcyan: oklch(0.577 0.098 194.8); /* #008b8b */
  --teal: oklch(0.543 0.093 194.8); /* #008080 */
  --darkslategray: oklch(0.403 0.038 195.8); /* #2f4f4f */
}
Generate a teal scaleBuild a palette

Frequently asked questions

What is the hex code for teal?
The CSS keyword teal is #008080, which is rgb(0 128 128) or oklch(0.543 0.093 194.8). Tailwind's teal-500 is #00BBA7, a softer teal that many design systems use instead.
How many shades of teal have CSS color names?
This page lists 13 CSS named colors in the teal family, from lightcyan (#E0FFFF) at the light end to darkslategray (#2F4F4F) at the dark end. Every one can be used directly in CSS by name.
What colors go well with teal?
Teal pairs well with red, orange and gray. For a guaranteed match, open any teal shade and use its complementary, analogous or triadic palette, all calculated in OKLCH.
How do I make a teal color scale for my design system?
Pick a teal you like on this page, open it in the color scale generator, and export an 11-step 50–950 ramp as CSS variables, JSON or a Tailwind v4 theme. The ramp is built in OKLCH, so every step looks evenly spaced.

Other color families

RedOrangeYellowGreenBluePurplePinkBrownGrayWhite