Freeola Internet Get Dotted Domains Blog Guides Chat

Viewing Thread:
'Understanding hex for colours on web pages - brief guide'

Wed 12/07/06 at 19:11:
Regular
Posts: 46
Hi people,

I'd only just joined Freeola's chat, then we were cut off from the internet for over a week (arrgghh) after a lightening strike. Now I'm back, I notice some useful posts on various web dev subjects so I thought I'd write one on understanding the use of hex for colours (something I had trouble with for ages).

If you're writing a web page it's useful to be able to have fine control over the colours you're using, one way of doing this is by describing your colours using hex values.

A brief guide to hex for colour on web pages:

Hex: a number system which goes from 0 to F, rather than the standard decimal system which goes from 0 to 9.

So:
Hex = Decimal
0 = 0
1 = 1
...
9 = 9
A = 10
B = 11
...
E = 14
F = 15

So if I said I had C (in hex) apples, I would mean I had 13 (in decimal) apples.

Also, we're used to the idea of 32 meaning 3 tens plus 2 units ((3x10)+2), well in hex the base is 16 rather than 10, so in hex 32 means 3 sixteens and 2 units, and so - the last complicated bit - when converted to decimal is 32 = 50 ((16x3)+2)).

Hex = Decimal
32 = 50 - (16x3)+2
20 = 32 - (16x2)+0
A1 = 161 - (10x16)+1 (because A=10)
FF = 255 - (16x15)+15 (because F=15)

Colours: So hopefully the principle of hex as a numbering system based on 16 is clearish at least, next is representing colours with hex numbers.

Each colour on a webpage is made up of 3 bits - the red bit, the green bit and the blue bit (so it's called RGB). Each of the bits, red, green and blue, has a hex number from 00 to FF (in decimal: from 0 to 255).

An example colour value on your web page (or css file) might look like 'font-color="#FFAA00"'. The # is used to indicate a hex valued colour, the first two numbers (FF) are the red part, the second two (AA) are the green part and the third two (00) are the blue part.

Each of the numbers describes the amount of light of that colour, so (and this is important) the higher the number the lighter the colour.

So
FF0000 is pure red,
00FF00 is pure green.
0000FF is pure blue.

To get white - FFFFFF
To get black - 000000
To get yellow - FFFF00
To get cyan - 00FFFF
To get magenta - FF00FF

FFAA22 is full red red, quite a lot of green and a bit of blue (=orange).
F912AA is almost full red, not a lot of green and quite a lot of blue (=bright pink).

It takes a little while to get used to, but if you remember that it's coloured light you're adding that'll help.

I hope somebody finds this helpful.

Jo
xxx
There have been no replies to this thread yet.
Wed 12/07/06 at 19:11:
Regular
Posts: 46
Hi people,

I'd only just joined Freeola's chat, then we were cut off from the internet for over a week (arrgghh) after a lightening strike. Now I'm back, I notice some useful posts on various web dev subjects so I thought I'd write one on understanding the use of hex for colours (something I had trouble with for ages).

If you're writing a web page it's useful to be able to have fine control over the colours you're using, one way of doing this is by describing your colours using hex values.

A brief guide to hex for colour on web pages:

Hex: a number system which goes from 0 to F, rather than the standard decimal system which goes from 0 to 9.

So:
Hex = Decimal
0 = 0
1 = 1
...
9 = 9
A = 10
B = 11
...
E = 14
F = 15

So if I said I had C (in hex) apples, I would mean I had 13 (in decimal) apples.

Also, we're used to the idea of 32 meaning 3 tens plus 2 units ((3x10)+2), well in hex the base is 16 rather than 10, so in hex 32 means 3 sixteens and 2 units, and so - the last complicated bit - when converted to decimal is 32 = 50 ((16x3)+2)).

Hex = Decimal
32 = 50 - (16x3)+2
20 = 32 - (16x2)+0
A1 = 161 - (10x16)+1 (because A=10)
FF = 255 - (16x15)+15 (because F=15)

Colours: So hopefully the principle of hex as a numbering system based on 16 is clearish at least, next is representing colours with hex numbers.

Each colour on a webpage is made up of 3 bits - the red bit, the green bit and the blue bit (so it's called RGB). Each of the bits, red, green and blue, has a hex number from 00 to FF (in decimal: from 0 to 255).

An example colour value on your web page (or css file) might look like 'font-color="#FFAA00"'. The # is used to indicate a hex valued colour, the first two numbers (FF) are the red part, the second two (AA) are the green part and the third two (00) are the blue part.

Each of the numbers describes the amount of light of that colour, so (and this is important) the higher the number the lighter the colour.

So
FF0000 is pure red,
00FF00 is pure green.
0000FF is pure blue.

To get white - FFFFFF
To get black - 000000
To get yellow - FFFF00
To get cyan - 00FFFF
To get magenta - FF00FF

FFAA22 is full red red, quite a lot of green and a bit of blue (=orange).
F912AA is almost full red, not a lot of green and quite a lot of blue (=bright pink).

It takes a little while to get used to, but if you remember that it's coloured light you're adding that'll help.

I hope somebody finds this helpful.

Jo
xxx

Freeola is a UK internet service provider offering the best value and extensive free services. Please compare our domain name registration prices or check out our UK high speed internet access. If you are in business please see examples of our free hosting at Freeola.com/customer-sites.

Safe and Secure Payment