HTML, XHTML and CSS All-In-One for Dummies - Andy Harris [70]
Hex education
All those 1s and 0s get tedious. Programmers like to convert to another format that’s easier to work with. It’s easier to convert numbers to base 16 than base 10, so that’s what programmers do. You can survive just fine without understanding base 16 (also called hexadecimal or hex) conversion, but you should understand a few key features, such as:
♦ Each hex digit is shorthand for four digits of binary. The whole reason programmers use hex is to simplify working with binary.
♦ Each digit represents a value between 0 and 15. Four digits of binary represent a value between 0 and 15.
♦ We have to invent some digits. The whole reason hex looks so weird is the inclusion of characters. This is for a simple reason: There aren’t enough numeric digits to go around! Table 1-2 illustrates the basic problem.
Table 1-2 Hex Representation of Base Ten Numbers
Decimal (Base 10)
Hex (Base 16)
0
0
1
1
2
2
3
3
4
4
5
5
6
6
7
7
8
8
9
9
10
A
11
B
12
C
13
D
14
E
15
F
The ordinary digits 0–9 are the same in hex as they are in base 10, but the values from 10–15 (base ten) are represented by alphabetic characters in hexadecimal.
You’re very used to seeing the value 10 as equal to the number of fingers on both hands, but that’s not always the case when you start messing around with numbering systems like we’re doing here. The number 10 simply means one of the current base. Until now, you may have never used any base but base ten, but all that changes here. 10 is ten in base ten, but in base two, 10 means two. In base eight, 10 means eight, and in base sixteen, 10 means sixteen. This is important because when you want to talk about the number of digits on your hands in hex, you can’t use the familiar notation 10 because in hex 10 means sixteen. We need a single-digit value to represent ten, so computer scientists legislated themselves out of this mess by borrowing letters. 10 is A, 11 is B, and 15 is F.
If all this math theory is making you dizzy, don’t worry. I show in the next section some shortcuts for creating great colors using this scheme. For now, though, here’s what you need to understand to use hex colors:
♦ A color requires six digits of hex. A pixel requires three colors, and each color uses eight digits of binary. Two digits of hex cover each color. Two digits represent red, two for green, and finally two for blue.
♦ Hex color values usually begin with a pound sign. To warn the browser that a value will be in hexadecimal, the value is usually preceded with a pound sign (#). So, yellow is #FFFF00.
Working with colors in hex may seem really crazy and difficult, but it has some important advantages:
♦ Precision: Using this system gives you a huge number of colors to work with (over 16 million, if you really want to know). There’s no way you could come up with that many color names on your own. Well, you could, but you’d be very, very old by the time you were done.
♦ Objectivity: Hex values aren’t a matter of opinion. There could be some argument about the value of burnt sienna, but hex value #666600 is unambiguous.
♦ Portability: Most graphic editors use the hex system, so you can pick any color of an image and get its hex value immediately. This would make it easy to find your cat’s eye color for that online shrine.
♦ Predictability: After you understand how it works, you can take any hex color and convert it to a value that’s a little darker, a little brighter, or that has a little more blue in it. This is difficult to do with named colors.
♦ Ease of use: This one may seem like a stretch, but after you understand the Web-safe palette, which I describe in the next section, it’s very easy to get a rough idea of a color and then tweak it to make exactly the form you’re looking for.
Using the Web-safe color