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,216256×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!

RGB Colour Model
The RGB Colour Model
The RGB Colour Model – Basic Colours
Colour Red Green Blue
Black000
White255255255
Red25500
Green02550
Blue00255
Yellow2552550
Cyan0255255
Magenta2550255

The RGB–Hexadecimal Relationship

So back to this quiz question, how are these all equal?

#FFFFFF=RGB(255,255,255)=White\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
00
11
22
33
44
55
66
77
88
99
10A
11B
12C
13D
14E
15F

So let’s take a look at a hex value of #FFFF00, we can see that:

Red=FFRed=\text{FF}
Green=FFGreen=\text{FF}
Blue=00Blue=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.

Let x=the first character in the pair\text{Let }\mathit{x} = \text{the first character in the pair}
Let y=the second character in the pair\text{Let }\mathit{y} = \text{the second character in the pair}
RGB value=(x×16)+y\text{RGB value}=(\mathit{x}×16)+\mathit{y}

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

F=15F=15
Red=(15×16)+15=255\text{Red} = (15 \times 16) + 15 = 255
Green=(15×16)+15=255\text{Green} = (15 \times 16) + 15 = 255
Blue=(0×16)+0=0\text{Blue} = (0 \times 16) + 0 = 0

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

#FFFF00=RGB(255,255,0)\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.

CMYK Colour Model
The CMYK Colour Model
The CMYK Colour Model – Basic Colours
Colour Cyan Magenta Yellow Key (Black)
Black0001
White0000
Red0110
Green1010
Blue1100
Yellow0010
Cyan1000
Magenta0100

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=R/255R{\prime}=R/255

G=G/255G{\prime}=G/255

B=B/255B{\prime}=B/255

Next up is calculating the key (black) value.

K=1max(R,G,B)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=(1R​−K)/(1K)C=(1−R{\prime}​−K)/(1−K)

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

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

  1. Jump up ^ Craig F. Bohren (2006). Fundamentals of Atmospheric Radiation: An Introduction with 400 Problems. Wiley-VCH. ISBN 3-527-40503-8. 
  2. 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.