Print Color versus Website Color Schemes - dummies

By David Karlins, Doug Sahlin

In print, colors are created with colored ink by mixing cyan, magenta, yellow, and black (CMYK). On the web, though, colors are generated by mixing red, green, and blue pixels (RGB involved). The hexadecimal system defines 16 million colors.

Because web colors are generated by mixing red, green, and blue, the code for defining color essentially defines how much red, how much green, and how much blue.

The most widely applied and reliable way of conveying that information is a set of hexadecimal values notation. The “hex” in hexadecimal comes from the number six. Hexadecimal values are six digits and use the first two digits to convey the red value, the second two digits to convey the green value, and the third two digits to convey the blue value.

Hexadecimal values convert RGB values into six-digit codes. In the RGB color mode, the highest possible value attached to a color is 255, and the lowest is 0. So, for example, solid red is defined in RGB as 255, 0, 0 (maximum red, and no green or blue).

However, because the hexadecimal system allots only two digits for a value, not three, letters are used to supplement numbers in translating RGB color values to hexadecimals.

When defined in HTML code or CSS style sheets, hexadecimal color values are preceded by a hash tag (#). Some basic colors have easy-to-remember or intuitive hexadecimal values. Black is #000000 (no red, no green, and no blue). Green is #00FF00 (no red, maximum green [FF is the hexadecimal equivalent of 255 on the RGB scale], and no blue).

Veteran designers might store a set of frequently used color values in their heads, but even for them, there is no really intuitive way of remembering the strings of letters and numbers that define how much red, how much green, and how much blue go into any particular color.

So, designers use charts found in books, online resources, or graphic design programs (Dreamweaver, Photoshop, Illustrator) to blend colors and then copy the hexadecimal value that corresponds to the value selected.

The following figure shows a web color being defined in Photoshop. The values in the boxes at the end of the R (red), B (blue), and G (green) sliders define the hexadecimal value for the color. In this case that value is #F90404.


One basic technique for saving a set of colors is to simply copy and paste the hexadecimal values for those colors into a word processor or write them down on scratch paper.

After you have a hexadecimal value for a color, you can use that value preceded by a hash symbol (#F90404) to define the color in HTML or CSS. Or you can copy it into the CSS Rule Definition dialog box, which defines CSS styles in Dreamweaver CS6. The following figure shows the hexadecimal value generated in Photoshop being applied to create a red page background in Dreamweaver.