Teal Color Palette: 6 Fresh Schemes with Hex Codes & CSS

Teal is the confident middle ground between blue and green — and one of the most versatile colors in design. A good teal color palette can feel calm and medical-clean, rich and jewel-like, or fresh and tropical depending on how deep you take it. Tech products, spas, finance apps and fashion brands all lean on teal because it reads as both trustworthy (blue's gift) and fresh (green's gift).

Here are six teal palettes with hex codes and copy-paste CSS. For neighbouring hues, see the blue palette guide and green palette guide, or browse the full PaletteCSS library.

What teal communicates

Teal inherits calm and reliability from blue and balance and renewal from green. Deep teals (petrol, pine-teal) feel premium and grounded; bright teals (turquoise, aqua) feel energetic and clean. Because teal is relatively uncommon as a brand color, it also stands out — a teal interface instantly avoids looking like every blue-branded competitor.

• Deep petrol teal — sophisticated, premium, grounding.
• True teal — balanced and modern, the workhorse.
• Turquoise and aqua — bright, fresh, coastal energy.
• Best pairings — coral, gold, cream, charcoal and blush pink.

6 teal color palettes (with hex codes)

1. Classic Teal Scale

A clean ramp from mist to deep petrol.

#E0F2F1 · #80CBC4 · #26A69A · #00796B · #004D40

2. Teal & Coral

The famous complementary duo — cool meets warm.

#E8F6F5 · #2A9D8F · #1B655C · #FF8A6B · #E85D3F

3. Turquoise Coast

Bright, watery and vacation-fresh.

#DFF8F6 · #7FE0D8 · #2EC4B6 · #17847A · #0B4F49

4. Teal & Gold

Jewel-toned luxury for premium brands.

#F4F1E8 · #0F766E · #0A4F4A · #D4A017 · #8D6E00

5. Muted Teal

Dusty, calm and modern — great for UI.

#EBF1F0 · #BCD4D0 · #7FA8A2 · #4E756F · #2C4A45

6. Dark Teal UI

A moody dark-mode base with aqua accents.

#0D2B2A · #14413F · #1F6F6A · #3ECFC2 · #D7F5F1

How to use teal in CSS

:root {
  --teal-50:  #E0F2F1;
  --teal-200: #80CBC4;
  --teal-400: #26A69A;
  --teal-600: #00796B;
  --teal-900: #004D40;
}

.button { background: var(--teal-400); color: #fff; }

A teal gradient feels clean and modern:

.hero {
  background: linear-gradient(135deg, #2EC4B6 0%, #004D40 100%);
}

Tips for designing with teal

• Pair with a warm accent. Coral, peach or gold stops an all-teal design from feeling cold.
• Use deep teal as your "navy". It works everywhere navy does, but feels more distinctive.
• Watch mid-teal text. Colors like #26A69A often fail contrast on white — use the 600–900 range for text.
• Let one teal lead. Pick a hero teal and support it with tints, rather than mixing three unrelated teals.

Frequently asked questions

What is the hex code for teal?

Classic teal is #008080. Popular modern variants include #26A69A (bright), #00796B (deep) and #2EC4B6 (turquoise-leaning).

What colors go with teal?

Teal pairs beautifully with coral, gold, cream, blush pink and charcoal. Coral is its complementary partner and creates the strongest contrast.

Is teal warm or cool?

Teal is a cool color — it sits between blue and green on the color wheel — though warm accents like coral or gold instantly balance it.

Keep exploring: browse teal color palettes, read what colors go with green, or copy a teal gradient in one click.