Circle City Communities

Using Hexadecimal Colors

The 16 Named Color System

To get all the colors available, the most common way (but not the only way) is to use the hexadecimal system and is recognised by all browsers. The 16 Named Color System - Aqua, Black, Blue, Fuchsia, Gray, Green, Lime, Maroon, Navy, Olive, Purple, Red, Silver, Teal, White, Yellow - will work on all the latest browsers, but you may want some more subtle colors. Some browsers support hundreds of named colors, but you can't guarantee they will be supported in other browsers.


A bit of history

A computer at it's lowest level, only understands binary numbers and has to convert decimal numbers into binary to be able to display them. Decimal numbers don't easily convert to binary, but hexadecimal is a lot simpler. It's a throw-back from the early days of computing when machine-code assemblers were used (they still are) and hexadecimal was the norm. Most programmers now use a higher level language such as C or C++.


Decimal and Hexadecimal numbers

Decimal numbers, the ones we're accustomed to have a base of 10. Hexadecimal numbers have a base of 16. You may ask, how do we count to 16 in hexadecimal (usually just referred to as "Hex").

Easy:-

01 - 02 - 03 - 04 - 05 - 06 - 07 - 08 - 09 - 0A - 0B - 0C - 0D - 0E - 0F - 10

When you get to 9, there are no single digit numbers left so we use the alphabet, but only up to F. This gives us our base of 16. As F is the top of the base, we then go to 10 (pronounced one zero) as if counting 9 to 10. Thus:-

0A = 10, 0B = 11, 0C = 12, 0D = 13, 0E = 14, 0F = 15, 10 = 16 then:-

11 - 12 - 13 - 14 - 15 - 16 - 17 - 18 - 19 - 1A - 1B - 1C - 1D - 1E - 1F - 20

21 - 22 - 23 - 24 - 25 - 26 - 27 - 28 - 29 - 2A - 2B - 2C - 2D - 2E - 2F - 30

We're counting in blocks of 16 not in 10s as we're used to.
10 = 16, 20 = 32, 30 = 48. Get the idea?

We only need to count up to FF in hexadecimal (which is 255 decimal) for colors, because the color is specified as 3 different values made into one. It has the format RED - GREEN - BLUE.

These are the 3 color guns of your monitor. So #FF0000 turns on the red gun and displays full red. #00FF00 turns on the green gun and #0000FF the blue gun.

#FFFFFF turns all 3 guns full on, so red, green and blue mixed together give white.
#000000  all guns fully off gives black.
#FF00FF red and blue guns on gives purple.
If you reduce the Hex number of a particular gun, the color will be darker.

Some examples:-
#00FF00 =     #00CC00 =     #009900 =    
#FFFF00 =     #CCCC00 =     #AABBCC =    
#00FFFF =     #CC00CC =     #CCBBAA =    

I've shown all the hexadecimal numbers in uppercase for clarity, but you can use lowercase if you wish. The hash sign "#" denotes that you're using the hexadecimal system. You'll find that some browsers will display the color by omitting the hash sign, but some may not.


Shorthand values for hexadecimal colors

You can use a shorthand version of hexadecimal colors (for some values) using just 3 digits i.e. #369 which is equivalent to #336699 and not #306090 as you might think. The only advantage with the 3 digit system is that there is less to type.

Some examples:-
#FF6633 = #F63
#AABBCC = #ABC
#8844BB = #84B

Note:- There are no shorthand equivalents to numbers like #306090, #800080, #ff8000 etc. Only hexadecimal numbers where the digit repeats.


Websafe colors

Some older monitors can only display 255 colors. There are not many about now, as the clockwork mechanisms get broken (Ok, I'm joking. Sorry if you've got one).

To ensure that colors will display correctly on all monitors, you use what are called websafe colors. Using these are quite simple. The colors for any one gun are in multiples of 3.

i.e.   #00   #33   #66   #99   #CC   #FF
So   #336699   #99CCFF   #999999   #CC00CC   are all websafe colors.

Note:- This is not a guarantee that the colors will display the same on every computer, as this depends on the contrast and color settings of that monitor.

A sample websafe color chart with their hexadecimal values is on the next page, to give you some ideas.