In HTML, something called the hexadecimal color system is used to define color. As you begin to work with color on your page, you’ll see that color is actually described using code.

Ready to see how this works? Okay, tape your eyelids open. First, you may already know this, but colors on a computer monitor are described using RGB (Red, Green, and Blue) values. Next, the hexadecimal system itself is based on 16 values: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F. The resulting color codes are built out of 6 digits, like this: #3399CC.

To declare an RGB color, two values in the hex code are assigned for each R, G, and B color. So, if we dissect the above example, the # just states in the HTML code that the proceeding value is a hexadecimal color. Next, the first two values set the red value for the RGB display (in this case, 33). The next two sets of values (99 and CC) determine the green and blue values. Simple? Yeah, right.

So a hexadecimal color could be made up of any combination of the above 16 values, resulting in 16,777,216 different colors (16 numbers multiplied by 16 combinations equals 256 combinations for R, G, and B. 256 multiplied by 256, multiplied by 256 equals 16,777,216). However, there are only 216 web-safe colors. That means that to stick with colors that will be safe across all computers (at least as of a few years ago, anyway) you’d stick with these hex values: 00, 33, 66, 99, CC and FF.

Clear as mud, right? Honestly, you don’t really have to understand how it works. You can always just stick with Dreamweaver’s color picker to choose colors and know that they’ll work properly. You can even make use of the Asset panel to help keep color consistent across your site.

For more hexadecimal fun, check out ideo.com/visualizer.html, where you can have some fun testing color combinations for your page. Until then, reach for the asprin!

[ Back to Web + Mag Articles ]