Shades of Sapphire

What this tool does

Sapphire is the jewel blue, deep and vivid with a velvety richness, the colour of the gemstone it is named after. It is the blue you reach for when you want something to look expensive and a little regal. To build a palette around it, though, you need its range, a lighter sapphire for surfaces, a deeper one for contrast.

That is the job here. You give it a sapphire blue, and it generates the full run of that colour in even steps, each with its HEX, RGB, HSL, and HSV codes ready to use. Further down there is a reference for the sapphire blue range and the gemstone behind the name.

How to use it

1. Set your sapphire. The tool opens on a sapphire blue and shows its Hex. Use Change Color or the Color Picker to set your own, or paste in the exact hex you want to build from.
2. Choose the number of steps. The Color Shades number sets how many shades appear, ten by default. More steps give a finer gradient from light to deep.
3. Copy the codes. Each step is shown with its HEX, RGB, HSL, and HSV values, so you can take whichever format your project needs.

Sapphire is a saturated, jewel-toned blue, so its lighter steps stay bright and clear rather than washing out grey, which makes them useful for accents as well as backgrounds.

How it works

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

Sapphire holds its colour well as it moves, because it starts highly saturated. The lighter steps stay vivid before turning pastel, and the darker steps deepen toward navy, so a single sapphire can give you a surprisingly wide, usable set.

The colour named after a gemstone

Sapphire the colour comes straight from sapphire the stone, and the stone has a long story. It is a variety of corundum, the same mineral as ruby, and its blue comes from traces of iron and titanium in the crystal. It is extremely hard, a 9 on the Mohs scale, second only to diamond, which is why it survives daily wear and turns up in rings so often. The name itself traces back to the Greek sappheiros, meaning blue stone.

That gem heritage is why sapphire reads as luxury. It has adorned royalty and clergy for centuries and is the birthstone for September. The best-known example is the deep blue Ceylon sapphire engagement ring worn first by Princess Diana and now by Catherine, Princess of Wales, probably the most famous ring in the world. When you use sapphire as a colour, that association with jewels and royalty is what comes with it.

The sapphire blue range, with hex codes

Sapphire is not a fixed web colour, so its values vary by source, but the blue runs across a recognisable range. Here are useful reference points, with a hex for each.

• Sapphire (#0F52BA): a common value for the colour, a deep, saturated jewel blue.
• Sapphire Blue (#0067A5): a slightly lighter, brighter take on the same blue.
• Cornflower blue (#6495ED): close to the prized velvety blue of fine Kashmir sapphires, at the lighter end.
• Royal Blue (#4169E1): near the deep, vivid blue of top Burmese sapphires.
• Navy (#000080): roughly where the darkest sapphire blues land.

Two honest notes. First, since sapphire is not a CSS keyword, the same name maps to different hex values across charts, so a hex is the only reliable way to pin the exact blue you mean. Second, as a gemstone, sapphire is really a whole colour family, also coming in teal, pink, yellow, and more. As a colour name, though, sapphire means the blue.

Where sapphire works

Sapphire is the blue for when plain blue feels too ordinary and navy feels too plain. It carries more richness and saturation than either, so it suits anything that wants to look premium: jewellery and fashion brands, elegant invitations, deep jewel-toned backgrounds, and headers that should feel a cut above.

The flip side of that richness is that a little goes a long way. A full screen of saturated sapphire can feel intense, so it often works best as a strong anchor or a feature colour, with quieter blues and neutrals around it. The lighter and deeper steps from this tool are what let you do that, giving you calmer surfaces and darker text to balance the vivid mid-tone.

Building a palette from your sapphire

A jewel tone wants jewel-tone treatment. The most reliable pairing for sapphire is gold, the classic blue-and-gold of fine jewellery and heraldry, which instantly makes a palette feel rich. Silver and crisp white do the same job in a cooler, more modern way.

To build a working set, use the steps from this tool as the spine: a deep sapphire for text and depth, your main sapphire as the feature colour, and a light sapphire surface behind content. Then add one warm metallic accent, gold for warmth or silver for cool, and perhaps a neighbouring jewel tone like deep teal or emerald if you want a fuller, richer palette. Keep the accents sparing so the sapphire stays the star.

Questions people ask

What colour is sapphire?

As a colour name, sapphire is a deep, vivid, jewel-toned blue. As a gemstone it actually comes in many colours, from blue to pink, yellow, and teal, but the word sapphire on its own refers to the blue.

What is the hex code for sapphire?

A commonly used value is #0F52BA, though sapphire is not a standard web colour, so charts differ. For an exact match, use a specific hex rather than the name.

How is sapphire different from navy or royal blue?

Sapphire is more saturated and jewel-like than navy, which is darker and more muted, and it is deeper and richer than royal blue, which is brighter and more energetic. Sapphire aims for that velvety, gemstone look.

Can I use my own sapphire?

Yes. Paste your exact sapphire blue 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), Sapphire Description. https://www.gia.edu/sapphire