| Notation | Code |
|---|---|
| HSL | hsl(0,100%,50%) |
| RGB | rgb(255,0,0) |
| Hex | #FF0000 |
| Name(s) | Red |
‡ - Valid CSS colour name
JavaScript is NOT enabled. If you want to use this page, please enable Javascript.
Hue-Saturation-Lightness
, or HSL
, notation works completely differently than Red-Green-Blue or the related Hexadecimal. Instead of varying the levels of the primary colours of light, it sets the base colour, the strength of that colour, and how light or dark it is, and tells the computer to work the levels of the primary colours from there. The three gauges here allow you to set the hue, saturation, and lightness to find the colours you want.
Hue
refers to the base colour, which is determined by its position on The Colour Wheel
. As a circle has 360°, the three primaries are 120° apart, and all other colours are a matter of degree between the primaries—the secondary colours, for example, are exactly 60° from either of their respective primaries. Also, since it is a circle, the hues repeat every 360°; 780°
would be the same as 60°
and -300°
: all are yellow. The circles on the diäl are 10° apart; clicking on one of them will set the hue to its value. The double lines mark the primary colours of light (red, green, and blue), while the single lines mark the secondary colours (yellow, cyan, and magenta).
Saturation
refers to how strong the colour is: 100% means fully vibrant; 0% means completely grey (which means Hue
is meaningless and thus usually set to 0° for greys). Obviously, you can't go over 100% or under 0%, so Saturation
is displayed as a scale, not a diäl. The rectangles in the scale refer to intervals of 5%; clicking on one of them will set the scale to that value.
Lightness
refers to how light the colour is: 50% gives you the normal color, while 100% gives completely white and 0% gives completely black; at both extremes Hue
and Saturation
are meaningless, so both are usually set to 0°/% when white or black are used. As with the Saturation
scale, the rectangles in this scale refer to intervals of 5%; clicking on one of them will set the scale to that value.
Each gauge has buttons below it (Hue
) or beside it (Saturation
and Lightness
). Clicking on those will increment the setting by the amount displayed. These are to allow you to fine-tune the colour so you can find exactly the colour you want.
The display on the right side of the page shows:
You may also choose from the list of colour names to set the HSL gauges/code to the corresponding values. Just a note: the Hex/RGB are calculated from the HSL codes except in the case of a corresponding colour name. In those cases, the Hex/RGB codes assigned to the colour name are used, rather than what is calculated.