# Teal gradient: codes from lagoon to deep sea

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

Teal sits exactly between blue and green, which makes it calm, clever and unusually easy to blend. Walk down from the lagoon to the deep sea with codes for every depth.

## The short version

- A teal gradient blends blue green shades, usually from a pale aqua down to a deep green blue.
- Teal blends cleanly with its neighbours: cyan, emerald, blue and navy.
- Warm accents such as coral, peach and copper sit opposite teal and make it glow when kept outside the blend.
- White text needs a teal at least as deep as #0f766e to pass contrast; lighter teals need dark type.
- Very dark teal makes an excellent dark mode ground because it feels softer than black and less expected than navy.

A **teal gradient** runs between blue green shades: pale aqua at the light end, a clear mid teal in the middle and a dark, inky green blue at the bottom. Because teal sits halfway between blue and green, it blends easily towards either side and almost never turns muddy. The codes below follow it down by depth, from a sunny lagoon to the deep sea, with notes on accents, CSS and type for each.

## A teal ladder to build any gradient

Most good teal gradients are two to four steps from this ladder. Pick neighbours for a gentle blend, or skip three rungs for drama. The names below are used through the rest of the article.

- Shallows: #ccfbf1
- Lagoon: #5eead4
- Aqua: #2dd4bf
- Teal: #14b8a6
- Reef: #0d9488
- Kelp: #0f766e
- Deep teal: #115e59
- Abyss: #042f2e

Eight teals from light to dark. Two or three neighbours make a calm blend; light to dark makes depth.

## Light teal gradients: lagoon and shallows

Light teal is clean, fresh and quietly cheerful. It suits wellness, pools and swimwear, dental and health clinics, and any product that wants to feel hygienic without the coldness of pure blue. Run it towards white or towards a pale mint to keep it soft.

- Shallows: `linear-gradient(180deg, #f0fdfa 0%, #99f6e4 100%)`
- Lagoon: `linear-gradient(135deg, #ccfbf1 0%, #5eead4 100%)`
- Sky to lagoon: `linear-gradient(135deg, #e0f2fe 0%, #5eead4 100%)`
- Sunlit pool: `radial-gradient(circle at 30% 20%, #f0fdfa 0%, #99f6e4 45%, #2dd4bf 100%)`

Pale teals that stay fresh. Each keeps a near white stop so dark text has a place to sit.

## Mid teal gradients: reef and jade

The middle of the range is teal at its most confident. These work well for apps, fintech dashboards, sustainability brands and education, because they read as both trustworthy (blue) and alive (green). Leaning towards emerald makes it natural; leaning towards blue makes it technical.

- Reef: `linear-gradient(135deg, #2dd4bf 0%, #0d9488 100%)`
- Jade: `linear-gradient(135deg, #34d399 0%, #0d9488 100%)`
- Cyan to kelp: `linear-gradient(135deg, #22d3ee 0%, #0f766e 100%)`
- Teal to blue: `linear-gradient(120deg, #14b8a6 0%, #0ea5e9 100%)`
- Three step teal: `linear-gradient(160deg, #5eead4 0%, #14b8a6 50%, #0f766e 100%)`

Mid teals pull towards emerald or blue. Choose the direction by what your brand should feel like.

## Dark teal gradients: the deep sea

At the dark end, teal becomes almost black with a cool green breath to it. This is the most sophisticated teal: law firms, spirits, hotels, architecture, evening events. It also makes a superb ground for one bright accent, because nothing about it competes. Dark blends band in compressed exports, so a little grain helps; see [gradient banding](https://gradiently.design/guide/gradient-banding).

- Descent: `linear-gradient(180deg, #0f766e 0%, #042f2e 100%)`
- Light from above: `radial-gradient(circle at 75% 20%, #14b8a6 0%, #115e59 35%, #031d1c 80%)`
- Deep teal to midnight: `linear-gradient(135deg, #134e4a 0%, #0c1f2e 100%)`
- Shaft of light: `radial-gradient(ellipse at 50% 0%, #2dd4bf 0%, #0f4c47 30%, #021614 75%)`

Dark teals with a single source of light. They feel expensive and calm.

## Warm accents for a teal gradient

Teal's opposite on the colour wheel is a warm red orange, so coral, peach, apricot and copper all make it sing. Keep the warm colour out of the blend itself: a teal into coral gradient passes through a dull grey in the middle. Use the accent for a button, a headline or a small shape instead. [Complementary colours](https://gradiently.design/guide/complementary-colors) explains the pull, and [coral gradients](https://gradiently.design/guide/coral-gradient) has codes for the other side.

- Avoid: grey middle: `linear-gradient(90deg, #14b8a6 0%, #fb7185 100%)`
- Copper sun on deep teal: `radial-gradient(circle at 85% 15%, #fb923c 0%, transparent 25%), linear-gradient(160deg, #0f766e 0%, #042f2e 100%)`
- Pale teal to peach: `linear-gradient(135deg, #ccfbf1 0%, #fde2cf 100%)`

A saturated teal to coral blend greys in the middle. A small warm light on teal, or two pale tints, works far better.

Notice the third swatch: very pale tints of opposites blend fine, because there is little saturation to lose. That is a useful trick for soft packaging and wedding stationery.

## Choosing a teal gradient for your brand

Teal is popular with health, money and sustainability brands, so the shade alone will not set you apart. What does is the depth you choose, the accent you pair it with and the surface. Start from the job the design has to do.

| If you are | Try | Pair with |
| --- | --- | --- |
| A clinic, pool or skincare brand | Shallows or Lagoon | Charcoal type, white space |
| An app or fintech product | Teal to blue | One coral button colour |
| A café, florist or garden centre | Jade | Cream and terracotta |
| A hotel, bar or law firm | Light from above | Copper or brass details |
| An evening event | Shaft of light | Pale lagoon headline |

Starting points, not rules. Test each against your real headline and logo.

## Teal gradient CSS for a dark mode interface

Deep teal is a lovely alternative to black or navy for a dark interface. It feels softer than pure black and still gives pale text plenty of contrast. Here is a background for an app shell with a soft glow behind the top of the page. More on the approach in [dark mode design](https://gradiently.design/guide/dark-mode-design).

```css
:root {
  --abyss: #042f2e;
  --deep-teal: #115e59;
  --lagoon: #5eead4;
}

body {
  min-height: 100vh;
  margin: 0;
  color: #f0fdfa;
  background-color: var(--abyss);
  background-image:
    radial-gradient(ellipse 80% 50% at 50% 0%, rgb(20 184 166 / 0.35) 0%, transparent 70%),
    linear-gradient(180deg, var(--deep-teal) 0%, var(--abyss) 60%);
}

a { color: var(--lagoon); }
```

A deep teal shell with a teal glow at the top. Pale lagoon links stay readable against it.

## Readable text on teal

Mid teal is deceptive. `#14b8a6` looks strong enough for white type but measures about 2.5 to 1, a clear fail. White needs Kelp (`#0f766e`, about 5.5 to 1) or darker. On anything from Aqua upwards, use the Abyss colour `#042f2e` as your ink: it keeps the text in the teal family and reads easily.

| Background | White text | Abyss text #042f2e |
| --- | --- | --- |
| Lagoon `#5eead4` | Fails | About 9.8:1 |
| Teal `#14b8a6` | About 2.5:1, fails | About 5.8:1 |
| Reef `#0d9488` | About 3.7:1, large text only | Weak |
| Kelp `#0f766e` | About 5.5:1, passes | Fails |
| Deep teal `#115e59` | About 7.6:1, passes | Fails |

Teal flips from dark type to white type between Reef and Kelp.

A spa portrait post with white text on a deep teal gradient

As a portrait post, the headline sits in the calmest teal.

The same spa design as a tall story with the teal light moved to suit the format

The same design as a story, rendered fresh rather than cropped.

That last point matters more than it looks. A gradient cropped from a post to a story moves the light to the wrong place. In Gradiently a Mark is rendered at every size, and the Designer can make the other sizes for you, so a teal look stays balanced in the feed, the story and the [website hero](https://gradiently.design/guide/website-hero-background).

## FAQ

### What colours go with a teal gradient?

Cyan, emerald, blue and navy blend into it. Coral, peach, copper and gold make strong warm accents when used outside the blend.

### What is the hex code for teal?

The web's named `teal` is `#008080`. Most modern palettes use livelier versions such as `#14b8a6` for mid teal and `#0f766e` for a deeper one.

### What is the difference between teal and turquoise?

Teal is deeper and more muted; turquoise is lighter, brighter and leans slightly more towards green. Both sit between blue and green.

### Can I use white text on teal?

Only on deep teal, from about `#0f766e` downwards. Bright and light teals need dark text to pass contrast.

### Is teal a good colour for dark mode?

Yes. A very dark teal like `#042f2e` is softer than black and more distinctive than navy, and pale teal accents read well on it.