Beginning HTML and CSS

Appendix D

Color Names and Values

The first thing you need to learn about color is how to specify exactly the color you want; after all, there are a lot of different hues, tones, and shades and you must choose the right ones.

In HTML you can specify a color in four key ways:

• Hex codes: These are six-digit codes representing the amount of red, green, and blue that make up the color, preceded by a pound or hash sign # (for example, #333333).
• Color names: A set of names that represent more than 200 colors, such as red, lightslategray, and fuchsia.
• RGB color values: Here, numbers between 0 and 255 represent the amount of red, green, and blue that makes up each color.
• HSLcolor values: HSL is an alternative to RGB and closely mirrors the way that people actually think about color. Instead of mixing three RGB values together to create the target color, HSL enables you to set the hue with one number between 0 and 360, where, for example, 0 is red, 120 is green, and 240 is blue. Then, you adjust the saturation of the color using 0 percent as gray and 100 percent as full saturation. Finally you adjust lightness/darkness of the color where 0-percent lightness is black, 100-percent lightness is white, and 50-percent lightness is “normal.”

Using Hex Codes to Specify Colors

When you start using hexadecimal codes (or hex codes for short), they can be daunting because they use a mix of numbers and letters to represent colors. Although you are used to numbers represented with 10 digits (0–9), ...