In the first article of this series on colour, we had a look at the difference between RGB and CMYK and how those digital colour modes work. Let’s pick up where we left off: looking at a colour in the Photoshop colour picker, we can learn about more digital colour modes, and how we can use them to improve the accessibility of our designs.
Colour modes in the Photoshop colour picker
The Photoshop colour picker offers a very good opportunity to understand how the different digital colour modes work.
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 digital colour modes 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 is my favourite of the digital colour modes that we use on a daily basis, because it is the most useful from a practical point of view. 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. The hue number simply refers to the position of the colour on the wheel.
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 mode, 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.
Here’s a linear visualisation of this digital colour mode, clarifying the position on the wheel that the Hue number refers to:
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.
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. Isn’t this a beautifully simple trick! Technically, you can argue (and I always do) that you haven’t changed the brand colour at all.
Lab Colour
Let’s have a look at another digital colour mode: the Lab colour mode 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 mode 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, out of all the digital colour modes, even Lab 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 Opens in new window 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 code, which is the most useful of the 3 in a web-based environment. The hexadecimal colour code is not exactly a digital colour mode: rather, it’s simply a different transcription of RGB colour, the mode used on the web.
It is often used in CSS 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 represent green, the third represent blue. So a colour described in the hexadecimal code is just another way to name the same RGB colour.
Breaking down Hex numbers
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 colour of 0. Combinations of these digits create different shades of a particular colour. Double Zero, “00,” is equal to zero hue. FF is equal to a pure color.
This colour 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 colours 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 Opens in new window 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 Opens in new window.
