Warning - Maths Alert!: If you don't like maths, don't read this - there's no need and you can easily write HTML without knowing any of this paragraph which is just here if anyone is sad enough like me and wants to know a bit more about hex! Strapped in? Here goes...

Decimal is what is called a "base 10" number system - there are ten values: 0,1,2,3,4,5,6,7,8,9. Binary (the lowest leven of language that your computer speaks) is what is called a "base 2" number system - there are only two values: 0 and 1 and these correspond to voltage states in a computer's circuitry (&uqot;on" or "off") which is why computers speak this language, so to speak!! Hexadecimal is what is called a "base 16"number system - there are sixteen values: 0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F - see, count those up on your fingers and you'll see there are sixteen of them - you always have to remember to count the "0" when talking about numbers in this way - not intuitive I know! Thus "F" can be thought of as analogous to 10 decimal, i.e the next number after 10 decimal is 11, but in hex the next value is F1 which is 16 because F is 15 in decimal and adding a 1 to it makes 16 in decimal.

How does all that relate to colour codes in hex? Well, each two letter section of "ffffff" codes for red, green and blue - in that order Hence, "ff0000" is red, "00ff00" is green and "0000ff" is blue. In transmitted light, equal amounts of red, green and blue give white, thus "ffffff" is white in hex (this is additive mixing not subtractive mixing as you get with paints when equal amounts of red, green and blue would not give white! If you don't get that, look up "additive colour" in Wikipedia!). "000000" is in effect "nothing of anything" so is black. You can probably see that changing the letters or numbers will give different colours - look at Appendix 1: Colour Codes and you'll see what I mean!

So if you have a graphic in, say, Photoshop and you have used the eyedropper to measure the colour, you will be lucky enough that in later versions of Photoshop it will actually tell you the hex value! In the "old days" we weren't so lucky and had to work it out ourselves - let's have a look at how.

In graphic design, colour codes are spoken of in terms of the percentages of RGB (red, green, blue), so have an "RGB value". In commercial printing, the colour code is CMYK (cyan, magenta, yellow, key (which is black)). So, when you open a coloured graphic in Photoshop or similar, it will be made up of as many different RGB (or CMYK) values as it was designed to have! Luckily we don't normally have to worry about CMYK conversions to hex - most graphic programs have always given the RGB equivalent of the CMYK colour code for a particular area of the graphic. However, when you are trying to code a web page according to your company colours or logo colour, you should use a colour picker tool to select from the graphic the colour you want to sample and it will give an RGB value. Say the RGB value is 24,75,245. How do you get this to be in hex? Easy. Just take each of the three values and divide them by 16. So for the 24, go 24/16 on your calculator (or brain!) and the answer will be "1.5". Trouble is that this is in decimal and you need to convert it to hex. Easy, just ignore what is after the decimal point! So just take the "1" as being the equivalent of 1 x 16 in hex and count up to 24 from 16 which gives 8, thus the hex value of decimal 24 is merely 18, because in hex the "1" means 1 x 16 in decimal plus 8 which is, yep, 24! , 15 decimal goes into 24 only once, with 9 decimal remaining. The hex code for 15 is F and the hex code for 9 is 9. Therefore the nex equivalent of 24 decimal is simply F9. For the "75" part of the RGB code I gave above, this would be a hex code of 50 because 5 x 15 is 75 with nothing left over. For the "245" part of the RGB code above this comes up on the calculator when you go 245/15 as 16.3333, a hex code of F BLACK = #000000
BLACK = #000000
DARK SLATE GREY = #2F4F4F
DIM GREY = #545454
GREY = #C0C0C0
LIGHT GREY = #A8A8A8
VERY LIGHT GREY = #CDCDCD
SILVER = #E6E8FA

RED = #FF0000
ORANGE RED = #FF2400
ORANGE = #FF7F00
MANDARIN ORANGE = #E47833
DUSTY ROSE = #856363
SALMON = #6F4242
NEON PINK = #FF6EC7
SIENNA = #8E6B23
FIREBRICK = #8E2323
INDIAN RED = #4E2F2F
SCARLET = #8C1717
FELDSPAR = #D19275
CORAL = #FF7F00
COOL COPPER = #D98719
COPPER = #B87333

YELLOW = #FFFF00
BRASS = #B5A642
BRIGHT GOLD = #D9D919
GOLD = #CD7F32
GOLDENROD = #DBDB70
MEDIUM GOLDENROD = #EAEAAE
BROWN = #A62A2A
BAKER'S CHOCOLATE = #5C3317
SEMI-SWEET CHOCOLATE = 6B4226
LIGHT WOOD = #E9C2A6
MEDIUM WOOD = #A68064
VERY DARK BROWN = #5C4033
WHEAT = #D8D8BF
DARK BROWN = #5C4033
BRONZE = #8C7853
BRONZE II = #A67D3D
DARK TAN = #97694F
DARK WOOD = #855E42
NEW TAN = #EBC79E
OLD GOLD = #CFB53B
TAN = #DB9370

MEDIUM VIOLET = #DB7093
ORCHID = #DB70DB
MEDIUM ORCHID = #9370DB
DARK ORCHID = #9932CD
DARK PURPLE = #871F78
VIOLET = #4F2F4F
VIOLET RED = #CC3299
PINK = #BC8F8F
PLUM = #EAADEA
QUARTZ = #D9D9F3
MAGENTA = #FF00FF
THISTLE = #D8BFD8
MAROON = #8E236B

BLUE VIOLET = #9F5F9F
DARK SLATE BLUE = #6B238E
STEEL BLUE = #236B8E
LIGHT STEEL BLUE = #8F8FBD
CADET BLUE = #5F9F9F
CORN FLOWER BLUE = #42426F
MIDNIGHT BLUE = #2F2F4F
LIGHT BLUE = #C0D9D9
DARK TURQOISE = #7093DB
NAVY BLUE = #23238E
NEW MIDNIGHT BLUE = #00009C
RICH BLUE = #5959AB
MEDIUM BLUE = #3232CD
MEDIUM SLATE BLUE = #7F00FF
BLUE = #0000FF
NEON BLUE = #4D4DFF
SLATE BLUE = #007FFF
SUMMER SKY = #38B0DE
SKY BLUE = #3299CC
CYAN = #00FFFF
TURQUOISE = #ADEAEA

DARK GREEN = 2F4F2F
DARK GREEN COPPER = #4A766E
GREEN COPPER = #527F76
DARK OLIVE GREEN = #4F4F2F
HUNTER GREEN = #215E21
MEDIUM SEA GREEN = #426F42
SEA GREEN = #238E68
FOREST GREEN = #238E23
MEDIUM FOREST GREEN = #6B8E23
KHAKI = #9F9F5F
PALE GREEN = #8FBC8F
LIME GREEN = #32CD32
GREEN YELLOW = #93DB70
YELLOW GREEN = #99CC32
SPRING GREEN = #00FF7F
GREEN = #00FF00
AQUAMARINE = #70DB93
MEDIUM AQUAMARINE = #32CD99
MEDIUM TURQUOISE = #7FFF00

NEXT: So what can you do in the <BODY> of your HTML files?