Hue, Saturation, Light, and Opacity Color Codes
This page demonstrates the hue, saturation, light, and alpha (opacity) method of defining color for a selected list of colors with swatches defined by this method. The definition is of the form hsla(H,S%,L%,a) where H is the hue measured in degrees of the color circle (red = 0°; green = 120°; blue = 240°). S is the saturation (100% full saturation, 0% is a shade of gray); L is the lightness (100% is white, 0% is black, 50% is 'normal'). The alpha (a) is the opacity of the color (a = 0 = transparent; a = 1 = opaque). This is just one of the ways you can define colors in HTML attributes and in Cascading Style Sheets; you can use a quick reference table to help you choose from among the many color tables available. As of January 2009, the Mozilla and Google Chrome browsers display colors by this definition method.The color list below demonstrates these HSLA codes.
| Color Name | hsl(h,s,l) | Swatch | hsla(h,s,l,a) Swatches | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| hsl(h,s,l) | a = 1.0 | a = 0.9 | a = 0.8 | a = 0.7 | a = 0.6 | a = 0.5 | a = 0.4 | a = 0.3 | a = 0.2 | a = 0.1 | a = 0.0 | ||
| black | hsl(0,0%,0%) | text | text | text | text | text | text | text | text | text | text | text | text |
| navy | hsl(240,100%,25%) | text | text | text | text | text | text | text | text | text | text | text | text |
| blue | hsl(240,100%,50%) | text | text | text | text | text | text | text | text | text | text | text | text |
| green | hsl(120,100%,25%) | text | text | text | text | text | text | text | text | text | text | text | text |
| teal | hsl(180,100%,25%) | text | text | text | text | text | text | text | text | text | text | text | text |
| lime | hsl(120,100%,50%) | text | text | text | text | text | text | text | text | text | text | text | text |
| aqua | hsl(180,100%,50%) | text | text | text | text | text | text | text | text | text | text | text | text |
| maroon | hsl(0,100%,25%) | text | text | text | text | text | text | text | text | text | text | text | text |
| purple | hsl(300,100%,25%) | text | text | text | text | text | text | text | text | text | text | text | text |
| olive | hsl(60,100%,25%) | text | text | text | text | text | text | text | text | text | text | text | text |
| gray | hsl(0,0%,50%) | text | text | text | text | text | text | text | text | text | text | text | text |
| silver | hsl(0,0%,75%) | text | text | text | text | text | text | text | text | text | text | text | text |
| red | hsl(0,100%,50%) | text | text | text | text | text | text | text | text | text | text | text | text |
| fuchsia | hsl(300,100%,50%) | text | text | text | text | text | text | text | text | text | text | text | text |
| yellow | hsl(60,100%,50%) | text | text | text | text | text | text | text | text | text | text | text | text |
| white | hsl(0,0%,100%) | text | text | text | text | text | text | text | text | text | text | text | text |