Color Picker & 4 Ways to Specify Color in CSS

In CSS, there are four methods for assigning color to an element: hexadecimal, RGB, HSL, and color name. Each of the four methods is described below. As a visual aid to help you select colors for your website, we also have included a dynamic color picker. For each color you select using the tool, you will see its hex code, RGB code, and HSL code so you can easily specify it in CSS.

In hexadecimal, each color is encoded by a six-digit base-16 number. The first two digits of the base-16 number represent the amount of red, the middle two digits give the amount of green, and the last two digits give the amount of blue. The hexadecimal system yields the shortest code, but may be confusing for novice coders who don't understand the math behind the base-16 system. For example, to create tan text, the CSS code is  color:#D2B48C;

RGB color codes are closely related to hexadecimal codes. Instead of using the base-16 number system to specify the amounts of red, green, and blue, the RGB method uses the usual base-10 number system. All three colors range from 0 to 255. (Equivalent to 00 and FF in hex.) For example, the code to create tan text is  color:rgb(210, 180, 140); (See the RGB to Hex & Hex to RGB Conversion Calculator for more information.)

HSL--which stands for hue, saturation, and lightness--is a third way to specify a color in CSS. The hue of a color is its angle on the color wheel, with red at 0° = 360°, green at 120°, and blue at 240°. Saturation is a percentage between 0 and 100. A saturation of 100% means full intensity, while 0% means pure gray. Lightness is also a percentage between 0 and 100; 100% means white and 0% means black. For instance, to create a tan background color in CSS using the HSL method, you would write  background-color:hsl(35, 43.7%, 68.6%); (See the HSL/RGB Conversion Calculator for more information.)

The color name method is the least precise, but perhaps easiest method for writing colors in HTML and CSS. Out of the 16,777,216 possible unique colors, 147 of these have designated names. For instance, to make a border tan, you would write  border-color:Tan;

The code is not case-sensitive, but colors with compound names must be written as one word with no spaces. Here is the full list of colors with designated names, along with their hexadecimal code equivalents.

© Had2Know 2010