Shades of Ruby

What this tool does

Ruby is the jewel red, deep and vivid with a hint of fire, the colour of the gemstone it is named after. It is richer and more luxurious than a plain red, the kind of red that feels precious. To build a palette around it, though, you need its range, a lighter ruby for surfaces, a deeper one for contrast.

That is what this does. You give it a ruby red, and it builds the whole run of that colour in even steps, each with its HEX, RGB, HSL, and HSV codes ready to copy. Below the tool there is a reference for the ruby red range and the remarkable stone behind the name.

How to use it

1. Set your ruby. The tool starts on a ruby red and shows its Hex. Use Change Color or the Color Picker for your own, or paste a hex in.
2. Set the number of shades. The Color Shades box holds the count, ten to begin. Raise it for a smoother run, lower it for fewer, bolder steps.
3. Read the values. Each shade lists its HEX, RGB, HSL, and HSV next to it, ready to copy.

Ruby is a deep, saturated red, so its lighter steps stay rich and rosy rather than washing out, while the darker steps deepen toward a near-black wine red. Both ends are useful in a palette.

How it works

The tool runs on TinyColor, a colour library that handles lightening and darkening cleanly. It takes your ruby, 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.

Because ruby starts deep and saturated, the range it produces holds its richness well. The lighter steps move through warm pinks before turning pale, and the darker steps deepen into a wine-like red, so one ruby can carry a whole palette.

The colour named after a gemstone

Ruby the colour comes from ruby the stone, and there is a neat twist to it. A ruby is the red variety of corundum, the very same mineral as sapphire. The only difference is the trace element inside: a little chromium turns corundum red, and that red stone is a ruby, while every other colour of corundum is called a sapphire. So a ruby is, quite literally, a red sapphire. The more chromium, the stronger the red. The name comes from the Latin ruber, simply meaning red.

That gem heritage is why ruby reads as luxury and passion. It is the July birthstone, was called the king of precious stones in ancient India, and ranks a 9 on the hardness scale, second only to diamond. The most prized shade of all is a deep red with a hint of purple that the trade calls pigeon's blood. When you use ruby as a colour, that sense of a rare, fiery jewel comes with it.

The ruby red range, with hex codes

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

• Ruby (#E0115F): a common value for the colour, a vivid red with a slight pink lean.
• Pigeon's Blood (around #9B111E): closer to the prized deep gemstone red, rich and a touch purple.
• Crimson (#DC143C): a strong, slightly cool red near the brighter end of the range.
• Firebrick (#B22222): a deeper, muted red for the mid range.
• Dark Red (#8B0000): roughly where the darkest ruby reds land.

Two honest notes. First, since ruby is not a CSS keyword, the same name maps to different values across charts, so a hex is the only reliable way to fix the exact red you want. Second, as a gemstone, ruby ranges from a bright rose red to a deep, almost purplish red, so there is real room to choose how deep your ruby goes.

Where ruby works

Ruby is the red for when plain red feels too blunt. It carries more depth and richness, so it suits anything that wants to look premium and a little romantic: jewellery and beauty brands, luxury packaging, elegant invitations, and deep, dramatic backgrounds. It keeps red's warmth and energy but adds a jewel-toned glamour on top.

As with any rich colour, a little goes a long way. A full screen of saturated ruby can feel intense, so it often works best as a strong feature colour or anchor, with quieter reds and neutrals around it. The lighter and deeper steps from this tool give you exactly that, soft surfaces and dark text to set against the vivid mid-tone.

Building a palette from your ruby

A jewel tone wants jewel-tone treatment. Ruby's classic partner is gold, the rich red-and-gold of fine jewellery, which instantly makes a palette feel opulent. Crisp white and soft cream keep it elegant, and black makes it dramatic.

To build a working set, use the steps from this tool as the spine: a deep ruby for text and depth, your main ruby as the feature colour, and a light, rosy ruby surface behind content. Then add one accent, gold for warmth, or a neighbouring jewel tone like deep emerald green for a richer, festive feel. Keep the accents sparing so the ruby stays the star.

Questions people ask

What colour is ruby?

A deep, vivid, jewel-toned red, often with a slight pink or purple lean. It takes its name from the gemstone, whose finest shade is a rich red with a hint of purple.

What is the hex code for ruby?

A commonly used value is #E0115F, though ruby is not a standard web colour, so charts differ. Use a specific hex when you need the exact red.

How is ruby different from red or crimson?

Ruby is deeper, richer, and more jewel-like than plain red, and a touch warmer and more luxurious than crimson, which leans cooler. Ruby aims for that deep gemstone glow.

Can I use my own ruby?

Yes. Paste your exact ruby red 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), July Birthstone: Ruby. https://www.gia.edu/birthstones/july-birthstones