In this article, you will learn-
- 1 CSS HSL Colors
- 2 CSS Colors
- 3 HSL Value
- 4 hsl(0, 100%, 50%)
- 5 hsl(240, 100%, 50%)
- 6 hsl(147, 50%, 47%)
- 7 hsl(300, 76%, 72%)
- 8 hsl(39, 100%, 50%)
- 9 hsl(248, 53%, 58%)
- 10 Saturation
- 11 hsl(0, 100%, 50%)
- 12 hsl(0, 80%, 50%)
- 13 hsl(0, 60%, 50%)
- 14 hsl(0, 40%, 50%)
- 15 hsl(0, 20%, 50%)
- 16 hsl(0, 0%, 50%)
- 17 Lightness
- 18 hsl(0, 100%, 0%)
- 19 hsl(0, 100%, 25%)
- 20 hsl(0, 100%, 50%)
- 21 hsl(0, 100%, 75%)
- 22 hsl(0, 100%, 90%)
- 23 hsl(0, 100%, 100%)
- 24 hsl(0, 0%, 0%)
- 25 hsl(0, 0%, 24%)
- 26 hsl(0, 0%, 47%)
- 27 hsl(0, 0%, 71%)
- 28 hsl(0, 0%, 94%)
- 29 hsl(0, 0%, 100%)
- 30 HSLA Value
- 31 hsla(9, 100%, 64%, 0)
- 32 hsla(9, 100%, 64%, 0.2)
- 33 hsla(9, 100%, 64%, 0.4)
- 34 hsla(9, 100%, 64%, 0.6)
- 35 hsla(9, 100%, 64%, 0.8)
- 36 hsla(9, 100%, 64%, 1)
CSS HSL Colors
CSS HSL Colors: HSL stands for hue, saturation, and lightness.
CSS Colors
Colors are specified using predefined colors names, or RGB, HEX, HSL, RGBA, HSLA values.
The color property in CSS is used to set the color of HTML elements. Commonly, this property is used to set the background color or the font color of an element.
In CSS, we use color values for specifying the color. We can likewise use this property for the border-color and other decorative effects.
We can define the color of an element by using the accompanying ways:
- RGB format.
- RGBA format.
- Hexadecimal notation.
- HSL.
- HSLA.
- Built-in color.
HSL Value
In CSS, a color can be specified using hue, saturation, and lightness (HSL) in the form:
hsl(hue, saturation, lightness)
Hue is a degree on the color wheel from 0 to 360. 0 is red, 120 is green, and 240 is blue.
Saturation is a percentage value, 0% means a shade of gray, and 100% is the full color.
Lightness is likewise a percentage, 0% is black, 50% is neither light or dark, 100% is white
Experiment by mixing the HSL values beneath:
<!DOCTYPE html> <html> <body> <h2 style="background-color:hsl(0, 100%, 50%);">hsl(0, 100%, 50%)</h2> <h2 style="background-color:hsl(240, 100%, 50%);">hsl(240, 100%, 50%)</h2> <h2 style="background-color:hsl(147, 50%, 47%);">hsl(147, 50%, 47%)</h2> <h2 style="background-color:hsl(300, 76%, 72%);">hsl(300, 76%, 72%)</h2> <h2 style="background-color:hsl(39, 100%, 50%);">hsl(39, 100%, 50%)</h2> <h2 style="background-color:hsl(248, 53%, 58%);">hsl(248, 53%, 58%)</h2> <p>In HTML, you can specify colors using HSL values.</p> </body> </html>
hsl(0, 100%, 50%)
hsl(240, 100%, 50%)
hsl(147, 50%, 47%)
hsl(300, 76%, 72%)
hsl(39, 100%, 50%)
hsl(248, 53%, 58%)
In HTML, you can specify colors using HSL values.
Saturation
Saturation can be described as the intensity of a color.
100% is pure color, no shades of gray
50% is 50% gray, but you can in any case see the color.
0% is completely gray, you can presently don’t see the color.
Example
<!DOCTYPE html> <html> <body> <h2 style="background-color:hsl(0, 100%, 50%);">hsl(0, 100%, 50%)</h2> <h2 style="background-color:hsl(0, 80%, 50%);">hsl(0, 80%, 50%)</h2> <h2 style="background-color:hsl(0, 60%, 50%);">hsl(0, 60%, 50%)</h2> <h2 style="background-color:hsl(0, 40%, 50%);">hsl(0, 40%, 50%)</h2> <h2 style="background-color:hsl(0, 20%, 50%);">hsl(0, 20%, 50%)</h2> <h2 style="background-color:hsl(0, 0%, 50%);">hsl(0, 0%, 50%)</h2> <p>With HSL colors, less saturation mean less color. 0% is completely gray.</p> </body> </html>
hsl(0, 100%, 50%)
hsl(0, 80%, 50%)
hsl(0, 60%, 50%)
hsl(0, 40%, 50%)
hsl(0, 20%, 50%)
hsl(0, 0%, 50%)
With HSL colors, less saturation mean less color. 0% is completely gray.
Lightness
The lightness of a color can be described as how much light you need to give the color, where 0% means no light (black), 50% means 50% light (neither dark nor light) 100% means full lightness (white).
Example
<!DOCTYPE html> <html> <body> <h2 style="background-color:hsl(0, 100%, 0%);">hsl(0, 100%, 0%)</h2> <h2 style="background-color:hsl(0, 100%, 25%);">hsl(0, 100%, 25%)</h2> <h2 style="background-color:hsl(0, 100%, 50%);">hsl(0, 100%, 50%)</h2> <h2 style="background-color:hsl(0, 100%, 75%);">hsl(0, 100%, 75%)</h2> <h2 style="background-color:hsl(0, 100%, 90%);">hsl(0, 100%, 90%)</h2> <h2 style="background-color:hsl(0, 100%, 100%);">hsl(0, 100%, 100%)</h2> <p>With HSL colors, 0% lightness means black, and 100 lightness means white.</p> </body> </html>
hsl(0, 100%, 0%)
hsl(0, 100%, 25%)
hsl(0, 100%, 50%)
hsl(0, 100%, 75%)
hsl(0, 100%, 90%)
hsl(0, 100%, 100%)
With HSL colors, 0% lightness means black, and 100 lightness means white.
Shades of gray are often defined by setting the hue and saturation to 0, and change the lightness from 0% to 100% to get darker/lighter shades:
Example
<!DOCTYPE html> <html> <body> <h2 style="background-color:hsl(0, 0%, 0%);">hsl(0, 0%, 0%)</h2> <h2 style="background-color:hsl(0, 0%, 24%);">hsl(0, 0%, 24%)</h2> <h2 style="background-color:hsl(0, 0%, 47%);">hsl(0, 0%, 47%)</h2> <h2 style="background-color:hsl(0, 0%, 71%);">hsl(0, 0%, 71%)</h2> <h2 style="background-color:hsl(0, 0%, 94%);">hsl(0, 0%, 94%)</h2> <h2 style="background-color:hsl(0, 0%, 100%);">hsl(0, 0%, 100%)</h2> <p>With HSL colors, shades of gray are made by setting the saturation to 0%, and adjusting the lightness according to how dark/light the gray color should be.</p> </body> </html>
hsl(0, 0%, 0%)
hsl(0, 0%, 24%)
hsl(0, 0%, 47%)
hsl(0, 0%, 71%)
hsl(0, 0%, 94%)
hsl(0, 0%, 100%)
With HSL colors, shades of gray are made by setting the saturation to 0%, and adjusting the lightness according to how dark/light the gray color should be.
HSLA Value
HSLA color values are an extension of HSL color values with an alpha channel – which specifies the opacity for a color.
An HSLA color value is specified with:
hsla(hue, saturation, lightness, alpha)
The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (not transparent at all):
Experiment by mixing the HSLA values beneath:
<!DOCTYPE html> <html> <body> <h2 style="background-color:hsla(9, 100%, 64%, 0);">hsla(9, 100%, 64%, 0)</h2> <h2 style="background-color:hsla(9, 100%, 64%, 0.2);">hsla(9, 100%, 64%, 0.2)</h2> <h2 style="background-color:hsla(9, 100%, 64%, 0.4);">hsla(9, 100%, 64%, 0.4)</h2> <h2 style="background-color:hsla(9, 100%, 64%, 0.6);">hsla(9, 100%, 64%, 0.6)</h2> <h2 style="background-color:hsla(9, 100%, 64%, 0.8);">hsla(9, 100%, 64%, 0.8)</h2> <h2 style="background-color:hsla(9, 100%, 64%, 1);">hsla(9, 100%, 64%, 1)</h2> <p>You can make transparent colors by using the HSLA color value.</p> </body> </html>
hsla(9, 100%, 64%, 0)
hsla(9, 100%, 64%, 0.2)
hsla(9, 100%, 64%, 0.4)
hsla(9, 100%, 64%, 0.6)
hsla(9, 100%, 64%, 0.8)
hsla(9, 100%, 64%, 1)
You can make transparent colors by using the HSLA color value.
Related:
Thanks for reading! We hope you found this tutorial helpful and we would love to hear your feedback in the Comments section below. And show us what you’ve learned by sharing your projects with us.
