CSS Colors
More than 140 color names, HEX, RGB, RGBA, HSL, HSLA, and opacity values are supported by CSS.
RGBA Colors
RGBA color values are an extension of RGB color values that include an alpha channel to indicate a color’s opacity.
The notation for an RGBA color value is rgba(red, green, blue, alpha). A number between 0.0 (completely transparent) and 1.0 (totally opaque) represents the alpha parameter.
The following example defines different RGBA colors:
Example
#p1 {background-color: rgba(255, 0, 0, 0.3);} /* red with opacity */
#p2 {background-color: rgba(0, 255, 0, 0.3);} /* green with opacity */
#p3 {background-color: rgba(0, 0, 255, 0.3);} /* blue with opacity */
HSL Colors
Hue, Saturation, and Lightness are referred to as HSL.
The formula for an HSL color value is hsl(hue, saturation, lightness).
- Hue is a degree on the color wheel, ranging from 0 to 360:
- 0 represents red, and
- 120 represents green.
- The number 240 is blue.
2. The whole color is represented by 100% of the saturation value.
3. Another percentage is lightness, where 0% is dark (black) and 100% is white.
The following example defines different HSL colors:
Example
#p1 {background-color: hsl(120, 100%, 50%);} /* green */
#p2 {background-color: hsl(120, 100%, 75%);} /* light green */
#p3 {background-color: hsl(120, 100%, 25%);} /* dark green */
#p4 {background-color: hsl(120, 60%, 70%);} /* pastel green */
HSLA Colors
The alpha channel, which determines a color’s opacity, is added to HSL color values to create HSLA color values.
The formula for an HSLA color value is hsla(hue, saturation, lightness, alpha), where alpha indicates the opacity. A number between 0.0 (completely transparent) and 1.0 (totally opaque) represents the alpha parameter.
The following example defines different HSL colors:
Example
#p1 {background-color: hsla(120, 100%, 50%, 0.3);} /* green with opacity */
#p2 {background-color: hsla(120, 100%, 75%, 0.3);} /* light green with opacity */
#p3 {background-color: hsla(120, 100%, 25%, 0.3);} /* dark green with opacity */
#p4 {background-color: hsla(120, 60%, 70%, 0.3);} /* pastel green with opacity */
Opacity
The entire element’s opacity (text and background color will both be opaque or transparent) is set via the CSS opacity attribute.
A value between 0.0 (completely transparent) and 1.0 (totally opaque) must be assigned to the opacity property.
Take note that the words above will likewise be opaque or transparent!
The opacity of several elements is demonstrated in the following example:
Example
#p1 {background-color:rgb(255,0,0);opacity:0.6;} /* red with opacity */
#p2 {background-color:rgb(0,255,0);opacity:0.6;} /* green with opacity */
#p3 {background-color:rgb(0,0,255);opacity:0.6;} /* blue with opacity */
