# Teal color meaning and why brands love it

[Canonical HTML page](https://gradiently.design/guide/teal-color-meaning)

Teal does two jobs at once: it calms like blue and refreshes like green. That double meaning, and the fact it isn't plain blue, is why so many health, money and tech brands reach for it.

## The short version

- The teal color meaning combines blue's calm, clarity and trust with green's renewal, health and balance.
- Teal takes its name from the common teal, a small duck whose males have an iridescent green eye patch.
- The CSS named colour teal is #008080, a mid blue green made of equal green and blue with no red.
- Brands choose teal because it feels trustworthy like blue while standing apart from the many brands that already use blue.
- Orange and coral are teal's natural complements, which is why teal and orange is such a common pairing in film and design.

The **teal color meaning** is calm with a pulse: it pairs blue's trust, clarity and composure with green's renewal, health and balance. Teal reads as fresh but serious, thoughtful but not cold. It also avoids the crowd. A brand that wants the reassurance of blue without looking like every bank and software company has a ready answer in teal, which is a big part of why it shows up across healthcare, finance, wellness and technology.

## Where teal comes from

The colour is named after the common teal, a small dabbling duck whose males carry a broad band of iridescent green from the eye back. The word came into use as a colour name in English in the early twentieth century. On screens, teal means equal amounts of green and blue light and no red; the CSS keyword `teal` is exactly that.

```css
:root {
  /* The CSS named colour */
  --teal: teal; /* #008080, rgb(0 128 128) */

  /* A practical brand scale */
  --teal-100: #ccfbf1;
  --teal-300: #5eead4;
  --teal-500: #14b8a6;
  --teal-700: #0f766e;
  --teal-900: #134e4a;
}
```

The keyword `teal` and a five step scale you can paste into a stylesheet. The 700 step carries white text comfortably.

## Teal color psychology

Most of teal's associations come from water and nature: shallow tropical sea, lagoons, mineral pools and the patina on old copper. Those images make it feel clean, cool, restorative and a little bit precious. Like every colour meaning, these are learned associations rather than rules, and [colour psychology](https://gradiently.design/guide/color-psychology) explains why context shifts them.

| From blue | From green | Teal's own |
| --- | --- | --- |
| Trust | Renewal | Clarity with warmth |
| Calm | Health | Fresh but grown up |
| Competence | Balance | Neither corporate nor rustic |
| Depth | Growth | Modern and gender neutral |

Teal borrows from both parents and ends up with a character of its own.

## Teal shades and what each one says

- Seafoam: #ccfbf1
- Aqua teal: #5eead4
- Bright teal: #14b8a6
- CSS teal: #008080
- Deep teal: #0f766e
- Dark teal: #134e4a
- Abyss: #042f2e
- Dusty teal: #5f8f8a

Light teals feel airy and clinical, dark teals feel rich and quiet, and dusty teal feels like interiors and craft.

- **Seafoam and aqua teal:** freshness, spa, summer, approachability.
- **Bright teal:** energy and optimism with a technical edge; good for apps and dashboards.
- **Deep and dark teal:** confidence, depth and luxury; a strong alternative to navy.
- **Dusty teal:** calm, vintage and handmade; works for homeware, ceramics and cafés.

## Why brands love teal

Teal solves a common branding problem. Blue is the safe choice for anything involving money, health or data, so a lot of competitors already use it. Teal keeps most of blue's credibility and adds a sense of care and freshness, which is exactly the tone a clinic, a pension app or a wellbeing service wants. It is also free of the strong gender coding that pink and some blues carry.

There are places where teal is a weaker fit. If your whole category already leans teal, as some wellness and dental markets do, it stops being distinctive and you need a second signature element. Very bright teal can also feel young and techy, which may jar for a heritage law firm or a funeral director. In those cases a dusty or very dark teal keeps the calm without the start-up feel. [How to choose brand colours](https://gradiently.design/guide/how-to-choose-brand-colors) has a fuller method.

Square clinic post on a calm teal gradient announcing same day appointments

Teal for a clinic: calm, clean and trustworthy without the chill of hospital blue.

Square finance app post on a deep teal background with the line Your savings, at a glance

Deep teal for a money app: credible like a bank, but warmer and more modern.

## How to build a brand around teal

1. **Decide how light or deep** Light teals feel open and friendly; deep teals feel established. Pick one hero teal and write down its hex, so every file uses exactly the same colour.
2. **Give it a text colour** Check which ink reads on your hero teal. Bright teals want near-black type; deep teals take white.
3. **Add a warm accent** One coral, orange or gold used in small doses stops a teal palette feeling clinical. Keep it for buttons, prices or a single shape.
4. **Test it in print early** Very bright on-screen teals can print noticeably duller. Ask for a proof before you order packaging or signage; [RGB vs CMYK](https://gradiently.design/guide/rgb-vs-cmyk) explains why.
5. **Carry it into backgrounds** Social posts and slides are where people see a brand most often. A consistent teal background across them does more for recognition than the logo alone.

## Colours that go with teal

Teal's complement sits in the orange and coral range, so warm accents make it glow. That opposition is also behind the familiar teal and orange colour grade in films, where cool shadows set off warm skin. For calmer palettes, keep teal with its neighbours, navy and sage, as in [analogous colours](https://gradiently.design/guide/analogous-colors).

- Teal to orange: `linear-gradient(135deg, #134e4a 0%, #0f766e 50%, #f97316 100%)`
- Seafoam to deep teal: `linear-gradient(160deg, #ccfbf1 0%, #5eead4 50%, #0f766e 100%)`
- Lagoon at night: `radial-gradient(circle at 70% 30%, #14b8a6 0%, #134e4a 50%, #042f2e 100%)`
- Teal and coral: `linear-gradient(135deg, #0f766e 0%, #fb7185 100%)`

Teal with its warm complements and with its own deeper shades. More in [teal gradients](https://gradiently.design/guide/teal-gradient).

### Avoid

- White text on bright teal `#14b8a6`: about 2.5:1
- White text on `#0d9488`: about 3.7:1, still short of 4.5:1
- Teal straight into red, which turns muddy in the middle

### Do

- Near-black text on bright teal, around 8:1
- White text on deep teal `#0f766e`, about 5.5:1
- Blend teal through navy or green, not across the wheel

Check your own pairs with the method in [colour contrast and accessibility](https://gradiently.design/guide/color-contrast-accessibility), and see [turquoise gradients](https://gradiently.design/guide/turquoise-gradient) if you want a brighter, sunnier version of the same family. When you want a teal look that is yours alone, search the Gradiently Market for "deep teal": each Mark has one owner at a time and keeps your text readable as it moves.

## FAQ

### What does the color teal mean?

Teal means calm, clarity and trust from blue, together with renewal, health and balance from green. It reads as fresh and modern but still serious.

### What is the hex code for teal?

The CSS named colour teal is #008080. Brands often use lighter or deeper versions, such as #14b8a6 or #0f766e.

### Is teal blue or green?

Both. Teal is a blue green, made on screen from equal green and blue light with no red.

### What colour goes best with teal?

Orange and coral are its complements and make it glow. Navy, sage, cream and gold give calmer, more elegant pairings.

### What does dark teal symbolise?

Dark teal suggests depth, confidence and quiet luxury. Many brands use it as a warmer, more distinctive alternative to navy.