I had a conversation with someone recently about digital colour and the exact colour to use; they had no idea what I was talking about. Now this wasn’t just your average person, this was a graphic design graduate. This person had gone through both college and university and they couldn’t tell me what RGB colour they had used in their design. This was a little shocking to me, please comment if this is normal now?
In their defence they studied mostly print so CYMK was their thing, so for all the people out there who have no idea why the web doesn’t just use print colour or what the differences are I’ve put together this article.
Monitor colours
I'll be quick on this, on the web there are many formats we can use for colour, but the 2 we do use are RGB and hex. As we’ll see in a moment, these are actually the same format, just expressed in different ways. There is also a RGBA, so I’ll explain that too.
There is a whole history on colours on computers, from green text, grey text, 8 bit colour, 16bit colour and so on. If you have some time, take a look at the Wikipedia entries, they are extremely interesting. I’ll skip the history and get right into today. We use 24-bit colour (32-bit with alpha) today on our monitors and that means we have 16.5 million colours we can use. How do we get that number? Simple. 256 shades of red, 256 shade of green and 256 shades of blue times that all together and we get 16,777,216 (or 224) colours expressed as 24-bit.
Hold on, why do we even use red, green and blue? If you remember your primary colours they are red, yellow and blue, not green. This also links to why not CYMK (Cyan, Yellow, Magento and blacK), Red, Yellow and Blue are primary for ink or paint. These primary colours are used when light hits a surface and the light is partially absorbed. The reflected, remaining light creates the colour.
What we deal with on the web it light passing through a filter on a screen. With ink, we can create all the visible colours with red, yellow and blue, for example brown is a mix of red, yellow and blue in equal measure and with light we use red, green and blue to create all visible colours. For example brown is a mix of green and blue in equal amounts with lots of red.
Red, Green & Blue
We use RGB colour, between 0 and 255 (256, see, it a fits nicely with above) how would we show this? For web we would use something like:
rgb(255, 255, 255) = white = all light on full
rgb(165, 42, 42) = brown
The first number is the amount of red, second is the amount of green and third number is the amount of blue.
Most of the time a developer will need hex colour, which is actually the same colours, but expressed a little differently. Hex is a hash followed by 6 characters like
#A52A2A
This looks a bit strange until you realise it is the same colour as above, just expressed in hexadecimal and, it’s quite easy to work out.
First, remove the hash, then the first 2 characters are the red, second 2 are green and the last 2 are blue, but instead of 0 to 255 or 0 to 100, we use 0 to 9 then A to F like
0123456789ABCDEF
This means we can store 0 to 255 in just 2 digits, where 0-10 would only allow up to 100.
In the first column, for red, we might have:
- 00 = 0 of 255, so fully off
- FF = 255 of 255, so 100% red
- 77 = 127 of 255, or about 50% red
- A5 = 165 of 255, about 65% red
Why does 77 equal 127? Because we count in 16s not 10s so for the first column to tick over the second has to go all the way from 0 to F, not just 1 to 10. It’s difficult to work out every time so if you use a program like Photoshop it will give the hex colour under the RGB colour so you don’t have to work it out. If you have the RGB colour and want the hex there are many converters you can use, just do a quick search to find one.
Just to make things a little more confusing, as a shortcut Hex can be expressed with only 3 digits after the hash if each of the 2 digits is the same so
#22AAFF = #2AF
#CCCCCC = #CCC
#FFAA44 = #FA4
If the digits in 2 column sets are not the same, for example with brown #A52A2A, we cannot use this shortcut.
Alpha
The last part of this puzzle is the alpha, the number we need when we want to talk about transparency. This much easier to understand as it is just a percentage of the opacity between 0 and 1, 0 being transparent and 1 being opaque. A few examples are:
- 0.5 = 50% transparency
- 0.25 = 25% transparency
- 0.9 = 90% opaque (near opaque)
To express this as RGB we use
rgba(0, 0, 0, .5)
to show black, but 50% transparent.
We can do the same with hex by appending another 2 characters to the end so #00000077 would be the same black as above with 50% transparency.
In brief
So, to sum up, colour is RGB between 0 to 255 and we can use between 0 and 1 for opacity. That gives us all the colours of the Web. If you use any of the Adobe products you can get the hex colour to pass to your developers to make sure they stay on brand. No excuse to have the ugly, mismatched images logo and colours anymore.