Colours

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.

**The colors of the visible light spectrum**^[1]
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.

256×256×256=16,777,216

The human eye can distinguish about 10 million different colours^[2], so I think we’re covered. Let’s see it in action!

**The RGB Colour Model – Basic Colours**
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?

\text{\#FFFFFF}=RGB(255,255,255)=White

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.

**The Hexadecimal Numbering System**
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:

Red=\text{FF}

Green=\text{FF}

Blue=00

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.

\text{Let }\mathit{x} = \text{the first character in the pair}

\text{Let }\mathit{y} = \text{the second character in the pair}

\text{RGB value}=(\mathit{x}×16)+\mathit{y}

Now we just need just substitute the values into the formula.

F=15

\text{Red} = (15 \times 16) + 15 = 255

\text{Green} = (15 \times 16) + 15 = 255

\text{Blue} = (0 \times 16) + 0 = 0

So we end up with the RGB value for the colour yellow!

\text{\#FFFF00}=RGB(255,255,0)

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.

**The CMYK Colour Model – Basic Colours**
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.

R{\prime}=R/255

G{\prime}=G/255

B{\prime}=B/255

Next up is calculating the key (black) value.

K=1−max(R{\prime}​,G{\prime}​,B{\prime}​)

Once we have the key value, we can calculate the remaining cyan, magenta and yellow.

C=(1−R{\prime}​−K)/(1−K)

M=(1−G{\prime}−K)/(1−K)

Y=(1−B{\prime}​−K)/(1−K)

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.