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.
On this page
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.
: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;
}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 explains why context shifts them.
Teal's own
Teal's own
From green
Teal's own
Teal's own
Teal shades and what each one says
- 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 has a fuller method.
Teal for a clinic: calm, clean and trustworthy without the chill of hospital blue.
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 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.
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, and see turquoise gradients 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.
Questions people ask
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.
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