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

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