Example of 3564 HSL-Coded Colours

The chart on this page shows an excerpt of the HSL colour space. This chart is based on 36 hues, beginning with Red (value: 0), cycling through the colour circle in steps of 10 and ending with an only slightly blue-tinged purple (value: 350). Inside a row the lightness increases in steps of 10%, from 10% to 90%. I omitted 0% and 100% lightness as they result in Black or White respectively, regardless of hue or saturation. Inside a colour block the saturation of a colour increases in steps of 10% from 0% to 100%. Notice that a saturation of 0% leads to greyscale colours.

Each cell shows the HSL values corresponding to the background colour. Take for example the values hsl(300,100%,50%). A hue of 300 lies right in the middle between Blue (240) and Red (360=0). A saturation of 100% means, that we obtain the pure colour without any tinge of grey and a lightness of 50% means, that we have the plain lightness, neither a lighter nor a darker shade. Its corresponding RGB value would be rgb(255,0,255) resp. #FF00FF or expressed in relative values rgb(100%,0,100%). For converting HSL and RGB values into each other I have written a small script which you might find useful.

HSL colour values are introduced in the CSS3 Color Module which has status of a Candidate Recommendation. Currently a couple of browsers, notably Gecko-based user agents support this property. Therefore you should choose image as display method when viewing the HSL-chart with other browsers, like Opera or Internet Explorer, as they do not yet support HSL colour values. However, as the image is quite large (480px * 17,420px - 960kB), you might experience extended download times on modest connections (Opera users also see Page Freezing).