Teal Color

Teal — The Color of Calm and Modernity

#008080Teal

Color Values

HEX#008080

RGBrgb(0, 128, 128)

HSLhsl(180°, 100%, 25%)

CSSteal

Shade Palette

#E0F7FA

100

#B2EBF2

300

#4DD0E1

500

#00ACC1

700

#00838F

900

#004D40

Complementary Color

↔

#800000

Maroon

Analogous Colors

#009080

Persian Green

#007070

Dark Teal

CSS Usage

CSS

/* By name */
color: teal;
background-color: teal;

/* By HEX */
color: #008080;
background-color: #008080;

/* By RGB */
color: rgb(0, 128, 128);

/* By HSL */
color: hsl(180deg, 100%, 25%);

/* With opacity */
color: rgba(0, 128, 128, 0.8);
color: hsl(180deg 100% 25% / 80%);

CSS `teal` (#008080) is quite dark. For brighter, more modern teal use #0D9488 (Tailwind teal-600) or #14B8A6 (Tailwind teal-500). For text on white backgrounds, #0F766E (Tailwind teal-700) meets WCAG AA.

Teal (#008080) sits exactly between blue and green, combining the calm trustworthiness of blue with the freshness of green. It conveys sophistication, balance, clarity, and innovation. Teal is widely used in healthcare, technology, and environmental design. It pairs beautifully with neutral backgrounds and its complementary color maroon creates striking high-contrast combinations. Material Design includes teal as a core palette color, cementing its place in modern UI systems.