What are the different ways to represent colors in CSS?
Author: Deron Eriksson
Description: This tutorial describes the different ways to represent colors in CSS.
Tutorial created using: Windows XP
(Continued from page 1)
The six-digit hexadecimal form consists first of a two-digit representation of the amount of red in the color, followed by a two-digit representation of the amount of green in the color, followed by a two-digit representation of the amount of blue in the color. 00 in two-digit hexadecimal is 0 in decimal and represents none of the color. ff in two-digit hexadecimal is 255 in decimal and represents all of the color. The two-digit hexadecimal values must be between 00 and ff. In decimal, this is 0 to 255. White represents the combination of all red, all green, and all blue, and is thus #ffffff. Black consists of no red, no green, and no blue, and is thus #000000.
The three-digit hexadecimal form is a shortened version of the six-digit hexadecimal form, where each digit of the three-digit hexadecimal form represents two identical digits in the six-digit hexadecimal form. Thus, the three-digit #0ff is equivalent to the six-digit #00ffff. As another example, #123 is equivalent to #112233. The three-digit form lacks the fine-grained control of the six-digit form, but it saves you three digits.
In addition to color keywords and 3-digit and 6-digit hexadecimal notation, colors in CSSW can also be represented using RGB functional notation. RGB functional notation takes two forms, decimal and percent. Both forms consist of "rgb" followed by three numbers in a set of parentheses. In the decimal notation, each number is a number between 0 and 255. In the percent notation, each number is a percentage between 0% and 100%. The three numbers are the amounts of red, green, and blue, respectively, to specify the color. As mentioned previously, the hexadecimal values between 00 and ff are equivalent to the decimal values between 0 and 255. In terms of the percentages, 0 is equivalent to 0%, and 255 is equivalent to 100%. This can be seen by comparing the various columns in the table above.