I recently received one of my regular SEO newsletters. The topic this time was: understanding HTML color codes. But it skipped so many areas, that I’m sure many readers would have been lost.
So I’ve decided to try explaining this topic as simply as possible.
I’ll split this tutorial into 3 parts:
- understanding decimal color codes
- understanding hexadecimal
- using hexadecimal in color codes
PART 1:
Its probably useful to start with monochrome TV / computer screens: The screen is made up of lots of dots, in a grid pattern, so that you get hundreds of dots horizontally and vertically. Computer guys call them pixels, but for the non-technical people, I’ll call them dots.
Now, you can choose the brightness of each dot: no brightness = black, full brightness = white, a level in-between = a level of grey.
To make things easy, we can use numbers to indicate how bright to make the dot. 0 = black, 255 = white, 128 = mid-grey, etc.
We could use a number range of 0 – 99, or 1 – 100, but 0 – 255 has a special meaning to computers, so we need to use 0 – 255.
So how does color work?
Well, imagine that instead of a dot, you actually have 3 mini-dots. The 3 mini-dots are colored: Red, Green, Blue (RGB).
Why use these particular colors?
Its like an optical illusion. When these 3 mini-dots are close enough together, and at full brightness, the human eye is fooled into thinking it sees white. Now, by changing the brightness of the 3 mini-dots, you can get virtually every color you need.
So, to represent colors using numbers, we need to use 3 numbers for each dot (ie a number for each mini-dot). The order is important: the first number is for red, the second is green, the third is blue.
So, to represent black, we use: 0,0,0 (ie all mini-dots have no brightness).
255,255,255 = white (each mini dot is at full brightness, and your eye is tricked into seeing white)
128,128,128 = mid grey
255,0,0 = solid red (the red mini-dot is at full brightness, but green and blue have no brightness)
similarly:
0,255,0 = solid green
0,0,255 = solid blue
Other simple colors: 128,0,0 = dull red, 64,0,0 = very dark red (almost black)…
Now, mixing colors gets interesting:
255,255,0 = yellow, 0,255,255 = cyan (light blue), 255,0,255 = Magenta (light purple), 255,128,0 = Orange, 128,128,0 = brown, 128,0,128 = purple, 255,200,255 = pink
Most paint programs (even microsoft paint) will let you experiment with these color triplets. Go have some fun with colors
PART 2:
This is probably the most difficult computer concept to explain. Think back to your very early days at primary school. The teacher would have told you that there are only ten symbols for writing numbers: 0123456789. So while counting, you can only get as far as 9, then you run out of symbols.
But a very bright person, discovered a great way to count beyond this: the tens “column” (as well as the hundreds, thousands, etc columns). So the number in the tens column represents “groups of ten”. Thus the number 423 means: 4 groups of hundred, plus 2 groups of ten, plus 3.
Computers represent numbers very differently to us. They use a system called binary… but we will use hexadecimal, because it is very simple and quick to translate between binary and hex.
Now, we can interact with computers (using numbers) in 2 ways:
- We use decimal, and the computer converts decimal numbers into binary (easy for us, but can slow down the computer)
- We use hex, and the computer converts to binary (difficult for us, but the computer converts hex to binary MUCH faster then decimal to binary)
So what is hex? Well, instead of having only ten symbols to represent numbers, we use sixteen symbols: 0123456789ABCDEF.
Now, we can count from 0 to “F”, and after that we start using the “tens” column (technically, it should probably be called a sixteens column). Thus after F, we have 10, and if we keep counting, we get: 11, 12, 13, … 19, 1A, 1B, 1C, 1D, 1E, 1F, 20, … 29, 2A, … 2F, 30, …3F, etc.
One question that often comes up is, what happens after 9F? Why A0 of course, followed by: A1, A2, … A9, AA, AB, … AF, B0, B1, … BF, C0, etc. all the way up to FF.
After that, you can go to 100, 101, 102, … 10F, 110, 111, etc.
To get over the initial learning curve, many people use translation tables (or calculators), so that when they see F, they can figure out it actually means fifteen.
So that we don’t get confused between decimal and hex, hex numbers usually have a # symbol in front, so #10 is actually 16 Decimal., and #FF is actually 255.
PART 3:
Now we can combine part 1 and part 2. Colors can be represented using hex values from #00 – #FF (ie 0 – 255).
To represent black, we have: #000000 (ie 00, 00, 00 : we put a zero in the tens column to keep the overall length the same)
#FFFFFF = white (255,255,255)
#808080 = mid grey (#80 = 128 )
#00FF00 = solid green
So thats it. Its a long explanation, but just about anyone should be able to read it and understand it, and you will be on your way to creating colorful web pages.
