Digital Colour – Introduction to Hue, Saturation and Lightness

Edit sketch in P5 Editor

Click the link to work with the code that was used to create the sketch above

Everything you see on a screen is created by colours. I know that’s obvious. What else would it be. But think of a film or a photograph. All the different colours, tones and shades; as many as your eye can see. (But more about that another time.)

The sketch above shows a linear spectrum of colours; Red, to Yellow, to Green, to Blue, to Pink and back again.

The different colours can be called hues. Hue is really another word for what we think of when we think of the word colour.

There is another quality called saturation that is of interest to us when creating colours. I suppose you could say that the red colour in the middle is being saturated to the left and desaturated to the right. Unlike lightness, saturation changes the look of the colour completely. You can think of saturation as being the quality that more of less dull. Saturated images will be “deeper” “fuller” and more “vibrant.” Images that are de-saturated will be “pale”, “muted” and will often approach monochrome, eg. black and white or sepia toned images.

Another quality of digital colour is lightness. You can see that as we move down from top to bottom along on the image above the colours get lighter. There are around sixty “boxes” on the grid, moving from red through blue and back towards reds again. and moving up and down in lightness. Each of these boxes is, for us, a different colour. To our minds each can be described in as some version of a familiar hue. “That’s blue, then light blue and light light blue. And even lighter light blue”

When working with computers we are much more precise. We get very specific about colours. We have to be. We have more than sixteen million of them to choose from. As many as you to make peoples minds believe in the representation of the world you will create for them.

We will look at how we combine Hue, Saturation and Lightness to make and manipulate our digital colours in a the next Digital Colour post, where we will also discover the value and uses of the colour wheel.

For now play around with the sketch at the top of the page and dip your senses in how the colours move. Colour will always be unspoken, no matter what we say.