
A Brief Explanation of Common Colour Models in Web Development: RGB
A person with normal colour vision can distinguish between one and two million colours. It is, therefore, almost impossible to describe a particular colour precisely without using some form of representation. Enter the colour model: a mathematical system of representing colour in a precise way.
Although numerous colour models exist, 3 primary models exist in web design and development: the RGB, CMYK and HSB models. In this post I shall be describing the RGB model.
The RedGreenBlue (RGB) Colour Model
The RGB model is an example of an additive colour model where the phenomenon of combining the model’s primary colours in various proportions is used to create a variety of brighter colours. Additive models are used to describe colours that emanate from glowing bodies such as screens and lights. For example, if you projected 3 beams of light, red, blue and green onto a white wall: overlapping the colour beams will produce a variety of colours. By overlapping red and green will produce yellow. By overlapping all three will produce white, and the absence of any bean is considered black.
In web development this “overlap” effect is represented as a triplet of numerical values between zero and 255 to represent the proportion of primary colours. For example, red is represented by RGB (255, 0, 0) , Yellow is represented by RGB(255, 255, 0), white is represented by RGB(255, 255, 255) and black is represented by RGB(0, 0, 0).
This is where it gets hairy: because each primary colour is represented by an 8bit value (256 possible values) using this model you can create 256 x 256 x 256 (16,777,216) unique colours .
An alternative to the RGB triplet notation is to represent the colour as hexadecimal numbers or “hex” numbers. A hex number (Base16 number representation) is written from 09 and then AF (0F vs 09 used in Base10). This is because the values of 0255 (in Base10) can be represented as two hex digits, for example 16 in base10 is F in base16. 255 = FF. Hex numbers can more easily be converted to binary – the base2 language understood by computer hardware. Web colours are written as three sets of hex pairs. The first set represents the red hue, the second the green hue, and the third the blue. White is written as ff ff ff or
#ffffff
while black is 00 00 00 or#000000
.For more examples of colour tables and codes please click here.
Next blog post will address the The Subtractive Colour Model: Cyan, Magenta, Yellow, Black (CMYK) followed by an explanation of the Hue, Saturation and Brightness (HSB) model.
24 Dec 2013 / @pareendaya / 0
Categories: Usability, Web Design, Web Development
Tags: Colour, Design, Web Development
Applying Nielson’s Usability Heuristics to Website Evaluation