Hexadecimal
Counting in Hexadecimal || Web Design and Hex Codes
Hexadecimal, otherwise known as base 16: probably the most important base to any web designer. Besides, of course, the obvious (one would hope that anyone who could make a website could also count).
But what is hexadecimal? Why is it important? Let's find out!
Counting in Hexadecimal
Remember back in your younger days, those posters that went something like this?
| Thousands | Hundreds | Tens | Units |
| 9, | 9 | 9 | 9 |
This is in base 10 (our natural counting base), but the same idea can be applied to any other base!
Just make a grid in the following format:
| (n^3)s | (n^2)s | (n)s | Units |
And so on. Replace n with whatever base you're using.
So for base 16, that would look like:
| Sixteens | Units |
Of course you can keep going to 256 and beyond, but for our purposes this is as far as we need.
Now what goes in the bottom cells? Once you have a number you want to translate from base 10 to hexadecimal, you put how many sixteens and how many ones there are in that number. This number can be anywhere from zero to fifteen (displayed as F; 10, 11, 12, 13, and 14 are A, B, C, D, and E respectively). How about some examples?
Number: 97
Start in the sixteens column: how many times can 16 go into 97?
97 / 16 = 6 (remainder 1)
Next we'll head to the ones column - the remainder is one, so the number in the ones column would be… 1!
So here's what our grid looks like:
| Sixteens | Units |
| 6 | 1 |
The hexadecimal version of 97 is 61.
What about translating from hexadecimal to base 10?
Say we have the following hexadecimal number: D2
In grid form, this would be:
| Sixteens | Units |
| D (13) | 2 |
That means there are 13 sixteens, so…
13 * 16 = 208
Next we go to the ones column. There are 2 ones, so we add that to our previous total (208) and get…
208 + 2 = 210
So D2 in hexadecimal is the same as 210 in base 10
Web Design and Hex Codes
Now that you know what hexadecimal is and how to count in it, you may be wondering what this could possibly be useful for. If you're a web designer, it's useful for many, many things.
Color is an important part of any website. After all, no one wants to look at a screen full of black and white! Sure, you could just declare colors by their names (red, blue, etc.) but that becomes awfully restricting very quickly. Most web designers know about hex codes, but at the same time most web designers have programs that just tell them the hex codes of a color without any effort on their part. While there are many free programs (such as GIMP, or the Firefox addon ColorZilla) that offer this functionality, the ability to make your own hex codes is still a useful skill to have. If you're just working with Paint, it's invaluable.
Colors in any form on the computer are generally measured in rgb - this means each color has a red value, a green value, and a blue value. The lower the number for any of the three "primary" colors, the less of it is present in the color. Hex codes are just another, slightly more concise way to present rgb values.
The value for each of the three colors can be anywhere from 0 to 255. That just so happens to be the exact range allowed by two digits in base 16!
Hex codes always have six digits. The first two tell you the red value, the next two tell you the green value, and the final two tell you the blue value.
| Red Value | Green Value | Blue Value | |
| # | FF | FF | FF |
#FFFFFF is also known as white.
So how do you go about translating rgb values to a hex code? Perhaps an example will help.
Red value: 51
Green value: 12
Blue value: 186
First we take our red value (51) and pull out our trusty grid!
| Sixteens | Units |
First, the sixteens column:
51 / 16 = 3 (remainder 3)
The ones column is equal to the remainder, 3.
The hexadecimal equivalent of 51 is 33. This goes in the first two slots of our hex code:
#33____
Next we take our green value (12):
16 can't go in to 12 at all, so the first digit is 0.
The "remainder" is 12, which in hex notation is C.
So the hexadecimal equivalent of 12 is 0C, this goes in the next two slots:
#330C__
Finally, our blue value (186):
186 / 16 = 11 (remainder 10)
11 in hex notation is B, and 10 in hex notation is A.
The hexadecimal equivalent of 186 is BA, and this goes in the final two slots:
#330CBA
This produces a color somewhat like this.
Congratulations! You made it through the mind-numbing lesson, and now you're officially certified to count in Hexadecimal! Have fun with your new-found skills!
