HSL is an alternative representation of the RGB color model where HSL is an acronym for Hue, saturation, and lightness.
If an extra alpha channel (opacity) is specified with HSL, the color model is called HSLA. It is an extension of HSL.
In HTML, different HSL values can also define different colors.
Below is an HSL color generator. Set different values for Hue, Saturation and Lightness to make different colors.
Hue
Saturation
Lightness
Here the value of hue can be set from 0 to 360 where 0 represents the red color, 120 represents the green color and 240 represents the blue color.
The value of saturation and lightness is provided in percentage. In the case of saturation value, 0% is the shade of gray color and 100% is the complete color.
It means that when the saturation is 0%, the shade of gray is added to the hue while when the saturation is 100% shade of gray is not added to the hue.
In the case of lightness, if the value is set to 0% then it is for the black color.
A lightness value of 100% defines the white color.
| Color | Name | HSL Code |
|---|---|---|
| Red | hsl(0,100%,50%) | |
| Green | hsl(120,100%,50%) | |
| Blue | hsl(240,100%,50%) | |
| White | hsl(0,100%,100%) | |
| Black | hsl(0,100%,0%) |
Saturation is the intensity of the color.
When the saturation is set to 100%, we can see the full color.
When it is set to 50% the color will have a 50% shade of gray.
When the saturation is set to 0% the color disappears and only a gray shade is visible.
The lightness value indicates the percentage of light addition to the color.
100% light addition makes the color white.
A 50% light addition makes the color representation normal. A 0% light addition makes the color black.
HSLA is an extension of HSL color with an alpha channel which sets an extra parameter for opacity.
Below is an HSLA color generator. Mix Hue, Saturation, Lightness and Alpha to make a new color.
Hue
Saturation
Lightness
Alpha
The alpha parameter can be set from 0.0 to 1.0. Where the value 0 indicates that the color is fully transparent and 1.0 indicates that the color is no more transparent.
The color transparency decreases gradually from the value 0 to 1.
| 1. HTML Tutorial |
| 2. Introduction to HTML |
| 3. Basic HTML Page |
| 4. HTML Editors |
| 5. Web Browser |
| 6. HTML History |
| 7. Basic HTML Tags |
| 8. HTML Elements |
| 9. HTML Attributes |
| 10. HTML Headings |
| 11. HTML Paragraphs |
| 12. HTML Text Formatting |
| 13. HTML Styles |
| 14. HTML Comment |
| 15. HTML Quotation |
| 16. HTML Colors |
| 17. HTML RGB Colors |
| 18. HTML HEX Colors |
| 19. HTML HSL Color |
| 20. HTML CSS |
| 21. HTML Links |
| 22. HTML Link Colors |
| 23. Link within Page |
| 24. HTML Images |
| 25. HTML Background Image |
| 26. HTML Image Map |
| 27. HTML Picture Element |
| 28. HTML Favicon |
| 29. HTML Table |
| 30. HTML Table Border |
| 31. HTML Table Size |