Categories
Beginner Colours Project Rainbow

Learn Hue Saturation and Brightness (HSB) colour coding

Learn about Hue, Saturation and Brightness colour model.

Introduction

We have already introduced the RGB model to code colours on a computer. In that post I said:

Red green blue values along the top, with the continuous hue rainbow

We can either represent a colour in values of Red, Green and Blue (known as RGB colours), or a distance travelled along a continuous hue rainbow.

Now we will focus on coding colours through Hue, Saturation and Brightness (HSB).

Why another way to code colours?

One simple answer is that sometimes one way is better than another. In some situations RGB may be easier for a programmer to code, whereas in other situations it may be better to use the HSB model, in comparison to the RGB or others. Consequently, it is good to understand different coding methods.

Top tip.

RGB = red, green blue.
HSB = hue, saturation and brightness.

In fact, there are many ways to code colours onto a computer. Back in the early days of computing, in the 1960’s and 1970’s, computer pioneers wanted a way to consistently record and reproduce colour. They needed ways to code colour such that it could be displayed on a computer screen, transmitted over airwaves, and so on, in a consistent, convenient and accurate way. HSB is also known as Hue, Saturation and Value model (HSV) and was invented in 1978 by Alvy Ray Smith.

Coding is another way of saying “let’s change the phenomenon into a way we can store it and manipulate it on a computer”. Consequently, colours need to be changed into numbers and letters. On a computer we have many methods to store values: we can use floating point values, percentages (values ranging from 0 to 100), or values between 0 and 1, even a mix of letters and numbers. In RGB we store a colour by values (between 0 and 255) for each of Red, Green and Blue (e.g., rgb(125, 255, 25).

Not only are there different ways to code colours, but there are different ways to consider colours. For example, we can understand colour from mixing lights, thinking about light wavelengths, how paints are mixed, how we perceive colours, or even naming individual colours. Consequently, there are different ways to represent colour. None of these ways of “thinking about colour” are better than the other; but they may be better for specific purposes.

Scientists, however, do need ways to express their ideas, and create colour models that abstractly describe their ideas, and define colour spaces to present their ideas.

Colour models are abstract representations of colour. Usually they include a precise description and mathematical equation to express the colour concept, and a picture of the model to help us visualise the idea.

The colour space allows us to understand one model in comparison to another. Perhaps we can find a way to map the colour model into two-dimensional coordinate system, or a three-dimensional picture. These spaces not only help us visualise the colour model, but help us to compare one model against another.

Throughout history many colour models have been invented. But they have been done for one purpose: to help people understand colour better. Much of our understanding of colour begins with Isaac Newton (1642-1726). Newton used a prism to split light into its colour spectrum. He named the colours red, orange, yellow, green, blue, indigo and violet (see colours and rainbows).

Newton created his own colour wheel to represent these colours. He ordered the colours in the order of the spectrum. But he created uneven intervals based on musical notes.

Newton's colour circle

For the HSB model, we position red at the top, and the spectrum colours around the circle. Let’s now go through each of the parts: Hue, Saturation and Brightness.

Hue

In the HSB model, hue is denoted by an angle around the circle. Red is placed at the top at 0˚, yellow-green at 90˚, cyan at 180˚, and purple at 270˚. By changing the angle, we can choose a specific hue.

Top tip.

Try to remember some of the angles. Red at 0˚, yellow 60˚, green 120˚, cyan 180˚, blue 240˚

Hue colour wheel
Hue colour wheel

When you are using different computer programs (such as a photo editor) you may need to choose colours through a colour picker. In some colour pickers, the wheel is flattened into a long rectangle of colours. But the hues are still given a value between 0 and 360.

Hue colour line

If we look further, we can see the principles of light mixing at work! The primary hues of red, green and blue are equally separated around the circle: red at 0˚, green at 120˚ and blue at 240˚.

Primary colour hues on the HSB circle
Primary colours in the HSB model

The secondary hues, cyan, magenta and yellow, are then seen in between. When we mix red and green light we get yellow, blue and green light produces cyan, and red and blue light produces magenta.

Top tip.

Try to memorise the colour wheel positions of both the primary and the secondary colours.

Primary and secondary colours in the HSB model
Primary and secondary colours in the HSB model

Saturation

Saturation is the intensity of the colour: the richness of the colour. At zero there is no colour and white is shown, at 100 there is pure hue. Let’s choose a hue value of 240˚ to get a deep-blue colour, we can then change the saturation levels by 10% starting at 0%.

Different saturation levels

We can do the same with a value of orange. Starting with no colour and moving towards the full colour hue.

Change in saturation for orange

Brightness (or value)

Brightness is the brightness of colour! If the colour is not bright then we have the darkest version of that colour (it will look black). And when we have the brightest colour we get the hue itself in its purest form.

Showing dark-blue hue at 240˚ with change of brightness
Showing an orange hue at 40˚ with change of brightness

HSB (HSV) model space

We can think about the HSB model in a three-dimensional visualisation. In 3d, the colour model looks like a cylinder, with the hue around the side, saturation towards the center of the cylinder and brightness from the top to bottom.

Hue Saturation Brightness (HSB) colour space, represented by a cylinder.
Hue Saturation Brightness (HSB) colour space, represented by a cylinder

This model helps us understand how we can manipulate the values.

  • By increasing the hue value, we rotate around the circle clockwise. If we decrease hue we rotate anticlockwise.
  • If we decrease saturation we move into the center of the cylinder. This results in a less-saturated version of that colour.
  • To decrease the brightness (making the colour darker) we are moving down the cylinder. Move upwards to increase the brightness.

HSB and colour interfaces (colour pickers)

While the cylinder is a useful way to visualise the HSB colour model, practically it’s not very easy to manipulate colour in 3d. So, colour pickers use sliders and buttons to control the colour.

Using three sliders to control HSB.

Each slider therefore represents one of Hue, Saturation and Brightness (or value).

Sliders can be used to select HSB values
Sliders can be used to select HSB values. Here we show a blue hue at 256˚, with maximum saturation and brightness.
In this example we reduce the saturation and brightness to 50% with the same hue of 256˚
Sliders can be used to select HSB values, in this example we reduce the saturation and brightness to 50% with the same hue of 256˚.

Plotting in two-dimensions

Another approach is to plot two dimensions of the colour, and have the third represented by a slider. So, for example, we can plot Saturation against Brightness, and have the colour hue on a slider. In this way you can select the “current hue”. Then all the shades are mapped on a 2d grid, with saturation on the x-axis and brightness on y-axis. White is plotted on the top left and black along the bottom.

Colour picker in HSB space, with saturation and brightness plotted.
Colour picker in HSB space, with saturation and brightness plotted. The selected colour shows HSB (256°, 50%, 50%)

Activities

In these activities we will use the Google colour picker, and the main aim is for you to practice using the HSB model.

Step 1. Load the Google colour picker

To access this tool, go to a browser window, and in the browser load a search bar, such as the Google search bar, and type “google colour picker“. If you are using the Google search engine then “colour picker” would be enough. This should load several search results on colour, and depict the colour picker at the top. Let’s just focus on the colour picker interface.

Screen shot from the Google colour picker.
Google colour picker, with the chosen hue (256°, 50%, 50%)

Note. the Google colour picker also shows the colour values in three other colour models. It shows values in RGB, CYMK, HSB and also HSL colour spaces; but let us focus on HSB values.

Step 2. Locate the primary and secondary colours

Now try to locate the primary and secondary colours.

  • Find, the primary colours: red, green and blue. By moving the circle, or changing the values in the text fields, locate the primary colours (red, green and blue). You will need to put the brightness and saturation to maximum.
  • Find the secondary colours: yellow, cyan and magenta. Try to get the exact values of 60˚, 180˚ and 300˚ respectively.

Step 3. Investigate brown

Find a colour brown at 33˚. And set both saturation and brightness to 100%. The idea is to investigate how the colours change when you alter saturation and brightness.

The task is to reduce the saturation by 40 and then the brightness by 40. And to make a grid of colours.

Task, to investigate the different lightness and brightness of brown.

Look further

How about doing your own research on colour.

  • Perhaps take a look at different colour models and where they are used.
  • Look at colour pickers, and see how they are used.
  • Try to remember some of the colour values and their values in the HSB colour model.

By Jonathan

Jonathan is constantly designing things, educating people, and always learning. He is professor of visualisation at the School of Computer Science and Electronic Engineering, Bangor University, U.K. He leads the Visualization, Data, Modelling and Graphics Group (VDMG), leads project rainbow and is an author of the Springer book "Five Design-Sheets" sketching design method.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.