HTML Color Names and RGB, Hexadecimal and HSL Color Codes – A Brief Tutorial

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.

• Use predefined color names: The W3C organization that sets standards for the World Wide Web has specified 138 unique colors by name (some colors have duplicate names). Web page authors can use any of these colors simply be selecting the predefined name. (These colors are also known as the "X11 Colors".)
• Set values for red, green and blue (RGB): This method offers the most flexibility because there are more than 16.7 million colors to choose from. Values for red, green and blue can be set in one of three ways:
  • Use decimal integers between 0 and 255 to specify the "amount" of red, green and blue. Thus, an RGB decimal code of "255, 255, 255" represents full amounts of red, green and blue – a mixture that produces white. To produce pure red, use "255, 0, 0" – in other words, the full amount of red, with no green or blue.
  • Use percentage values between 0% and 100% to specify the "percentage" of red, green and blue. This is similar to the method above except that the "amount" of each color is specified as a percentage (where 100% would be the equivalent of decimal 255). Thus, white would be "100%, 100%, 100%" and pure red would be "100%, 0%, 0%".
  • Use hexadecimal values between 00 and FF to specify the "amount" of red, green and blue. Using hexadecimal values is similar to setting red, green and blue using decimal integers, except that values are stated in hexadecimal (base 16) notation. Thus, decimal "255" is hexadecimal "FF". In addition, the three hexadecimal values are compressed together so they appear to be one six digit number. Thus, white becomes "FFFFFF" and pure red would be "FF0000".
• Set values for hue, saturation and lightness (HSL): Hue 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 (think of a rainbow with the ends pulled together to form a circle). 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). The lightness value is also a percentage. A value of 50% produces a "normal" color; 0% will always produce black and 100% will always produce white. NOTE: Setting colors by HSL values does not work in Internet Explorer (at least up through IE 6).

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.)

---

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 text</span>.

---

Percentages: It is also possible to use percentage values instead of decimal integers. Something like this: <span 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).

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 this: <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).

---

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: <span 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 <span style="color: #00FF00;">Some text</span> or <span 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.

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.