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.

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?

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:

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!

So to finally answer the question…

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.

Next up is calculating the key (black) value.

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

  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. 

Related Posts

JavaScript | Flattening Arrays

A one-line code snippet to flatten arrays in JavaScript

First tracks ever – written and recorded!

So last week I sat down and tried to write some songs, the first time I tried was years ago, and they were rubbish. I think these ones are a bit better, the one at the end of this post was inspired by living in China for a few years.

At long last – TTC

So this one’s for Ian, leaving Yangshuo after so long and having played thing song on his own and with the band countless times over the years, it’s finally gone digital!

Guilin Waterpark Gig

Probably our most fun gig to date was in Guilin Victory Park, a massive water park, a few square kilometres in area. We must have seen thousands of people there enjoying the rides and sunshine, everything in China seems to be on a completely different scale to the west, bigger, faster, longer, and definitely more crowded!

Home recording studio

For those of you not in China or don’t know about Taobao it’s basically eBay on steroids.

I’m a big faker

Definitely one of our strangest gigs. Well, if you could call it a gig. Five foreigners standing on a giant illuminated cityscape pretending to play along to a Bruno Mars track (of which I have ridded my mind of).

Tan Ka Guitar promo work

Whilst having some dinner at Alley Bar, quite possibly one of their very nice home-made pasta dishes, the Chinese owner asked if I’d be interested in recording some songs for a Shanghai-based guitar company.

Three Pigs

A day out on the rock at Yangshuo's latest crag.

Watch Out!

Definitely one of our strangest gigs. Well, if you could call it a gig. Five foreigners standing on a giant illuminated cityscape pretending to play along to a Bruno Mars track (of which I have ridded my mind of).

Pixyll in Action

See what the different elements looks like. Your markdown has never looked better. I promise.