CSS hsl() Function
Example
Define different HSL(A) colors:
#p1 {background-color:hsl(120 100% 50%);} /* green */
#p2 {background-color:hsl(120
100% 75%);} /* light green */
#p3 {background-color:hsl(120 100% 25%);} /*
dark green */
#p4 {background-color:hsl(120 100% 25% / 20%);} /* dark green
with opcaity */
#p5 {background-color:hsl(120 60% 70%);} /* pastel green */
#p6 {background-color:hsl(290 100% 50%);} /* violet */
#p7 {background-color:hsl(290
60% 70%);} /* pastel violet */
#p8 {background-color:hsl(290 60% 70% /
0.3);} /* pastel violet with opacity */
Try it Yourself »
More "Try it Yourself" examples below.
Definition and Usage
The CSS hsl() function specifies a color using the Hue-Saturation-Lightness model (HSL).
An optional alpha component can also be added (represents the transparency of
the color).
Tip: HSL stands for Hue, Saturation, and Lightness - and represents a cylindrical-coordinate representation of colors.
Note: The hsla() function
is an alias for the hsl() function. It is
recommended to use the hsl() function.
| Version: | CSS3 |
|---|
Browser Support
The numbers in the table specify the first browser version that fully supports the function.
| Function | |||||
|---|---|---|---|---|---|
| hsl() | 1 | 9 | 1 | 3.1 | 9.5 |
| hsl() with alpha parameter | 65 | 79 | 52 | 12.1 | 52 |
| Space-separated parameters | 65 | 79 | 52 | 12.1 | 52 |
CSS Syntax
Absolute value syntax
hsl(hue saturation lightness / A)
| Value | Description |
|---|---|
| hue | Required. Defines a degree on the color wheel (from 0 to 360) - 0 (or 360) is red, 120 is green, 240 is blue |
| saturation | Required. Defines the saturation of the color; 0% is a shade of gray and 100% is the full color (full saturation). None can also be used (same as 0%) |
| lightness | Required. Defines the lightness of the color; 0% is black, 50% is normal, and 100% is white. None can also be used (same as 0%) |
| / A | Optional. Represents the alpha channel value of the color (from 0% (or 0) - fully transparent to 100% (or 100) - fully opaque). None can also be used (indicates no alpha channel). The default value is 100% |
Relative value syntax
hsl(from color hue saturation lightness / A)
| Value | Description |
|---|---|
| from color | Start with the keyword from, followed by a color value that represents the origin color. This is the original color that the relative color is based on |
| hue | Required. Defines a degree on the color wheel (from 0 to 360) - 0 (or 360) is red, 120 is green, 240 is blue |
| saturation | Required. Defines the saturation of the color; 0% is a shade of gray and 100% is the full color (full saturation). None can also be used (same as 0%) |
| lightness | Required. Defines the lightness of the color; 0% is black, 50% is normal, and 100% is white. None can also be used (same as 0%) |
| / A | Optional. Represents the alpha channel value of the color (from 0% (or 0) - fully transparent to 100% (or 100) - fully opaque). None can also be used (indicates no alpha channel). The default value is 100% |
More Examples
Example
Old syntax with comma-separated values:
#p1 {background-color:hsl(120, 100%, 50%);} /* green */
#p2 {background-color:hsl(120, 100%, 75%);} /* light green */
#p3 {background-color:hsl(120, 100%, 25%);} /* dark green */
#p4 {background-color:hsl(120, 60%, 70%);} /* pastel green */
#p5 {background-color:hsl(290, 100%, 50%);} /* violet */
#p6 {background-color:hsl(290,
60%, 70%);} /* pastel violet */
Try it Yourself »
Related Pages
CSS tutorial: CSS HSL colors.
CSS reference: CSS colors.
CSS reference: CSS hwb() function.
CSS reference: CSS lab() function.
CSS reference: CSS lch() function.
CSS reference: CSS oklab() function.
CSS reference: CSS oklch() function.
