You’re probably aware that when it comes to computers, colours are represented by a series of numbers. In this post, John Espirian explains two of the most common colour systems used on the web.

There are lots of colour systems available, but the two mentioned here use the additive colour system. This means they are based on the combination of light, with the primary colours being red, green and blue. In the additive system, red, green and blue together produce white.

### RGB maths

`red + green + blue = white`

For comparison, paints, dyes and inks use the subtractive colour system.

Sticking with the idea of light, imagine that the red, green and blue components are coloured **torches** pointing at the same spot. But these torches are special: instead of being either on or off, they can be *partially* on. Consider that the torches have analogue dials rather than on/off buttons.

With this idea in mind, we can move straight on to the two most popular colour systems on the web.

If you already know about RGB colours, take a look at this very useful resource for looking up colour values: rgb.to

## RGB colours

Each of the RGB (red, green, blue) system’s three torches has a setting between `0`

and `255`

.

A value of `0`

means the torch is **off**.

A value of `255`

means the torch is **on** and shining at its maximum.

If all the torches are off, there’s no colour at all. This is **black**:

`R: 0`

`G: 0`

`B: 0`

If all the torches are on and at their maximum, we instead see **white**:

`R: 255`

`G: 255`

`B: 255`

To save space, we’ll use shorthand to represent some further examples:

`RGB(0, 0, 0)`

is black`RGB(255, 0, 0)`

is red`RGB(0, 255, 0)`

is green`RGB(0, 0, 255)`

is blue`RGB(255, 255, 255)`

is white

To produce other colours, we just need to use different combinations of values. If you’re not used to additive colour, the results might sometimes seem a little counterintuitive. For example, yellow is red plus green: `RGB(255, 255, 0)`

.

### More RGB maths

`red + green = yellow`

A visual example should be helpful:

The above examples show our torches either off (`0`

) or on at maximum (`255`

). But any whole number in between these values is also valid. So we could have, say, `RGB(213, 82, 7)`

, which has a large red value and smaller green and blue values. This colour looks orange.

## HEX colours

HEX colours are exactly the same as RGB, but they’re expressed using hexadecimal (base 16) numbers instead of the decimal (base 10) system we’re more used to.

If you haven’t seen the hexadecimal system of counting before, it boils down to each column of numbers accepting more than 10 possible figures. Instead, we can represent up to 16 figures per column – and that’s done by using some letters as well as our usual numbers.

Here’s how this looks for the `16`

numbers between `0`

and `15`

.

Decimal | ` 0` |
` 1` |
` 2` |
` 3` |
` 4` |
` 5` |
` 6` |
` 7` |
` 8` |
` 9` |
`10` |
`11` |
`12` |
`13` |
`14` |
`15` |
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|

Hexadecimal | ` 0` |
` 1` |
` 2` |
` 3` |
` 4` |
` 5` |
` 6` |
` 7` |
` 8` |
` 9` |
` A` |
` B` |
` C` |
` D` |
` E` |
` F` |

If we consider two-digit numbers, base 10 uses a ‘tens’ column and base 16 a ‘sixteens’ column. This means that RGB values can be expressed in fewer characters by using HEX. Here are some examples:

`FF = (16 × 15) + 15 = 255`

`F0 = (16 × 15) + 0 = 240`

`AB = (16 × 10) + 11 = 171`

`86 = (16 × 8) + 6 = 134`

Getting back to colours, we can represent the previous examples as follows:

Note that in HEX colour notation, we start the sequence of characters with the hash (#) symbol.

As you might be able to tell, the first two characters represent the red, the middle two characters the green, and the final two the blue.

To give one further example, our earlier code `RGB(213, 82, 7)`

can be written in HEX as `#D55207`

. Here it is:

## An easy way to look up RGB and HEX colours

Keeping these conventions in mind isn’t always easy. Here’s an excellent resource for looking up RGB and HEX colours:

### RGB and HEX colour website

https://rgb.to – look up RGB and HEX values

The website also includes details about Pantone and other colour systems.

If you click on any of the colour codes listed above, you’ll be taken to the relevant page on https://rgb.to – neat, eh?

Here’s another good colour resource:

### Adobe Color CC (formerly Adobe Kuler)

https://color.adobe.com – a colour wheel for RGB and HEX

## How many colours are there in the RGB and HEX systems?

Each torch’s value must be between `0`

and `255`

, which means `256`

possible values. We have `3`

torches and must multiply the figures to work out how many possible colours there could be in these systems:

`256 × 256 × 256 = 16,777,216`

That’s more than **16.7 million colours**.

## Let’s wrap up

There’s a lot more that could be written about colour, but these basics should help you understand enough about two of the most popular colour systems used on the web.