Teal color: code #008080

Teal

#008080

Color codes

  • HEX#008080
  • RGBrgb(0, 128, 128)
  • HSLhsl(180, 100%, 25%)
  • HSVhsv(180, 100%, 50%)
  • CMYKcmyk(100%, 0%, 0%, 50%)
  • LABlab(48.3% -28.9 -8.5)
  • OKLCHoklch(54.3% 0.093 194.8)

About the color Teal

Teal has the HEX code #008080, which corresponds to rgb(0, 128, 128) in the RGB model. On the color wheel its hue sits at 180°, with 100% saturation and 25% lightness (hsl(180, 100%, 25%)).

Because of its hue it reads as a cool color: it tends to feel calm and distant, and it visually “recedes” in a composition.

As a background it calls for light text: white reaches a 4.77:1 contrast ratio on it, versus 4.39:1 for black.

For print, the approximate conversion is cmyk(100%, 0%, 0%, 50%). Always confirm with your printer’s color profile, because the result depends on paper and ink.

Lighter tints

Darker shades

Color combinations with Teal

Complementary

#008080 · #800000

Analogous

#008040 · #008080 · #004080

Triadic

#008080 · #800080 · #808000

Tetradic

#008080 · #400080 · #800000 · #408000

Split-complementary

#008080 · #800040 · #804000

Monochromatic

#000000 · #004D4D · #008080 · #00CCCC · #1AFFFF

Teal with white and black text

White text Aa Bb Cc 123
4.77:1 · AA
Black text Aa Bb Cc 123
4.39:1 · large text only

Test other pairs in the contrast checker

Teal, turquoise or petrol blue?

#008080 is CSS teal: half-intensity green and blue with no red at all. The name comes from the Eurasian teal duck, whose head has a stripe of this color. In stores, “teal” gets stretched to cover anything from aqua to dark peacock, which causes trouble when you order paint, fabric or print. This table separates the three shades people mix up most:

ColorHEXHow it behaves
Teal#008080An even balance of green and blue at mid lightness.
Petrol blue#005F6ADarker and bluer, close to sober.
Turquoise#40E0D0Same family, much lighter and brighter.

If all you have is a photo or screenshot, grab the exact code with the image color picker before you place the order.

Where teal works well

Branding and interfaces

Teal feels trustworthy without the chill of navy, which is why it shows up in healthcare, personal finance and tech. In a UI it makes a solid primary color for buttons and links, as long as you watch the contrast (see below).

Fashion and interiors

In clothing it is a true all-season shade: a teal dress or blazer works in summer and fall alike. At home it looks rich in velvet, tile and accent walls, especially next to warm wood and brass.

Pairings that work

Contrast and print

#008080 sits right on the line: white text reaches about 4.8:1 and black text about 4.4:1. So white passes the WCAG AA minimum of 4.5:1 for body text and black does not. For small labels, choose white or darken the background a few steps.

A naive CMYK conversion turns teal into roughly C100 M0 Y0 K50, but the printed result usually looks duller than on screen. Ask for a proof and read the RGB vs CMYK guide before sending files to print.

How to use it in CSS

:root {
  --color-teal: #008080;
  --color-teal-rgb: 0, 128, 128;
}

.elemento {
  background-color: var(--color-teal);
  color: #FFFFFF;
}

Similar colors

Use Teal in our tools