A question came up last night at the regular Demo Bar quiz that I didn’t expect.
What colour is represented by the hex value #FFFFFF?
So if you’ve done any web development you probably know the answer is white. But why?
A colourful background
At the most basic level you could say that we see things as different colours because light reflects off those objects in varying wavelengths. The colours we are able to perceive are limited to what is known as “visible light” – light with a wavelength between 390 nm and 700 nm.
Colour | Wavelength Interval [nm] | Frequency Interval [THz] |
---|---|---|
Red | ~ 700–635 | ~ 430–480 |
Orange | ~ 635–590 | ~ 480–510 |
Yellow | ~ 590–560 | ~ 510–540 |
Green | ~ 560–520 | ~ 540–580 |
Cyan | ~ 520–490 | ~ 580–610 |
Blue | ~ 490–450 | ~ 610–670 |
Violet | ~ 450–400 | ~ 670–750 |
Increase the wavelength to over 1000 nm and the human eye can’t see it anymore, but you’re remote control wouldn’t work without it – infrared. At the other end of the scale, outside the visible spectrum, we have ultraviolet.
To create these colours we have a few different techniques we can use, let’s take a look at them.
Additive Colouring – The RGB Colour Model
In the world of computers, the RGB colour model is used everywhere; your browser, Photoshop, operating system, even MS Paint. The idea behind it is very simple, choose a number from zero to 255 for red, green and blue and you end up with a new colour. We have 256 values for red, green, and blue to choose from so we can work out exactly how many different colours can be produced using the RGB model.
The human eye can distinguish about 10 million different colours[2], so I think we’re covered. Let’s see it in action!
Colour | Red | Green | Blue |
---|---|---|---|
Black | 0 | 0 | 0 |
White | 255 | 255 | 255 |
Red | 255 | 0 | 0 |
Green | 0 | 255 | 0 |
Blue | 0 | 0 | 255 |
Yellow | 255 | 255 | 0 |
Cyan | 0 | 255 | 255 |
Magenta | 255 | 0 | 255 |
The RGB–Hexadecimal Relationship
So back to this quiz question, how are these all equal?
The Hexadecimal System
Each colour in the hexadecimal system comprises of six characters;
- the first two characters represent red;
- the middle two characters represent green; and
- the last two characters represent blue.
To make things clearer, let’s add some colour to the hex string: #FFFFFF. OK, that all makes sense, but why don’t we have numbers zero to 99, where did all the F’s come from?
The word hexadecimal comprises hexa-, from the Greek for six, -decimal from the Latin for tenth.
So we’re not dealing with a normal base 10 numbering system, we’re dealing with a base 16 numbering system. So the “numbers” available to us are as follows.
Number | Hex Value |
---|---|
0 | 0 |
1 | 1 |
2 | 2 |
3 | 3 |
4 | 4 |
5 | 5 |
6 | 6 |
7 | 7 |
8 | 8 |
9 | 9 |
10 | A |
11 | B |
12 | C |
13 | D |
14 | E |
15 | F |
So let’s take a look at a hex value of #FFFF00, we can see that:
We just need to convert the hexadecimal values into a numbers between zero and 255, and I just so happen to know the formula for the job.
Now we just need just substitute the values into the formula.
So we end up with the RGB value for the colour yellow!
Which is 100% red, 100% green and 100% blue, giving us white, and one point in the quiz.
If you’re still awake, there’s a few other systems we can use to define colours, for now I’ll leave you with the CMYK colour model.
Subtractive Colouring – The CMYK Colour Model
An alternative to the RGB system is the CMYK colour model. CMYK refers to the four colours used in the system, cyan, magenta, yellow and key (black). The CMYK model works by partially or entirely masking colours on a lighter, usually white, background. The ink reduces the light that would otherwise be reflected. Such a model is called subtractive because inks “subtract” brightness from white[2].
Instead of having values from zero to 255 like we saw in the RGB colour model, the CMYK model has decimal values between zero and one. See here for the conversion between the two.
Colour | Cyan | Magenta | Yellow | Key (Black) |
---|---|---|---|---|
Black | 0 | 0 | 0 | 1 |
White | 0 | 0 | 0 | 0 |
Red | 0 | 1 | 1 | 0 |
Green | 1 | 0 | 1 | 0 |
Blue | 1 | 1 | 0 | 0 |
Yellow | 0 | 0 | 1 | 0 |
Cyan | 1 | 0 | 0 | 0 |
Magenta | 0 | 1 | 0 | 0 |
Conversions
RGB to CMYK
Converting between the two is pretty straight forward, let’s take a look at the formulae.
First we need to rewrite the R, G and B values on a zero to one scale.
Next up is calculating the key (black) value.
Once we have the key value, we can calculate the remaining cyan, magenta and yellow.
- Jump up ^ Craig F. Bohren (2006). Fundamentals of Atmospheric Radiation: An Introduction with 400 Problems. Wiley-VCH. ISBN 3-527-40503-8.
- Jump up ^ Judd, Deane B.; Wyszecki, Günter (1975). Color in Business, Science and Industry. Wiley Series in Pure and Applied Optics (third ed.). New York: Wiley-Interscience. p. 388. ISBN 0-471-45212-2.