{"id":936,"date":"2020-07-02T14:50:15","date_gmt":"2020-07-02T13:50:15","guid":{"rendered":"https:\/\/csee.bangor.ac.uk\/?p=936"},"modified":"2020-07-02T14:50:15","modified_gmt":"2020-07-02T13:50:15","slug":"learn-hue-saturation-and-brightness-hsb-colour-coding","status":"publish","type":"post","link":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/2020\/07\/02\/learn-hue-saturation-and-brightness-hsb-colour-coding\/","title":{"rendered":"Learn Hue Saturation and Brightness (HSB) colour coding"},"content":{"rendered":"\n

Introduction<\/h2>\n\n\n\n

We have already introduced the RGB model <\/a>to code colours on a computer. In that post I said:<\/p>\n\n\n\n

\"\"
Red green blue values along the top, with the continuous hue rainbow<\/figcaption><\/figure><\/div>\n\n\n\n

“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.<\/em>“<\/p>\n\n\n\n

Now we will focus on coding colours through Hue, Saturation and Brightness (HSB). <\/p>\n\n\n\n

Why another way to code colours?<\/h2>\n\n\n\n

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.<\/p>\n\n\n\n

Top tip.<\/span><\/p>

RGB = red, green blue.
HSB = hue, saturation and brightness. <\/p><\/blockquote><\/figure>\n\n\n\n

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.<\/p>\n\n\n\n

Coding<\/strong><\/em> 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).<\/p>\n\n\n\n

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<\/em> for specific purposes. <\/p>\n\n\n\n

Scientists, however, do need ways to express their ideas, and create colour models<\/strong><\/em> that abstractly describe their ideas, and define colour spaces<\/em><\/strong> to present their ideas. <\/p>\n\n\n\n

Colour models <\/strong>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. <\/p>\n\n\n\n

The colour space <\/strong>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. <\/p>\n\n\n\n

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)<\/a>. <\/p>\n\n\n\n

\n

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. <\/p>\n\n\n\n\"Newton's<\/a>\n<\/div><\/div>\n\n\n\n

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.<\/p>\n\n\n\n

Hue<\/h2>\n\n\n\n

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

Top tip.<\/span><\/p>

Try to remember some of the angles. Red at 0\u02da, yellow 60\u02da, green 120\u02da, cyan 180\u02da, blue 240\u02da<\/p><\/blockquote><\/figure>\n\n\n\n

\"Hue
Hue colour wheel<\/figcaption><\/figure><\/div>\n\n\n\n

When you are using different computer programs (such as a photo editor) you may need to choose colours through a colour picker<\/strong>. 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.<\/p>\n\n\n\n

\"\"
Hue colour line<\/figcaption><\/figure>\n\n\n\n

If we look further, we can see the principles of light mixing at work! The primary hues<\/strong> of red, green and blue are equally separated around the circle: red at 0\u02da, green at 120\u02da and blue at 240\u02da.<\/p>\n\n\n\n

\"Primary
Primary colours in the HSB model<\/figcaption><\/figure><\/div>\n\n\n\n

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. <\/p>\n\n\n\n

Top tip.<\/span><\/p>

Try to memorise the colour wheel positions of both the primary and the secondary colours.<\/p><\/blockquote><\/figure>\n\n\n\n

\"Primary
Primary and secondary colours in the HSB model<\/figcaption><\/figure><\/div>\n\n\n\n

Saturation<\/h2>\n\n\n\n

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\u02da to get a deep-blue colour, we can then change the saturation levels by 10% starting at 0%.<\/p>\n\n\n\n

\"Different<\/figure><\/div>\n\n\n\n

We can do the same with a value of orange. Starting with no colour and moving towards the full colour hue.<\/p>\n\n\n\n

\"Change<\/figure><\/div>\n\n\n\n

Brightness (or value)<\/h2>\n\n\n\n

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. <\/p>\n\n\n\n

\"Showing<\/figure><\/div>\n\n\n\n
\"Showing<\/figure><\/div>\n\n\n\n

HSB (HSV) model space<\/h2>\n\n\n\n

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

\"Hue
Hue Saturation Brightness (HSB) colour space, represented by a cylinder<\/figcaption><\/figure><\/div>\n\n\n\n

This model helps us understand how we can manipulate the values. <\/p>\n\n\n\n