The mood of random colours

Last week I ordered a poster with 1054 random rectangles on it. I created it on the 527th day that my server generated a daily rectangle. There are 1054 different colours on this poster, so I expected this poster to be very colourful. The overall tone of the image turned out to be rather subdued though. The reason why this happened is because I used the HSL colour notation to generate random colours.

The difference?

I created a few tests to compare the tone of the different colour functions. The difference is obvious when you compare 527 random generated HSL colours on the left, with 527 random generated RGB colours on the right. It is very clear that if you want more variation in hue, you should choose RGB for your random colours. If you want more variation in lightness and saturation, pick HSL.

Why

On Twitter, Niels Leenheer explained to me why this happens, and I’ll try to explain it here in my own words. An RGB colour is generated by mixing three numbers (between 0 and 255), that stand for the colours red, green and blue. A colour is dark when all three of these numbers are low, like rgb(5,10,7). It’s light when all three of these numbers are high, like rgb(255,247,247). And it’s unsaturated when all three of these numbers are close to each other, like rgb(125,120,127). Changes are pretty low that this happens. And that’s why dark, light or unsaturated colours are rare when you generate random RGB values.

HSL is generated differently. It also uses three numbers, but instead of mixing colours, you mix hue, saturation and lightness. If the value of saturation is below 10%, the colour is pretty dull. It looks grey when it’s lower than 5%. That’s one in every 20 images. Something similar happens with light and dark. A value of 10% or lower for the lightness channel will result in a very dark colour. Which one in 10. The same applies for light colours. It turns out that saturated colours are pretty rare in HSL.

Other colours

You can also use the list of extended color keywords to generate random colours. Just to be complete, I created a page with a comparison between 527 random HSL colours, 527 random RGB colours and 527 random colours from the extended color keywords list.

If you want to use random colours for print you probably want to take a look at this page that compares HSL to RGB and CMYK. As you might have expected, random CMYK turns out to be pretty dark.

Restrictions

Of course you can manipulate the results to better fit the mood of your design. For instance, on this site I use HSL to generate random colours, but the value of the saturation channel is limited to a percentage between 50% and 87%, and the value of the lightness channel to something between 65% and 92%. Which will result in a completely different overall tone, while still using HSL.