Teal Color

About teal

#008080 is the CSS named color teal, one of the original 16 HTML colors. It is a half-intensity cyan: green and blue at 128, red at 0. The name comes from the colored band around the eye of the common teal duck.

Teal is darker and more muted than turquoise (#40E0D0) and cyan (#00FFFF). darkcyan (#008B8B) is almost identical, just a little brighter.

#008080 is the value of the CSS named color teal, defined in the CSS Color specification and identical in every browser.

Other colors called teal

• Dark cyan (CSS) #008B8BNearly identical, marginally lighter.Copy
• Turquoise (CSS) #40E0D0A much brighter blue-green.Copy

Teal shades and tints

Shades mix teal with black, tints mix it with white — useful for hover states, borders and backgrounds. Click a swatch to copy its HEX code.

Colors that go with teal

Color harmonies based on the hue of #008080: its complement on the opposite side of the color wheel, its analogous neighbours and its triadic partners.

Teal contrast and readability

On a teal background, white text reads best (4.77:1). Here is how teal works as a text color:

Teal is dark enough for white text and readable as text on white, which makes it a versatile brand and button color. It pairs well with coral, orange and warm neutrals.

Using teal in CSS and HTML

:root {
  --color-teal: #008080;
}

.highlight {
  background-color: var(--color-teal);
}

.banner {
  background-color: teal;
  color: #ffffff;
}

.label {
  color: #008080;
  border: 2px solid rgb(0, 128, 128);
}

<p style="background-color: #008080; color: #FFFFFF;">
  Teal background
</p>