CSS3 colors adds some new functional notations for setting color values for the elements which are rgba(), hsl() and hsla().
CSS3 Colors-RGBA
RGBA color model are an extension of RGB color model with an alpha channel — which specifies the opacity of a color. The alpha parameter accepts a value from 0.0 (fully transparent) to 1.0 (fully opaque).
h1 {
color: rgba(192,192,192,0.3);
}
p {
background-color: rgba(255,0,0,0.3);
}
HSL color
HSL model is (hue-saturation-lightness) using the hsl() functional notation. Hue is represented as an angle (from 0 to 360) of the color wheel or circle (i.e. the rainbow represented in a circle).
- Hue is a degree on the color wheel (from 0 to 360):
- 0 (or 360) is red
- 120 is green
- 240 is blue
- Saturation is a percentage value: 100% is the full color.
- Lightness is also a percentage; 0% is dark (black) and 100% is white.
h1 {
color: hsl(290,100%,50%);
}
p {
background-color: hsl(120,100%,50%);
}
HSLA color
HSLA color model are an extension of HSL color model with an alpha channel — which specifies the opacity of a color.
The alpha parameter accepts a value from 0.0 (fully transparent) to 1.0 (fully opaque).
h1 {
color: hsla(120,100%,75%,0.3);
}
p {
background-color: hsla(120,100%,25%,0.3);
}