Colour part 2: HSB colour, Lab colour and hexadecimal colour

In the first part of this series on colour, we had a look at the difference between RGB and CMYK and how those colour modes work. Let's pick up where we left off: looking at a colour in the Photoshop colour picker.

Colour modes in the Photoshop colour picker

The Photoshop colour picker offers a very good opportunity to understand how the different colour modes work.

The same teal green colour is described in 5 different ways in the Photoshop colour picker: HSB, Lab, RGB, hexadecimal (the box with 6 numbers preceded by a hashtag) and CMYK.
The same teal green colour is described in 5 different ways in the Photoshop colour picker: HSB, Lab, RGB, hexadecimal (the box with 6 numbers preceded by a hashtag) and CMYK.

The same teal green colour is described in 5 different ways in the colour picker: HSB, Lab, RGB, hexadecimal (the box with 6 numbers preceded by a hashtag) and CMYK.

The CMYK value, as we've seen, is only for printing; the other four models all belong to digital screens and therefore on the web. It can get confusing with all those values and numbers, so let's have a look at what these letters and numbers stand for, and when and how to use them.

HSB Colour

HSB stands for Hue, Saturation and Brightness. This colour model is also known as HSV, where the V stands for Value. It is essentially the same as HSB.

Hue is the actual colour on the spectrum – that is to say, red or blue or green, etc.

Saturation is the intensity of that colour.

Brightness is the amount of light present in that colour.

The HSB colour model is a nonlinear transformation of the RGB colour model, as it is three-dimensional.

In the HSB colour model, the hue is specified in the color field as an angle from 0° to 360° that corresponds to a location on the color wheel. Saturation and brightness are specified as percentages. In the color field, the hue saturation increases from left to right and the brightness increases from the bottom to top.

Image taken from WikiPedia, for image license on Creative Commons see https://commons.wikimedia.org/wiki/File:HSV_color_solid_cylinder_alpha_lowgamma.png#/media/File:HSV_color_solid_cylinder_alpha_lowgamma.png
Image taken from WikiPedia, for image license on Creative Commons see https://commons.wikimedia.org/wiki/File:HSV_color_solid_cylinder_alpha_lowgamma.png#/media/File:HSV_color_solid_cylinder_alpha_lowgamma.png

Practical use of HSB colour

Let's say that the teal colour in the colour picker above is the accent colour for links on the website I am designing, because it is the main colour in the branding palette. I want to keep things muted and simple in the hover, active and current page states and I also need to keep to that exact hue because of the branding. When using the HSB colour model, I know that if I simply take down the saturation and/ or the brightness, I can end up with colours that are of that exact same hue – only less bright or brighter or less saturated.

HSB buttons showing different shades of green obtained by changing the brightness only.
HSB buttons showing different shades of green obtained by changing the brightness only.

colour-picker-2

The same teal green colour is described in 5 different ways in the Photoshop colour picker: HSB, Lab, RGB, hexadecimal (the box with 6 numbers preceded by a hashtag) and CMYK.

The HSB colour system can be useful when working with brand colours: you can create a brand palette that maintains the same hue of the main brand colour, only by changing its brightness.

Lab Colour

Let's have a look at the Lab colour model values on the right of the picker, above CMYK.

In RGB, the colours are described and obtained by mixing amounts of red, green and blue: in Lab, colours are described and obtained by measuring the levels of Luminosity and their position between red and green (a) and yellow and blue (b). Summing up

The L value specifies the luminance of a color.

The A value specifies how red or green a color is.

The B value specifies how blue or yellow a color is.

In the Adobe Color Picker, the values for L  go from 0 to 100, while for A and B they go from ‑128 to +12.
The Lab colour model includes all perceivable colors, which means that its gamut (range) exceeds those of the RGB and CMYK color models. If you remember, the RGB colour model has more than 16 million colors in its gamut, while CMYK is quite a bit smaller.

So the Lab colour model is the widest: it is designed to approximate human vision as it encapsulates all visible colours; it aspires to perceptual uniformity and is also supposedly device-independent.

Practical use of Lab colour

First of all let's point out that Lab is mostly a theoretical model that has no application in meat-space:  you cannot capture images in Lab colour on your camera or scanner, nor can you print in Lab colour, on any printer, nor can you save a Lab jpeg and display it on the web: none of these platforms or devices can display the whole Lab gamut.

Does it have any practical use then? Yes, it can be extremely useful in some situations.

The Lab colour model is very useful in advanced photo editing, when, for instance you have a noise problem in an image: 'noise' (graininess, haziness usually caused by low light) is best dealt with by working with luminosity only, so by targeting the Luminosity value in the Lab colour model you can improve local sharpening and/or contrast.

The same applies when you need to do very specific saturation or contrast edits that are simply not possible with RGB. For your information – Photoshop uses Lab for most of its calculations.

Playing with Lab colour values also allows you to get very creative with your images.

Having said this, for run-of-the-mill, simple photo editing tasks you will probably not need to use Lab.

Hexadecimal Colour

Finally let's have a look at the hexadecimal colour value, which is the most useful of the 3 in a web-based environment: the hexadecimal colour code is simply a different transcription of RGB color, the model used on the web.

It is often used in CSS (Cascading Style Sheets, the styling language of web design, describing how HTML page structure must be rendered) to assign colour to objects or type, instead of using the 3 RGB values for red, green and blue.

The hexadecimal code is created by computers: the 16,777,216 unique combinations of RGB colour are expressed by six characters made from ten numerals and six letters, preceded by a hash mark.

You might remember that number, which is nothing other than the 3 RGB values, 0 to 255, multiplied by one another: 256x256x256 equals 16,777,216. See the previous post on here for more on that.

In the hexadecimal code the first two digits represent red, the second green, the third blue. So the hexadecimal code is just another way to name the same colour.

In the hexadecimal code the first two digits represent red, the second represent green, the third represent blue.

So a colour described in the hexadecimal code is just another way to name the same RGB colour.
Here's how:

Hex numbers use 16 digits:
0 1 2 3 4 5 6 7 8 9 A B C D E F
Same as in RGB  zero, "0", stands for zero light – the absence of light, which means black.

F is 15 times the intensity of the color of 0. Combinations of these digits create different shades of a particular color. Double Zero, "00," is equal to zero hue. FF is equal to a pure color.
This color representation is done three times, once for red, once for green, and once for blue – in this order, which is the same as in the RGB acronym.

For example:
FFFFFF is white. All three colors are all set to FF, that is to say pure colour. As we know, 3 full beams of RGB produce white.  On the exact other end of the spectrum sits 000000. The three beams of red, green, and blue are set to no light: Black.

Practical use of Hexadecimal colour

Hexadecimal colour codes are used in web design to style colours in CSS. Please note that the final colour is exactly the same as if you were using the correspondent RGB notation: there is no difference. It's just another way of calling it.

So why use it?

Well – when you are writing code, it's quicker and more compact to write #1f2fa2 than rgb(31,47,162). However, if you were to later decide to change the opacity of the colour, you would have to go back to RGB (RGBA in fact) again. If you are interested in this aspect, there is a stackoverflow discussion that's a bit old but still very useful.

And if you ever need a quick tool to translate hex to RGB and vice versa: this wonderful website is your friend.

Did you enjoy this? I hope it helped you. Please use the comments to let me know what you think. Thank you!

Leave a comment