Introduction
This is tool I made to generate a set of different, but related colours for a bar chart showing different categories of data. Use the sliders select how many colours you want one colour you want to use, and it will generate a range of colours different from that colour, but with the same saturation and lightness. See the bottom of the page for more details.
Input
Colours
| Colour | RGB | Hex |
|---|---|---|
| {{ colour.join(", ") }} | {{ RGB2Hex.apply(null, colour) }} |
How it works
I built this tool after reading a blog post by Bruce Hill which contains all sorts of useful coding gems. One of the snippets demonstrated how to use the golden ratio to generate a range of colours that are maximally different from each other, even when you don't know how many colours there will be. This is how plants maximise the amount of light reaching their leaves and works because the golden ratio is the "most irrational" number.
Around the time I read the blog post, I was generating stacked bar graphs at work that show category data, so I was looking for a nice set of colours to use. I tried Color Brewer 2.0 and a couple of other tools, but I wasn't happy with how it looked.
What I wanted was to have a set of colours with the same brightness and saturation, and to be able to tweak these values for all the colours in the range at once. I also thought it would be useful if I could include the base colour of the web page to be included in the range and have the colour scheme built around that.
So I built this. The colour ranges perhaps aren't as good as some of the other tools, and they might not be good for colour-blindness or have the same perceptual brightness, but it worked well enough for me, and it was fun to make.