Remember how we talked about picking colors using color keywords and RGB notations earlier? Well, CSS3 introduces some new ways to set colors for elements. These include rgba(), hsl(), and hsla().
Let's break down each of these color methods in the upcoming sections.
With the rgba() notation, you can define colors using the RGBA model, which stands for red-green-blue-alpha. This model is like RGB but with an alpha channel, determining the color's opacity.
The alpha value ranges from 0.0 (fully transparent) to 1.0 (fully opaque).
h1 {
color: rgba(0,0,255,0.5);
}
p {
background-color: rgba(0%,0%,100%,0.3);
}The hsl() notation lets you define colors in the HSL model, which stands for hue-saturation-lightness. Here, hue is represented by an angle from 0 to 360, indicating a position on the color wheel. Saturation and lightness are percentages, defining the color's vividness and brightness respectively.
For instance, 100% saturation is fully colorful, 0% saturation is grayscale, and 100% lightness is white while 0% lightness is black.
h1 {
color: hsl(360,70%,60%);
}
p {
background-color: hsl(480,50%,80%);
}Tip: In the HSL model, red=0=360, and other colors spread around the color wheel. So, green=120, blue=240, etc. Negative angles like -120=240 and angles beyond 360 wrap around accordingly.
Similar to RGBA, the hsla() notation allows you to define colors in the HSLA model, adding an alpha channel for opacity control.
The alpha value behaves the same way as in RGBA, ranging from 0.0 (fully transparent) to 1.0 (fully opaque).
h1 {
color: hsla(360,80%,50%,0.5);
}
p {
background-color: hsla(480,60%,30%,0.3);
}