CSS provides support for over 140 color names as well as various color representations including HEX values, RGB values, RGBA values, HSL values, HSLA values, and opacity settings.
RGBA color values extend RGB color values by incorporating an alpha channel, determining the opacity level for a color.
The syntax for specifying an RGBA color value is: rgba(red, green, blue, alpha), where the alpha parameter ranges from 0.0 (fully transparent) to 1.0 (fully opaque).
Below is an example showcasing various RGBA color definitions:
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 represents Hue, Saturation, and Lightness.
An HSL color value is defined as: hsl(hue, saturation, lightness).
1. Hue corresponds to a degree on the color wheel ranging from 0 to 360:
2. Saturation is expressed as a percentage, where 100% represents the full color intensity.
3. Lightness is also a percentage, where 0% signifies dark (black) and 100% indicates white.
Below is an example showcasing various HSL color definitions:
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 color values expand upon HSL color values by incorporating an alpha channel, determining the opacity level for a color.
The syntax for specifying an HSLA color value is: hsla(hue, saturation, lightness, alpha), where the alpha parameter defines the opacity level. It ranges from 0.0 (fully transparent) to 1.0 (fully opaque).
Below is an example illustrating various HSLA color definitions:
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 */ |
The CSS opacity property adjusts the transparency of the entire element, affecting both background color and text.
Opacity values must range from 0.0 (fully transparent) to 1.0 (fully opaque).
Note that the text above will also exhibit transparency or opacity.
Below is an example demonstrating various elements with different opacity settings:
Example
|
#p1 {background-color:rgb(255,0,0);opacity:0.6;} /* red with opacity */ |
