Skip to content
ColorPlum

Colors · value from the CSS Color Module Level 4 (W3C)

Teal color: hex code #008080, RGB and palettes

Teal is #008080 (RGB 0, 128, 128), a CSS named color: a dark blue-green made from equal green and blue. It passes AA as text on white at 4.77:1; white text on it is the same 4.77:1.

By Paul Gunder. Every value is computed from published standards; see how ColorPlum works.

Updated

ColorPlum swatchTealdark, moderately saturated cyan
HEX
#008080
RGB
rgb(0, 128, 128)
HSL
hsl(180, 100%, 25%)

Best text on it: white at 4.77:1

Copy codes as
Build a paletteMake a gradientCheck contrastWallpaper

Every code for Teal

  • HEX#008080
  • RGBrgb(0, 128, 128)
  • HSLhsl(180, 100%, 25%)
  • HSV180°, 100%, 50%
  • CMYK100%, 0%, 0%, 50%
  • Lablab(48% -30.4 -9)
  • OKLCHoklch(54.3% 0.093 194.8)
  • Decimal32896

Tints, shades and tones

From white to black in 10% steps, with Teal in the middle. Tap a code to copy it.

  1. 90%#E6F2F2
  2. 80%#CCE6E6
  3. 70%#B3D9D9
  4. 60%#99CCCC
  5. 50%#80C0C0
  6. 40%#66B3B3
  7. 30%#4DA6A6
  8. 20%#339999
  9. 10%#1A8D8D
  10. Base#008080
  11. 10%#007373
  12. 20%#006666
  13. 30%#005A5A
  14. 40%#004D4D
  15. 50%#004040
  16. 60%#003333
  17. 70%#002626
  18. 80%#001A1A
  19. 90%#000D0D

Tones (mixed with gray)

  1. 10%#0D8080
  2. 20%#1A8080
  3. 30%#268080
  4. 40%#338080
  5. 50%#408080
  6. 60%#4D8080
  7. 70%#5A8080
  8. 80%#668080
  9. 90%#738080

Matching colors

Complementary
Analogous
Triadic
Split complementary
Tetradic (square)
Monochromatic
  • #001414
  • #003434
  • #008080
  • #00CCCC
  • #1AFFFF

Teal in 3D color space

OKLab, the space ColorPlum does its math in: lightness runs up the pole, hue goes around it and saturation grows outward. The faint shell is every color a screen can show (saturation is drawn wider than lightness so hues separate). Drag to turn it.

Teal with its complement, its triad and its tint and shade
  • Teal
  • Triad #800080
  • Triad #808000
  • Complement
  • 50% tint
  • 50% shade

Teal in use

New collectionAutumn edit

Card body text stays dark for reading; teal carries the header and the button.

Shop nowTag

Headline in Teal

A paragraph with a link set in this color, which is dark enough for text on white.

How it looks with color-vision deficiency

A simulation (Machado and colleagues, 2009) of how the color and its complement read without one type of cone.

  • Typical color vision#008080
  • Protanopia (no red cones)#777980
  • Deuteranopia (no green cones)#676E81
  • Tritanopia (no blue cones)#008580

Contrast and readability

PairingRatioWCAG 2.2
as text on white4.77:1AA AA large AAA
as text on black4.39:1AA AA large AAA
white text on it4.77:1AA AA large AAA
black text on it4.39:1AA AA large AAA
on your background4.16:1AA AA large AAA

Export

:root {
  --teal: #008080;
  --teal-rgb: 0 128 128;
  --teal-on: #ffffff;
}
On this page

Teal is a CSS keyword defined as #008080. The name is generally linked to the colored patch on the head of the teal duck, and the color sits between green and blue. In CSS it is built very simply: no red, and green and blue each at half strength.

What the codes mean

In RGB, teal is 0, 128, 128. Because green and blue match, the hue lands exactly halfway around the wheel at 180° in HSL, with 100% saturation and 25% lightness. The CMYK estimate is 100%, 0%, 0%, 50%, which is cyan darkened by half. The wheel position makes teal the complement of CSS maroon (#800000), and the two make a rich classic pair.

The xkcd survey disagrees with CSS here. Its "teal" is #029386, which is greener and brighter, and sits 5.8 away in OKLab distance. If you want the CSS color, use #008080. If you picked teal from a survey or a design tool, check the hex code, because the two can look quite different side by side. Close CSS relatives are darkcyan (#008B8B), 3.4 away, and seagreen, 8.0 away. The survey's "bluegreen" (#017A79) is within 1.9 of CSS teal.

Using teal well

  • Text on it: white measures 4.77:1, clearing AA at 4.5:1. Black on teal is 4.39:1, which is a little under.
  • As text: teal on white also gives 4.77:1, so it works for links and headings. On ghost white (#F8F8FF) it drops to 4.51:1, just above the line.
  • Tints: the 80% tint, #CCE6E6, is a calm panel color. The text color on that panel needs checking: teal on #E6F2F2 (the 90% tint) is 4.17:1, which fails AA for small text.
  • Pairings: coral, mustard, cream and maroon are common partners.

Worked example

A neighborhood nonprofit wants its website links in teal instead of default blue. On a white page, teal links at 4.77:1 pass the 4.5:1 AA minimum, but only by a small margin, so don't make them lighter. Put the footer on the 90% tint (#E6F2F2): teal links there measure 4.17:1, so switch them to the 40% shade, #004D4D, for that area. Use "Try a background" above with each color and watch the ratio change. For buttons, a teal fill with white text is fine for the label, and the focus ring can use the darker shade.

Teal versus turquoise

Turquoise is brighter and lighter, teal is darker and deeper. People also say "blue-green" or "cyan" for neighbors. If you need more variation on the same hue, the shade and tint generator builds a whole ladder, and the color wheel shows what sits across from it.

Sources

  1. W3C, CSS Color Module Level 4: named colors and color conversions (checked 2026-11-10) w3.org
  2. xkcd, Color survey results: the 954 most common color names (Randall Munroe, 2010; checked 2026-11-10) xkcd.com
  3. W3C, Web Content Accessibility Guidelines (WCAG) 2.2: contrast minimum (checked 2026-11-10) w3.org