hsl Notation

suggest change

HSL stands for hue (“which color”), saturation (“how much color”) and lightness (“how much white”).

Hue is represented as an angle from 0° to 360° (without units), while saturation and lightness are represented as percentages.

p {
    color: hsl(240, 100%, 50%); /* Blue */


color: hsl(<hue>, <saturation>%, <lightness>%);

Value | Description | —— | —— |<hue> | specified in degrees around the color wheel (without units), where 0° is red, 60° is yellow, 120° is green, 180° is cyan, 240° is blue, 300° is magenta, and 360° is red |<saturation> | specified in percentage where 0% is fully desaturated (grayscale) and 100% is fully saturated (vividly colored) |<lightness> | specified in percentage where 0% is fully black and 100% is fully white |


Feedback about page:

Optional: your email if you want me to get back to you:

Table Of Contents