Hue, Saturation, and Light Color Codes (Hue at 30° of separation)
This page demonstrates the hue, saturation, and light (HSL) representation of color of the form hsl(H, S%, L%), where H is the hue measured in degrees of the color circle ranging from 0 to 360 (red = 0°; green = 120°; blue = 240°). S is the saturation percent (100% full saturation, 0% is a shade of gray); L is the lightness percent (100% is white, 0% is black, 50% is 'normal'). This is one of the several ways you can define colors in HTML or style sheets; you can use a quick reference table to help you choose from among the many color tables available. You can use this Generated Chips chart to set up color schemes.NOTE: Not all Web browsers will show colors defined using HSL. The Mozilla Web browser shows colors defined by this method; as of July 2005, Microsoft Internet Explorer does not.
In the chart below, the number at the top of a group of cells shows the hue value for that group; above each swatch, the values for the saturation and light are shown.
The hue value increases by 30° in successive charts through red, yellow, green, blue, and violet. The saturation values vary by column, with the highest saturation to the right of each chart. The light values vary by row, with the highest light to the top of each chart. If you want smaller separation of hue, charts are available showing the hue change by 10° and hue change by 6°.
Low or high light and low saturation values are not shown, as they are either very dark or white (for example 100% light is white for any hue; 0% light is black for any hue; 0% saturation is a shade of gray for any hue.) Here are the shades of gray for 0% saturation that would be the column at the start of each table for any of the hues:
| 0% 90% | 0% 80% | 0% 70% | 0% 60% | 0% 50% | 0% 40% | 0% 30% | 0% 20% |
You can see these same colors shown and defined with their hexadecimal values.
| 10% 90% | 20% 90% | 30% 90% | 40% 90% | 50% 90% | 60% 90% | 70% 90% | 80% 90% | 90% 90% | 100% 90% |
| 10% 80% | 20% 80% | 30% 80% | 40% 80% | 50% 80% | 60% 80% | 70% 80% | 80% 80% | 90% 80% | 100% 80% |
| 10% 70% | 20% 70% | 30% 70% | 40% 70% | 50% 70% | 60% 70% | 70% 70% | 80% 70% | 90% 70% | 100% 70% |
| 10% 60% | 20% 60% | 30% 60% | 40% 60% | 50% 60% | 60% 60% | 70% 60% | 80% 60% | 90% 60% | 100% 60% |
| 10% 50% | 20% 50% | 30% 50% | 40% 50% | 50% 50% | 60% 50% | 70% 50% | 80% 50% | 90% 50% | 100% 50% |
| 10% 40% | 20% 40% | 30% 40% | 40% 40% | 50% 40% | 60% 40% | 70% 40% | 80% 40% | 90% 40% | 100% 40% |
| 10% 30% | 20% 30% | 30% 30% | 40% 30% | 50% 30% | 60% 30% | 70% 30% | 80% 30% | 90% 30% | 100% 30% |
| 10% 20% | 20% 20% | 30% 20% | 40% 20% | 50% 20% | 60% 20% | 70% 20% | 80% 20% | 90% 20% | 100% 20% |
| 10% 90% | 20% 90% | 30% 90% | 40% 90% | 50% 90% | 60% 90% | 70% 90% | 80% 90% | 90% 90% | 100% 90% |
| 10% 80% | 20% 80% | 30% 80% | 40% 80% | 50% 80% | 60% 80% | 70% 80% | 80% 80% | 90% 80% | 100% 80% |
| 10% 70% | 20% 70% | 30% 70% | 40% 70% | 50% 70% | 60% 70% | 70% 70% | 80% 70% | 90% 70% | 100% 70% |
| 10% 60% | 20% 60% | 30% 60% | 40% 60% | 50% 60% | 60% 60% | 70% 60% | 80% 60% | 90% 60% | 100% 60% |
| 10% 50% | 20% 50% | 30% 50% | 40% 50% | 50% 50% | 60% 50% | 70% 50% | 80% 50% | 90% 50% | 100% 50% |
| 10% 40% | 20% 40% | 30% 40% | 40% 40% | 50% 40% | 60% 40% | 70% 40% | 80% 40% | 90% 40% | 100% 40% |
| 10% 30% | 20% 30% | 30% 30% | 40% 30% | 50% 30% | 60% 30% | 70% 30% | 80% 30% | 90% 30% | 100% 30% |
| 10% 20% | 20% 20% | 30% 20% | 40% 20% | 50% 20% | 60% 20% | 70% 20% | 80% 20% | 90% 20% | 100% 20% |
| 10% 90% | 20% 90% | 30% 90% | 40% 90% | 50% 90% | 60% 90% | 70% 90% | 80% 90% | 90% 90% | 100% 90% |
| 10% 80% | 20% 80% | 30% 80% | 40% 80% | 50% 80% | 60% 80% | 70% 80% | 80% 80% | 90% 80% | 100% 80% |
| 10% 70% | 20% 70% | 30% 70% | 40% 70% | 50% 70% | 60% 70% | 70% 70% | 80% 70% | 90% 70% | 100% 70% |
| 10% 60% | 20% 60% | 30% 60% | 40% 60% | 50% 60% | 60% 60% | 70% 60% | 80% 60% | 90% 60% | 100% 60% |
| 10% 50% | 20% 50% | 30% 50% | 40% 50% | 50% 50% | 60% 50% | 70% 50% | 80% 50% | 90% 50% | 100% 50% |
| 10% 40% | 20% 40% | 30% 40% | 40% 40% | 50% 40% | 60% 40% | 70% 40% | 80% 40% | 90% 40% | 100% 40% |
| 10% 30% | 20% 30% | 30% 30% | 40% 30% | 50% 30% | 60% 30% | 70% 30% | 80% 30% | 90% 30% | 100% 30% |
| 10% 20% | 20% 20% | 30% 20% | 40% 20% | 50% 20% | 60% 20% | 70% 20% | 80% 20% | 90% 20% | 100% 20% |