This tutorial is intended as a resource for web developers and others interested in learning more about setting colors in HTML. Whether you create your web pages with a WYSIWYG page editor such as DreamWeaver or you do all your coding by hand, sooner or later you will want more control over the colors that appear on your pages.
In HTML, you can specify colors several different ways: (1) using predefined color names; (2) setting values for red, green and blue (RGB) and (3) setting values for hue, saturation and lightness (HSL). Here's a quick summary.
The follow table shows some examples of colors, with their names (if they have one) and their RGB decimal, RGB percentage, RGB hexadecimal codes and their HSL (hue, saturation, lightness) values.
|Color||Color Name(s)||Decimal RGB||Percentage RGB||Hexadecimal||HSL Values *|
|Red||255, 0, 0||100%, 0%, 0%||FF0000||0, 100%, 50%|
|255, 127, 0||100%, 50%, 0%||FF7F00||30, 100%, 50%|
|Yellow||255, 255, 0||100%, 100%, 0%||FFFF00||60, 100%, 50%|
|Chartreuse||127, 255, 0||50%, 100%, 0%||7FFF00||90, 100%, 50%|
|Lime||0, 255, 0||0%, 100%, 0%||00FF00||120, 100%, 50%|
|SpringGreen||0, 255, 127||0%, 100%, 50%||00FF7F||150, 100%, 50%|
|Aqua / Cyan||0, 255, 255||0%, 100%, 100%||00FFFF||180, 100%, 50%|
|0, 127, 255||0%, 50%, 100%||007FFF||210, 100%, 50%|
|Blue||0, 0, 255||0%, 0%, 100%||0000FF||240, 100%, 50%|
|127, 0, 255||50%, 0%, 100%||7F00FF||270, 100%, 50%|
|Fuchsia/Magenta||255, 0, 255||100%, 0%, 100%||FF00FF||300, 100%, 50%|
|255, 0, 127||100%, 0%, 50%||FF007F||330, 100%, 50%|
|Black||0, 0, 0||0%, 0%, 0%||000000||*, *%, 0%|
|Gray / Grey||128, 128, 128||50%, 50%, 50%||808080||*, 0%, 50%|
|White||255, 255, 255||100%, 100%, 100%||FFFFFF||*, *%, 100%|
|0, 92, 92||0, 36%, 36%||005C5C||180, 100%, 18%|
|Firebrick||178, 34, 34||70%, 13%, 13%||B22222||0, 68%, 42%|
* With HSL, setting Lightness to 0% produces black regardless of the values set for Hue and Saturation. Similarly, setting Lightness to 100% produces white regardless of the other values. Setting Saturation to 0% will always produce gray regardless of the Hue value. The darkness of the gray will be determined by the Lightness value.
Named Colors: The W3C organization, which creates standards
for the World Wide Web, has specified a list of 138 different colors (some with duplicate names,
such as "Gray" and "Grey" or "Aqua" and "Cyan") that can be used on
web pages by name. Some names are obvious ones, like "Black", "White", "Red" or
"Yellow". Others are more fanciful, like "AliceBlue", "Tomato", "LightSeaGreen"
and "LemonChiffon". To use a named color, just add the name you want to your
style. For example:
<span style="color: Tomato;">Some
text</span>. (Color names are case insensitive, so you can write
"lightseagreen" instead of "LightSeaGreen," if you prefer.)
Use the drop-down list below to select one of the named colors and see how the color changes in the rectangle. The RGB decimal, percentage and hexadecimal values will also be displayed, plus the corresponding HSL values.
Decimal Integers: All colors on the computer, and therefore
the web, are made from just three base colors: red, green and blue. To
specify a color, you must assign a number between 0 and 255 to each of
these three colors. The number indicates how light or dark that color will
be. Using just three numbers, you can choose from more than 16.7 million
colors. When you use decimals you must begin with "rgb" and put the numbers
in parentheses separated by commas. A style using decimal codes might
look like this:
<span style="color: rgb(80,76,101);">Some
Fill in values between 0 and 255 for Red, Green and Blue, then click the button to see the color you created. The equivalent hexadecimal code will also be displayed.
Percentages: It is also possible to use percentage values
instead of decimal integers. Something like this:
style="color: rgb(33%,30%,92%);">Some text</span>. In
this case, the percentages specify how light or dark each color will be,
from 0% (no color) to 100% (full color).
Fill in values between 0 and 100 for Red, Green and Blue, then click the button to see the color you created. A decimal RGB code will also be displayed that approximates the color created by the percentage values (subject to rounding errors).
Note: Assuming that we use only integers for the percentage values, we can select "only" among 1,030,301 colors (101 × 101 × 101) using this method. Also, because of rounding, colors with slightly different RGB decimal values can have the same percentage values.
Hexadecimal Codes: Hexadecimal codes are more complicated than
using named colors or decimal integers, but they are commonly used on the
web and you are still able to choose from more than 16.7 million colors.
Hexadecimal codes use three different numbers, all between 0 and 255,
to specify a color. The trick is that the three numbers are expressed in
hexadecimal (base 16) format and then squeezed together so they look like
one six-digit number. A style using a hexadecimal code might look like
<span style="color: #005C5C;">Some text</span>. The hexadecimal code
"005C5C" creates the teal color used above for the title of this page. Notice
that when you use a hexadecimal code in a style, you add the "#" sign to the
beginning of the code. Hexadecimal numbers will be between 00 (which
represents 0) and FF (which represents 255).
Fill in values between 00 and FF for Red, Green and Blue, then click the button to see the color you created. The equivalent decimal RGB codes will also be displayed.
Hue, Saturation, Lightness: According to the W3C, "The advantage of HSL over RGB is that it is far more intuitive: you can guess at the colors you want, and then tweak. It is also easier to create sets of matching colors (by keeping the hue the same and varying the lightness/darkness, and saturation)." After working with HSL for the first time during the creation of this page, I am inclined to agree.
Hue (what we normally think of as "color") is set as an integer between 0 and 360. By convention, red is 0 or 360. Other hues then represent angles moving around a color wheel (the color wheel at the left shows colors changing every 30 degrees). Thus, yellow is 60; green is 120; cyan is 180; blue is 240 and magenta is 300.
The value for saturation ranges from 0% (always producing a gray color regardless of the hue) to 100% (full color). Thus, as you decrease saturation, you in effect add more gray to the color until, at 0% saturation, the color has become completely gray. How dark or light the gray will be is then determined by the lightness value.
The lightness value is also a percentage. A value of 50% produces a "normal" color. Setting lightness to 0% will always produce black and 100% will always produce white regardless of the settings for hue and saturation. Note: This is different from the "Brightness" value found in Photoshop's color picker (the "eyedropper" control). In Photoshop (at least as of my Ver. 6), 100% brightness is the equivalent of 50% in the W3C specification. The W3C specification for HSL is also different from the Windows "color picker," which has Hue, Saturation and Luminance values that each range from 0 to 240.
A style using HSL values would look like this:
style="color: hsl(120,100%,50%);">Some text</span>, where the
values are for Hue, Saturation and Lightness, in that order. The HTML code shown
here would result in a green color that is the same as
style="color: #00FF00;">Some text</span> or
style="color: rgb(0,255,0);">Some text</span>.
NOTE: Unfortunately, setting colors by HSL values does not work in Internet Explorer, at least through version 6. It does work in Firefox and presumably other Gecko-based browsers. If you are viewing this page in Internet Explorer, be advised that the colors you see below have been converted from HSL to RGB for display purposes. See the note below about converting between HSL and RGB.
Fill in values within the specified ranges for Hue, Saturation and Lightness, then click the button to see the color you created. In addition, the equivalent RGB decimal values will be displayed on the color patch. (See the note below concerning converting between HSL and RGB.)
The table below offers a better idea of the effect of saturation and lightness on color. You can select any value between 0 and 360 for "hue," then press the "Change" button to see the colors that hue creates at different settings for saturation and lightness. Saturation ranges horizontally across the table from 100% to 0% (which will always produce a gray color). The lightness values range vertically, starting with 100% (which always produces white) at the top to 0% (which always produces black) at the bottom.
You may click on any cell in the table to see the RGB equivalent of the color.
Note About Converting Between HSL and RGB: Assuming that we use only integers for each of the HSL values, the number of colors that can be selected using HSL is considerably less than the number that can be selected by RGB: 16,777,216 (256 × 256 × 256) for RGB as opposed to 3,599,642 (360 × 101 × 99, plus black and white) for HSL. For this reason, and also due to rounding in the conversion between RGB and HSL, colors with different RGB values may have the same HSL values. For example: the named color Firebrick is specified as RGB 178, 34, 34 (B22222 in hex). Converting to HSL results in values of 0, 68%, 42%. Yet these HSL values will remain unchanged if the RGB values are adjusted to 179, 34, 34 (B32222) and 180, 34, 34 (B42222). An algorithm converting from HSL to RGB might choose any of these variants depending on how rounding is handled. The algorithm used on this page (adapted from the W3C) converts HSL 0, 68%, 42% to RGB 180, 34, 34.
For more information: Check out the resources listed below.