settings
skip menu
change media type
xhtml+xml
change language
deutsch
scripting

URI: http://www.j-a-b.net/web/hue/color-hsl
last updated: 2009-12-04
© 2002-2009 Contact

up down
Subject Index

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.

view of a single table cell 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 external reference 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).

choose display method
show chart

no display method chosen

Subject Index

CC logo
This page is licensed under a Creative Commons License.