CSS3 Color (Color)

CSS3has provided several new methods for defining color values.

CSS3to define colors

In the previous section, you learned how to usecolor keyword and RGB notationDefine the color. In addition to CSS3New symbols rgba(), hsl(), and hsla() have been added for setting color values as element properties.

In the following sections, we will discuss these color models one by one.

RGBA color value

The rgba() function symbol can be used in the RGBA color model (red-Green-Blue-alpha) to define colors. The RGBA color model is an extension of the RGB color model with an alpha channel, used to specify the opacity of the color.

The alpha parameter accepts values from 0.0 (completely transparent) to1.0 (completely transparent) value.

h1　{
　　　　color: rgba(0,0,255,0.5);
}
p {
　　　　background-color: rgba(0%,0%,100%,0.3);
}

HSL color values

Colors can also be defined using the hsl() function symbol in the HSL model (hue-Saturation-0). The hue is represented as an angle on the color wheel or circle (i.e., represented as a rainbow in a circle), from 0 to360). This angle is given in fewer units because the angle is usually measured in degrees, so the unit is implicitly present in CSS.

Saturation and brightness are represented as percentages.100% saturation represents full color, and 0% is gray shadow. However,100% brightness is white, 0% brightness is black,50% brightness is normal. See the following example:

h1　{
　　　　color: hsl(360,70%,60%);
}
p {
　　　　background-color: hsl(480,50%,80%);
}

HSLA color values

The hsla() function symbol can be used in the HSLA model (hue saturation-Brightness-alpha) to define colors. The HSLA color model is an extension of the HSL color model with an alpha channel, which specifies the opacity of the color.

The alpha parameter accepts values from 0.0 (completely transparent) to1.0 (completely transparent) value.

h1　{
　　　　color: hsla(360,80%,50%,0.5);
}
p {
　　　　background-color: hsla(480,60%,30%,0.3);
}