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.
On this page
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.
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.
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.
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.
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 explains the pull, and coral gradients has codes for the other side.
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.
Try
Pair with
Try
Pair with
Try
Pair with
Try
Pair with
Try
Pair with
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.
: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); }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.
#5eead4White text
Abyss text #042f2e
#14b8a6White text
Abyss text #042f2e
#0d9488White text
Abyss text #042f2e
#0f766eWhite text
Abyss text #042f2e
#115e59White text
Abyss text #042f2e
As a portrait post, the headline sits in the calmest teal.
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.
Questions people ask
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.
Written by Gradiently
The team behind Gradiently, a design tool built around Marks: living gradients that make everything you design look like yours.
See our profile