Web Colour

Defining Colours on the Web

On a computer monitor or TV screen, all the colours you see are produced using a combination of Red, Green, and Blue light or RGB. Older screens are set to recognize 256 colour combinations. Modern ones, over 16 million colours. You may find it easier to work with if you understand the basics.

Colours in the web world are normally defined using “Hexadecimal” numbers. Hexadecimal numbers are in base 16. This is the computer worlds way of counting to 16 with 1 digit. The characters are from 0 to F. i.e.: …6,7,8,9,A,B,C… Hex numbers can define up to 256 values with 2 digits.

Just remember: a computer is binary – it understands on or off, so everything is multiples of 2: 8-bit, 256 colours, 16.7 million, etc. And the reason for hex numbers is that they take less memory and processing – less space and time. Hex also starts with 0, not 1.

For the web environment, design used to be limited to the colours available on most screens. Also, Macs and PC’s used to use slightly different colour palettes. There was only 216 colours common to both sets of 256 colours. But now we can use the full gamut: 256 values each of red, green and blue. That’s 256 x 256 x 256 = 16.7 million colours. This is also known as 24-bit or True colour. All monitors today are set this high. Some are “32-bit” that adds an 8 bit alpha or transparency channel. (screen resolution such as HD or 720p or 480i is a measure of the number of points on the screen, not the colour depth)

#000000

#FFFFFF

#CCCCCC

#CCFFCC

#990033

Each hex colour number starts with the # symbol and is followed by 6 characters. Each is 3 pairs of 2 numbers representing red, green and blue, i.e.: #rrggbb. The range begins with black at #000000 and ends with white at #FFFFFF. Any set where the 3 pairs are the same is a greyscale colour.

By sticking with pairs of the specific hex numbers 00, 33, 66, 99, CC, and FF, you will stay in the 216 “web safe” arena. For example, #CCFFCC or #990033 above. This is much less of an issue now with modern monitors, but web safe colours still offer a simple, reliable palette.

In CSS, colours are defined in the Style instead, offering much more control. But the same principles and naming conventions hold true. #32bfc1 is a nice Aquamarine in HTML or CSS.

I have organized a Colour Table of Hex values for your reference, on a background of the coded colour. Even if you didn’t get any of this, just pick a colour you like and use the # on it in your graphics or web design software. That’s it.

Alternative codes:

Keywords
In HTML and CSS colour tags, you can use colour “Keywords” such as black, red, yellow, etc. However, unless you simply want to set black or white, the colour range is very limited. Using Hexadecimal codes gives you much more control.

RGB
You can also set values with RGB itself, but this is actually more involved. The format is: rr:gg:bb. In RGB talk, #FFFFFF (white) would be 255:255:255. (not 256 as the count starts with 0)  #000000 (black) would be 0:0:0.

Percent
Some software also uses % values for RGB.

Here are  the equivalents:

Hex	RGB	%
00	0	0
33	51	20
66	102	40
99	153	60
CC	204	80
FF	255	100

I used to have a large character code table for producing symbols in HTML – like Ø, ψ, or ©.
This site is more complete.

David

---