How does HTML hex work?

Answer 1

In practice, hex in HTML is used only when defining colors, or when referencing a character not in the typical character set (ie. not on the keyboard.)

Hexadecimal is a number system based off the number 16, rather than the typical decimal system, which is based off of ten. This means that the columns in hex are representative of a 16 base. Because decimal only has 10 digits (0-9) hex has to fill in the other 6 spaces using letters (which are traditionally capitalized, although HTML doesn't much care.) Counting in hexadecimal, therefore, goes like this.

1 One

2 Two

3 Three

4 Four

5 Five

6 Six

7 Seven

8 Eight

9 Nine

A Ten

B Eleven

C Twelve

D Thirteen

E Fourteen

F Fifteen

In the case of colors, the hexadecimal triplet is actually 3 sets of number, each 2 hex digits long. So the color red, #FF0000 is actually an RGB value of Red: FF Green: 00 and Blue: 00.

To convert from hex to decimal, you take the first column and simply convert. The second column to the left is representing 16s (much like the tens column in decimal) so you take that number and multiply by 16. Then you add the two together. From the prior example:

FF

The rightmost F stands for 15. The second F stands for 15 * 16^1 (or just 16). That's the same as 240 in decimal. Then we add the two column together. That gives us a decimal value for red of 15 + 240 or 255.

If we had a third column, then we'd simply multiply that value by 16^2. A Fourth would get multiplied by 16^3, and so on.

Here's an example:

#BAD1

We start with the value for the rightmost column, which is 1.

D is the hex value for 13. It's the first column from the right, so we multiply by 16^1 (which is just 16) and get 16 * 13, or 208.

A is the hex value for 10. Because this is the third column, we multiply by 16^2, or 256. 256 * 10 is 2,560.

B is hex for 11. It's the fourth column, so we increment the exponent again. 11 * 16^3, or 11 * 4096 = 45,056.

Now we add the columns together. 45056 + 2560 + 208 + 1 = 47,825.

While this is a bit awkward and complicated for us, it's a snap for the computer. In fact, the machine is constantly taking all these numbers down to binary first, then going back to decimal (this is where "roundoff error" comes from.)

Hex is used because it's a lot more succinct. As you can see, I represented a 5 digit decimal number in only 4 hexadecimal digits.

In the end, however, it's still just a number. Don't let it scare you :)