Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Color Formats 2/2 | Сolors and Background
Introduction to CSS Part II
course content

Course Content

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:

html

index

css

index

js

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.

html

index

css

index

js

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:

html

index

css

index

js

index

Everything was clear?

Section 2. Chapter 2
We're sorry to hear that something went wrong. What happened?
some-alt