Teal Color — HEX, RGB, HSL, Palettes & Contrast

Teal (#008080): Complete color reference with HEX, RGB, HSL values, tints & shades, complementary, analogous, triadic, split-complementary, and tetradic palettes, WCAG contrast recommendations, and ready-to-use CSS code.

#008080
HEX #008080
RGB rgb(0, 128, 128)
HSL 180°, 100%, 25%

Use Teal in Your Projects

🎨 Open in Color Picker 🌈 Generate Palette 👁️ Check Contrast 🔄 Convert Color 🌊 Use in Gradient

About Teal Color

Teal blends blue's stability with green's renewal. It feels modern, fresh, and sophisticated — ideal for tech startups and health brands.

Use Cases for Teal

tech brandinghealthcaremodern UImeditation appsenvironmental themes

Shades & Tints of Teal

#ffffff
#bfdfdf
#80c0c0
#40a0a0
#008080
#006060
#004040
#002020
#000000

Complementary Color

#008080
#800000

Analogous Colors

#008040
#008080
#004080

Triadic Colors

#008080
#800080
#808000

Split Complementary

#008080
#800040
#804000

Tetradic Colors

#008080
#000080
#800000
#808000

CSS Code

.teal-color {
  color: #008080;
  background-color: #008080;
}

/* As a CSS custom property */
:root {
  --color-teal: #008080;
}

Accessibility Score

75 / 100
Rating: Good
✓ AA contrast on best text color (30 pts)
✗ AAA contrast on best text color (25 pts)
✓ Versatile lightness for backgrounds & text (25 pts)
✓ Not extreme black/white (20 pts)

A combined score based on WCAG contrast compliance, lightness versatility, and usable range. Higher scores mean the color works well in more design contexts.

Contrast Recommendations

Black text on Teal
Ratio: 4.4:1 ✗ Fails AA ✗ Fails AAA
White text on Teal
Ratio: 4.77:1 ✓ Passes AA ✗ Fails AAA

Related Colors

DarkCyan
CadetBlue
LightSeaGreen
Turquoise
MediumTurquoise

Related Tools

Frequently Asked Questions

What color is Teal?

Teal is represented by the hex code #008080 and has RGB values of rgb(0, 128, 128). It falls under the Teal category.

How to use Teal in web design?

Teal works well for tech branding, healthcare, modern UI. Teal blends blue's stability with green's renewal. It feels modern, fresh, and sophisticated — ideal for tech startups and health brands. Use it as a primary color, accent, or background depending on your design needs.

What colors go with Teal?

Colors that pair well with Teal include darkcyan, cadetblue, lightseagreen, turquoise, mediumturquoise. For a complementary scheme, try #800000. For an analogous scheme, use #008040 and #004080. For a triadic scheme, combine with #800080 and #808000.