Background Colour Selection

This is a super specific technical post, but it was something I worked to figure out, and I said I would document how things got done, so here it is.

The generated artwork is done in a certain style. The text and logo remain the same, the big episode number is always there, and a different processed foreground image is used each time to reflect the subject of the episode.

  1. The background colour must change each time.
  2. It must always be a certain brightness and saturation of colour – no dark browns or shocking picks.
  3. Choosing randomly runs the risk of choosing the same colour twice in a row, or too close a choice.
  4. Just incrementing the colour with the episode number wouldn’t change enough.

Here’s what I came up with. ImageMagick uses various colour models, including RGB and CMYK. But I chose HSL. This takes three values, representing Hue, Saturation, and Lightness.

Saturation is the richness of the colour. I didn’t want things too rich or bright, but rather a toned-down level like those on the Penguin paperbacks I was inspired by. After some experimentation, I chose a level of about 50%. It didn’t have to change for each episode.

Lightness is pretty self-explanatory. The colour had to be light enough to show up the processed black artwork, but dark enough to show up the white text. After some experimentation, I chose a level of about 30%. It didn’t have to change for each episode.

Hue is the actual colour, and is a value of 0-360 around a colour wheel. This colour picking website shows it all quite well, and was very useful in figuring this all out. Hue had to change for each episode.

In order to meet all the criteria listed above, this is the calculation used to generate the colour:

CS_Episode_Colour="hsl($(((episode_number*hue_increment) % 360))%,${saturation},${lightness})"

where

saturation = 50%, lightness = 30%, hue_increment = 171

What this does is create a HSL specification string in the form “hsl(0-360,0-100%,0-100%)” by taking the episode number, multiplying it by a value called “hue_increment”, dividing by 360 and taking the modulus (remainder), and setting the saturation and lightness values to the regular chosen values. Taking the modulus ensured that the value was within the range 0-360.

Where did I get 171 from? Once the other values had been settled, this was the one that took the most deciding. The way the calculation works, the value jumps by 171 each time, and the modulus ensures that it loops round when it’s greater than 360. Experimentation showed that the value of 171 gave a good change each episode, while not being too regular.

And that’s how the episode number dictates the background colour of the artwork.