Color Spot Tables: tables of color swatches and color codes used in HTML and CSS

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 Namehsl(h,s,l)Swatchhsla(h,s,l,a) Swatches
hsl(h,s,l)a = 1.0a = 0.9a = 0.8a = 0.7a = 0.6a = 0.5a = 0.4a = 0.3a = 0.2a = 0.1a = 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
Save this page to any social bookmarking site! Share · Search · Market · Directory
2015-11-01 · John December · Contact · Terms of Use © December Communications, Inc.