Skip to content

Teal #008080

Blue’s trust, green’s calm — engineering’s favorite child.

RGB
0, 128, 128
HSL
180°, 100%, 25%
CMYK
100, 0, 0, 50
Luminance
0.1700

About Teal

Teal, #008080, is the exact marriage of blue and green — and inherits the best of both: blue’s credibility, green’s balance, neither’s baggage. Named for the eye-stripe of the teal duck, it became the breakout UI color of the 2010s when every product wanted to feel trustworthy without wearing bank-blue.

History

Teal’s modern fame is architectural and digital: a Windows 95 default desktop, the Miami Vice palette, mid-century American kitchens, and then Material Design, which shipped teal as its default accent and put it on a billion Android screens.

Psychology

Teal reads as clarity, sophistication and calm competence — clinical without coldness, which is why healthcare and fintech products adopted it en masse. It is also the rarest of things: a saturated color that large audiences rate as “restful.”

In design

Deep teals (#0f766e-class) are outstanding primary brand colors with white text (AA-passing); bright teals and aquas serve as accents on dark surfaces. Teal pairs naturally with coral and orange (complement-adjacent energy), gold (premium), and warm grays. This very hub runs violet-to-cyan gradients that lean on teal’s territory.

In culture

Teal is ovarian-cancer awareness, the “teal pumpkin” of allergy-safe Halloween, and — as Tiffany Blue’s close cousin — one of the few color trademarks famous enough to need a lawyer.

Brands that own teal

Shades of teal

Every format

HEX#008080
RGBrgb(0, 128, 128)
HSLhsl(180, 100%, 25%)
CMYKcmyk(100%, 0%, 0%, 50%)
LABlab(48.3 -28.9 -8.5)
LCHlch(48.3 30.1 196.4)
OKLCHoklch(0.543 0.093 194.8)

Copy-ready code

/* CSS */
color: #008080;
background-color: #008080;
/* Tailwind (arbitrary) */
class="text-[#008080] bg-[#008080]"
/* SCSS */
$brand: #008080;
/* SwiftUI */
Color(red: 0.000, green: 0.502, blue: 0.502)
/* Android */
Color.parseColor("#008080")

Accessibility — WCAG contrast

Aa
#008080 on white: 4.77:1
AA ✓ pass · AA-large · AAA
Aa
#008080 on black: 4.40:1
AA ✗ fail · AA-large · AAA
true color
protanopia
deuteranopia
tritanopia

RGB percentages

Red0.0%
Green50.2%
Blue50.2%

CMYK percentages

Cyan100.0%
Magenta0.0%
Yellow0.0%
Key (black)49.8%

Color previews

#008080 text on a black background

contrast 4.40:1

Card sample

#008080 text on a white background

contrast 4.77:1

Card sample

CSS3 live lab

Text font color

The quick brown fox

color: #008080;
Background color
Panel with #008080 background
background-color: #008080;
Text shadow — hex

Glowing headline

text-shadow: 2px 2px 8px #008080;
Text shadow — RGB

Soft neon halo

text-shadow: 0 0 14px rgba(0, 128, 128, 0.45);
Div box shadow
Elevated card
box-shadow: 0 12px 32px -8px rgba(0, 128, 128, 0.45);
Border & gradient
Gradient panel
border: 3px solid #008080;
background: linear-gradient(135deg, #008080, #002B80);

Monochromatic scale

Palettes built from #008080

Shades — darker

Tints — lighter

Hue & tone neighbors

Color harmonies

Nearest named colors

Teal, answered

What is the hex code for teal?

CSS teal is #008080 — equal blue and green at half intensity. Material Design’s teal is #009688; Tiffany Blue trademarks the #0abab5 region.

What is the difference between teal, cyan and turquoise?

Cyan (#00ffff) is the full-intensity blue-green primary; teal is its darker half-intensity form; turquoise (#40e0d0) sits lighter and slightly greener, named after the gemstone.

Why did apps adopt teal in the 2010s?

Material Design shipped it as the default accent, and products wanted blue’s trust without looking like banks — teal delivered both, briefly becoming the most default color in software.

Work with #008080 in the Color Lab