So what are all these hexidecimal numbers and what do they stand for?
Well, instead of using a 10 base as in the decimal system, the hexidecimal system uses 16 base.
For instance, in the decimal system, you count through 10 numbers (0 through 9) before adding a digit and starting over (10 to 19 and so forth)
In the hexidecimal system you count through 16 numbers before adding an extra digit and starting over.
The numbers are as follows:
| Hexidecimal: | ||||||||||||||||
| Decimal Equiv: | ||||||||||||||||
| Hexidecimal: | ||||||||||||||||
| Decimal Equiv: | ||||||||||||||||
In the decimal system, the we have the ones digit, the tens digits, etc. These are simply 10 raised to the power of 0, 10 raised to the power of 1 and so forth. To the the full value of the number, we simply add all the digits together: so for the number 25, we take:
to get
Similarly in the hexidecimal system, we have the 16^1 digit and the 16^0 digit. Therefore, in order to get our number, we have to do some adding:
From the chart above, we note that A is 10. So,
We won't do anymore than two digits since that's all we need in HTML colour coding.
Why do we use the hexidecimal system? When HTML was first developed, all computers used the hexidecimal system as opposed to the decimal system. As a general rule, they still do. In addition, two digits in hexidecimal form can give many more shades of colour than two digits in the decimal system. With the decimal system, we can only go as high as 99, whereas in the hexidecimal system, we can go up to FF which is 255! From 00 to FF, that give 256 different shades of red, blue and green to play around with. That's a lot of colours!
So how to find the hexidecimal coding for the colours you want?
It requires a bit of math, so if you don't like math, I suggest using the pages I recommended earlier, or simply use a calculator which has a DEC -> HEX conversion button on it.
Using a picture editor (MS Paint, Adobe Photoshop, etc.), find the shade that you want under "Edit Colours". These applications will give you the RGB (Red, Green, Blue) numbers in decimal form. In general, white is FFFFFF -- the highest amount of every colour -- and black is 000000 -- the lowest amount of every colour. To convert to hexidecimal, do the following:
Take the number and divide by 16. (We'll use 239 in our example.)
Get rid of the decimal numbers and you have your 16s digit. Convert it to the hexidecimal system.
multiply the the 16's digit by 16 and subtract from the original number:
This gives the ones digit. Convert to hexidecimal system.
And voila! You have your number:
Do this for each of your RGB numbers and fit them all together for your HTML colour code.
Let's take a full blown example. Supposing you choose a teal background colour with the following RGB numbers:
ones digit
30-1*16 = 30-16 = 14 --> E in hexidecimal form.
R = 1E
ones digit
150-9*16 = 150 - 144 =6 --> 6 in hexidecimal form.
G = 96
ones digit
160-10*16 = 160-160=0
B = A0
Therefore, in your HTML <BODY> tag, you type:
Here is what this colour looks like. Do the same for all your other colours, and you've got it!
Return to the HTML Lesson Guide
Return to Colours Lesson
Read the next lesson: Formatting the Text