Shades of Teal

What this tool does

Teal is the colour that cannot quite decide if it is blue or green, and that is exactly why it works. It looks calm and a little expensive, the kind of colour a healthcare brand or a fintech app reaches for. To build a design around it, though, you need more than the one teal. You need a lighter one for a surface, a deeper one for text.

That is what this does. You give it a teal, and it builds the whole range of that teal in even steps, from a soft, pale version to a deep, near-black one. Each comes with its HEX, RGB, HSL, and HSV codes ready to copy. Below the tool there is a reference of the named teals, and a clear answer to the teal-or-turquoise question.

How to use it

1. Set your teal. The tool opens on a teal and shows its Hex. Use Change Color or the Color Picker to set your own, or paste in the exact hex you want to work from.
2. Choose the number of steps. The Color Shades number decides how many shades to generate, ten by default. More steps give a smoother run from light to dark.
3. Copy the codes. Each step lists its HEX, RGB, HSL, and HSV values, so you can take whichever format your project needs.

Teal sits right between blue and green, so as you lighten it the steps can tip toward a brighter aqua. If you want them to stay deep and balanced, work from a darker base.

How it works

The tool runs on TinyColor, a colour library that lightens and darkens a colour cleanly. It takes your teal, walks it toward white on one side and black on the other, spaces the steps evenly across that range, and writes each one out in the four code formats.

Teal is really a dark, muted version of cyan, sitting at the exact midpoint of blue and green. That balance is what makes its range so useful: the lighter steps lean fresh and aqua, the darker steps lean deep and almost navy, all from the one starting colour.

The colour named after a duck

Teal is named after a bird. The common, or Eurasian, teal is a small duck with a bright blue-green stripe running back from its eye, and that patch of feathers is the colour we now call teal. It is a fairly modern colour name, only entering common English use around the early 20th century, which makes it a youngster next to red, blue, and green.

On the colour wheel, teal lands at exactly 180 degrees, the precise point halfway between blue and green. That is also where cyan sits, so teal is best thought of as a deep, calm cyan. The even split between blue and green is the whole character of the colour, which is why it can read cool and watery one moment and grounded and earthy the next, depending on the light.

The named teals, with hex codes

Teal shades cluster around that blue-green midpoint, some deeper, some brighter. Here are the useful ones, with a hex for each.

• Teal (#008080): the standard web teal, one of the original named web colours, an equal mix of green and blue.
• Dark Cyan (#008B8B): a fraction brighter than teal, still deep and cool.
• Light Sea Green (#20B2AA): a lighter, livelier teal with more sparkle.
• Cadet Blue (#5F9EA0): a soft, greyed-off teal that works as a muted neutral.
• Tiffany Blue (#0ABAB5): the famous jewellery-box blue-green, sitting between teal and turquoise.
• Cyan / Aqua (#00FFFF): teal's fully bright sibling, the same hue turned all the way up.

The simplest way to picture teal is as cyan with the lights turned down. Where cyan is electric and almost neon, teal is the same colour made deep, calm, and usable.

Teal or turquoise

These two get mixed up constantly, but they are genuinely different colours. The quickest way to keep them straight is depth. Teal (#008080) is dark and muted, while turquoise (#40E0D0) is light and bright, a gap of more than thirty points of lightness between them. On a dark background, teal almost vanishes while turquoise still pops.

The moods follow the depth. Teal reads sophisticated, calm, and professional, which is why it suits corporate and healthcare work. Turquoise reads tropical, playful, and summery, the colour of Caribbean water, which is why it suits beach, wellness, and Southwestern designs. If you want depth and restraint, reach for teal. If you want energy and freshness, reach for turquoise, and there is a matching tool for it.

Building a palette from your teal

Teal makes an excellent anchor. Use the steps from this tool as the spine of a palette: a deep teal for text and headers, your main teal for blocks and buttons, and a pale teal surface behind content. One colour doing three jobs reads as deliberate.

For an accent, teal's opposite on the colour wheel is a warm red-orange, so coral or a soft orange gives you a lively, balanced contrast. Beyond that, teal is happy next to white and grey for a clean look, gold for a richer one, and a warm rust or terracotta when you want something earthier. Keep bright, cold colours to a minimum against it, since teal is already cool.

Questions people ask

Is teal blue or green?

Both, in equal measure. True teal (#008080) is an even mix of blue and green, sitting exactly at the midpoint of the two, which is also where cyan lives. Many teals lean slightly one way or the other.

What is the hex code for teal?

The standard web value is #008080. It is one of the named CSS colours, so you can also just write "teal" in your stylesheet, while a specific brand teal will have its own hex.

What is the difference between teal and turquoise?

Teal is darker, more muted, and more sophisticated, named after a duck. Turquoise is lighter, brighter, and more tropical, named after the gemstone. They are close on the wheel but clearly different in depth.

Can I use my own teal?

Yes. Paste your exact teal in as the base, and the tool builds the lighter and darker steps of that colour, so you get a matching set for surfaces, text, and accents.

References

1. World Wide Web Consortium (W3C), CSS Color Module Level 4. https://www.w3.org/TR/css-color-4/
2. TinyColor (Brian Grinstead). Documentation. https://github.com/bgrins/TinyColor
3. Teal, colour name and origin. Wikipedia. https://en.wikipedia.org/wiki/Teal