Shades of Turquoise

What this tool does

Turquoise is the colour of a tropical lagoon, bright and fresh and impossible to feel gloomy about. It is the cheerful cousin of teal, lighter and more vivid, and it shows up anywhere a design wants to feel like a holiday. To use it well, though, you need its range, a paler turquoise for backgrounds, a deeper one for contrast.

That is the job here. You give it a turquoise, and it builds the full run of that colour in even steps, each with its HEX, RGB, HSL, and HSV codes ready to copy. Further down there is a reference for the named turquoises and the gemstone that gave the colour its name.

How to use it

1. Set your turquoise. When the page loads it shows a turquoise and its Hex. Pick your own with Change Color or the Color Picker, or type a hex in directly.
2. Set the count. The Color Shades field decides how many shades come back, starting at ten. Raise it for a finer gradient, lower it for bigger jumps.
3. Read off the values. Every shade carries its HEX, RGB, HSL, and HSV beside it, so you can lift whichever format you need.

Turquoise is already light and bright, so its paler steps turn into airy aquas quickly, while the darker steps move toward teal. Both ends are useful, which is the point of seeing the whole range at once.

How it works

The tool uses TinyColor, a colour library that handles lightening and darkening properly. It takes your turquoise, walks it toward white on one side and black on the other, spaces the steps evenly, and converts each into the four code formats.

Because turquoise starts bright, the lighter steps stay clean and watery rather than washing out, and as the steps deepen they slide naturally into teal territory. So a single turquoise can hand you everything from a pastel surface to a deep, grounded blue-green.

The colour named after a stone

Turquoise the colour comes from turquoise the gemstone, and the stone has been treasured for thousands of years. Its blue-green comes from copper in the rock, and it has been mined and worn since at least ancient Egypt, around 3000 BCE, as well as by Persian and Native American cultures. Few colours carry that much history in their name.

The name itself is a small geography lesson. It comes from the French for Turkish, because the stone first reached Europe through Turkey along trade routes from the Persian mines, even though it was never really mined there. Before that, it was simply called blue stone. That gemstone heritage is why turquoise still feels precious and a little exotic, and it is the December birthstone, so it carries that meaning too.

The named turquoises, with hex codes

Turquoise runs from pale and icy to deep and vivid. Here are the common named versions, with a hex for each.

• Turquoise (#40E0D0): the standard web turquoise, a bright, light blue-green.
• Medium Turquoise (#48D1CC): a touch deeper, still clearly bright.
• Dark Turquoise (#00CED1): more saturated and intense, leaning toward cyan.
• Pale Turquoise (#AFEEEE): a soft, icy version that works as a quiet background.
• Light Sea Green (#20B2AA): a slightly greener, grounded turquoise.
• Tiffany Blue (#0ABAB5): the famous jewellery-box shade, sitting between turquoise and teal.

Worth knowing: real turquoise stones vary a lot, from sky blue to green-blue depending on how much copper and iron they contain, often with dark veins running through them. So the colour named after the gem is really a whole little family rather than one fixed value.

Where turquoise works

Turquoise is the colour of summer and water, so it lands naturally in anything bright and uplifting. It suits beach and travel brands, wellness and spa work, children's products, and Southwestern or boho designs where it nods to the gemstone jewellery. It blends the calm of blue with the freshness of green, which is why it reads as both relaxing and energising at once.

The thing to watch is intensity. A vivid turquoise is attention-grabbing, which is great for an accent or a hero area but can be a lot across a whole page. The lighter steps from this tool are what let you spread it out, using a pale turquoise as a soft surface and saving the bright one for the moments that should pop.

Building a palette from your turquoise

Turquoise loves a warm partner. Its natural opposite is a warm coral or red-orange, which gives a fresh, beachy contrast, and a deep gold or terracotta pairs beautifully when you want something that feels more like the desert than the sea. White and warm sand keep it clean and breezy.

To build a working set, use the steps from this tool as the spine: a deep turquoise or teal for text and depth, your main turquoise as the feature colour, and a pale turquoise surface behind content. Then add one warm accent, coral for play or gold for richness, and let the turquoise stay the star. Keeping the warm colour sparing stops the palette tipping into something too busy.

Questions people ask

What is the difference between turquoise and teal?

Turquoise is lighter, brighter, and more tropical, named after the gemstone. Teal is darker, more muted, and more sophisticated, named after a duck. They sit close together on the wheel but read very differently.

What is the hex code for turquoise?

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

Is turquoise a birthstone?

Yes. Turquoise is one of the birthstones for December, valued for thousands of years and long associated with protection and good fortune.

Can I use my own turquoise?

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

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. Gemological Institute of America (GIA), December Birthstones: Turquoise, Zircon, Tanzanite. https://www.gia.edu/birthstones/december-birthstones