GetDotted Domains

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

The "Freeola Customer Forum" forum, which includes Retro Game Reviews, has been archived and is now read-only. You cannot post here or create a new thread or review on this forum.

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 & GetDotted are rated 5 Stars

Check out some of our customer reviews below:

Brilliant service.
Love it, love it, love it!
Christopher
Wonderful...
... and so easy-to-use even for a technophobe like me. I had my website up in a couple of hours. Thank you.
Vivien

View More Reviews

Need some help? Give us a call on 01376 55 60 60

Go to Support Centre
Feedback Close Feedback

It appears you are using an old browser, as such, some parts of the Freeola and Getdotted site will not work as intended. Using the latest version of your browser, or another browser such as Google Chrome, Mozilla Firefox, or Opera will provide a better, safer browsing experience for you.