Shades of Indigo

What this tool does

Indigo is that deep blue with a pull toward violet, the colour of dark denim and the sky just after sunset. It is rich and moody, which is exactly why it is tricky to build a range from. Lighten it and it can drift purple, darken it and it slides toward black, and doing that by eye is guesswork.

So let the tool do it. You give it an indigo, and it generates the full run of that colour in even steps, from light to deep, each with its HEX, RGB, HSL, and HSV codes ready to copy. Below the tool there is a reference of the named indigos too, along with one genuinely useful warning about the web version of the colour.

How to use it

1. Set your indigo. The tool starts on an indigo and shows its Hex. Use Change Color or the Color Picker to set your own, or paste in the exact hex you want to start from.
2. Choose the number of steps. The Color Shades number sets how many shades you get back, ten by default. More steps mean a smoother gradient from light to dark.
3. Copy the codes. Each step is shown with its HEX, RGB, HSL, and HSV values, so you can take whichever format suits the job.

If your starting indigo leans purple, the lighter steps will lean purple too. Paste in a bluer indigo if you want the range to stay closer to denim blue.

How it works

The tool uses TinyColor, a colour library that lightens and darkens a colour properly rather than just fading it. It takes your indigo, walks it toward white on one side and black on the other, spaces the steps evenly, and converts each into the four code formats.

Indigo is worth watching as it lightens, because its violet side tends to show more in the paler steps. That is the colour behaving honestly, not a fault. If you want a tighter, bluer set, start from a bluer base and the whole range follows.

The colour Newton added to the rainbow

Indigo is the I in ROY G BIV, and it is there because Isaac Newton put it there. When Newton split sunlight with a prism in the 1660s, he named seven colours in the spectrum, and indigo was the one squeezed between blue and violet. He likely leaned on seven partly for neat reasons that had nothing to do with light: seven notes in a scale, seven days in a week, seven known planets at the time.

Whether the eye can really pick out indigo as its own band is still argued. It sits at a narrow slice of the spectrum, and some scientists say what Newton called blue is closer to today's cyan, and his indigo closer to today's blue. Either way, indigo earned its place as a named colour, and it has kept it for over three hundred years.

The dye that coloured your jeans

Long before it was a spot on the rainbow, indigo was a dye, and one of the oldest we have. It comes from the Indigofera plant, and the name traces back through Latin to a word meaning Indian, because that is where Europe first imported it from. For centuries it was so valuable in trade that it earned the nickname blue gold.

Its most famous job is the one in your wardrobe. Indigo is the dye that gives blue jeans their colour, used on denim since the 1870s, and prized because it fades in that particular soft, characterful way rather than washing out flat. So when you reach for an indigo on screen, you are reaching for the colour of work shirts, old denim, and a dye trade thousands of years old.

The named indigos, with hex codes

Indigo is used loosely, so the named versions range from nearly blue to clearly purple. Here are the common ones, with a hex for each.

• Indigo, web (#4B0082): the standard CSS value, a dark, violet-leaning indigo.
• Electric Indigo (#6F00FF): a bright, vivid spectral indigo, much closer to the colour in a rainbow.
• Blue-Violet (#8A2BE2): a lighter, livelier blend sitting right on the blue and violet line.
• Persian Indigo (#32127A): a deep, royal purple-blue.
• Indigo Dye: the colour of denim, a far bluer indigo than the web value, closer to a dark slate blue.

Here is the warning worth keeping. The web colour named indigo (#4B0082) is actually quite purple, not the blue of the dye it is named after. That mismatch is not an accident in your screen, it is baked into the colour name itself, set decades ago when programmers picked the value for early computer systems. If you mean the blue of denim, do not trust the keyword, use a hex.

Building a palette from your indigo

Indigo has enough depth to anchor a layout, so the steps from this tool work well as the dark backbone of a palette. Let a deep indigo hold your text and headers, a mid indigo carry main blocks, and a lighter, softer indigo sit behind content. Because indigo is so dark, white text reads cleanly on the deeper steps, which makes them handy for dark panels and section blocks.

For contrast, indigo likes a little warmth against its cool depth. White and pale grey lift it and let it breathe, while cream, tan, and a touch of gold or warm yellow play off it nicely without fighting. Give it room to be the star, though, since indigo performs best when the colours around it stay quiet and let its depth do the talking.

Questions people ask

Is indigo blue or purple?

It sits between the two. Traditionally indigo is a deep blue with a violet undertone, the colour of dark denim. The web version (#4B0082), though, leans clearly purple, which is why people often see indigo as more violet than blue.

What is the hex code for indigo?

The CSS colour named indigo is #4B0082, a dark blue-violet. Be aware that this is the purple-leaning web version, not the bluer colour of the original dye, so reach for a specific hex if you want the denim blue.

Why does web indigo look so purple?

The value was chosen decades ago for early computer colour lists and ended up as a dark purple rather than the blue of indigo dye. The name stuck, so the CSS keyword has been violet-leaning ever since.

Can I use my own indigo?

Yes. Paste your exact indigo in as the base, and the tool builds the lighter and darker steps of that colour, so you get a matching set whether your indigo leans blue or purple.

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. Indigo, the colour and the dye. Wikipedia. https://en.wikipedia.org/wiki/Indigo