Colors in HTML5 are a strange thing. The “easy” way (color names) turns out to have many problems. The method most web developers really use sounds a lot harder, but it isn't as bad as it may seem at first. The hex color scheme uses a seemingly bizarre combination of numbers and letters to determine color values. is aqua. is yellow. It's a scheme only a computer scientist could love.
Hex colors work by describing exactly what the computer is doing, so you have to know a little more about how computers work with color. Each dot (or pixel) on the screen is actually composed of three tiny beams of light. Each pixel has tiny red, green, and blue beams.
The light beams work kind of like stage lights. Imagine a black stage with three spotlights (red, green, and blue) trained on the same spot. If all the lights are off, the stage is completely dark. If you turn on only the red light, you see red. You can turn on combinations to get new colors.
Color by number
In a computer system, each of the little lights can be adjusted to various levels of brightness. These values measure from 0 to 255. Therefore, you could describe red as and yellow as .
The 0 to 255 range of values seems strange because you're probably used to base 10 mathematics. The computer actually stores values in binary notation. The way a computer sees it, yellow is actually 111111111111111100000000. Ack! There has to be an easier way to handle all those binary values. That's why developers use hexadecimal notation.
Any page that interacts with the user will tend to use a programming language. Feel free to look over the code, but don't worry if you're not yet ready to add programming to your sites.
Hex education
All those 1s and 0s get tedious. Programmers like to convert to another format that's easier to work with. Believe it or not, it's easier to convert binary 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) 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!
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 today.
The numeral 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.
You 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. There are 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 (#).
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. 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 which color is burnt sienna, but hex value is unambiguous.
Portability: Most graphic editing software uses 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, 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.