Course Content
Introduction to CSS Part II
Introduction to CSS Part II
Color Formats 2/2
HSL
Another common method of specifying color in the design landscape is the Hue, Saturation, Lightness or HSL.
The HSL color value format is used to specify colors using this color model. It is written as hsl(hue, saturation, lightness)
, where the hue
value can range from 0 to 359, representing the degree on the color wheel, and the saturation
value can range from 0% to 100%, representing the intensity of the color, and the lightness
value can range from 0% to 100%, representing the brightness of the color.
For example, the color red can be specified using the hsl
color value hsl(0, 100%, 50%)
, as it has a hue value of 0 (corresponding to red on the color wheel), a saturation value of 100%, and a lightness value of 50%.
Here is an example of how the hsl
color value can be used in a CSS rule:
index
index
index
So now that we have covered all of the methods to specify colors in CSS, we will move on to the other aspect of colors, called opacity and sometimes known as the alpha value in CSS.
RGBA
RGBA stands for Red Green Blue Alpha and is a variant of the RGB color model used in CSS. It is similar to the RGB color model, with the addition of a fourth value, alpha, which represents the transparency of the color. The alpha value can range from 0 to 1, representing the transparency of the color.
index
index
index
HSLA
HSLA is a variant of the HSL color model, with the addition of the alpha value for transparency. The HSLA color value format is used to specify colors using this color model. It is written as hsla(hue, saturation, lightness, alpha)
, where the hue
, saturation
, and lightness
values have the same meaning as in the hsl
color value format, and the alpha
value can range from 0 to 1, representing the transparency of the color.
For example, the color red with 50% transparency can be specified using the hsla
color value hsla(0, 100%, 50%, 0.5), as it has a hue value of 0 (corresponding to red on the color wheel), a saturation value of 100%, a lightness value of 50%, and an alpha value of 0.5.
Here is an example of how the HSLA color value can be used in a CSS rule:
index
index
index
Thanks for your feedback!