CSS supports 140+ color names, RGB values, HEX values, and HSL values. In addition, there are RGBA values, HEXA values, HSLA values, and the opacity property.
RGBA Colors
RGBA color values are an extension of RGB colors with an alpha channel - which specifies the opacity for a color.
An RGBA color value is specified with:
rgba(red, green, blue, alpha)
The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque).
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 */
HEXA Colors
HEXA color values are an extension of HEX colors with an alpha channel - which specifies the opacity for a color.
A HEXA color value is specified with:
#rrggbbaa
The alpha parameter is a value between 00 (fully transparent) and FF (not transparent at all). The value 80 indicates 50% opacity:
Example
<div class="w3-row w3-center" style="line-height:80px;color:white;font-size:20px;font-weight:bold;font-family:Consolas, 'Courier New', Courier, monospace">
<div class="w3-col m6 w3-padding">
<div style="background-color:#ff000080;">#ff000080</div>
</div>
<div class="w3-col m6 w3-padding">
<div style="background-color:#0000ff80;">#0000ff80</div>
</div>
<div class="w3-col m6 w3-padding">
<div style="background-color:#3cb37180;">#3cb37180</div>
</div>
<div class="w3-col m6 w3-padding">
<div style="background-color:#ee82ee80;">#ee82ee80</div>
</div>
<div class="w3-col m6 w3-padding">
<div style="background-color:#ffa50080;">#ffa50080</div>
</div>
<div class="w3-col m6 w3-padding">
<div style="background-color:#6a5acd80;">#6a5acd80</div>
</div>
</div>
Here are some common opacity percentages and their exact 2-digit HEX values:
- 100% - FF (not transparent at all)
- 90% - E6
- 80% - CC
- 70% - B3
- 60% - 99
- 50% - 80
- 40% - 66
- 30% - 4D
- 20% - 33
- 10% - 1A
- 0% - 00 (fully transparent)
HSLA Colors
HSLA color values are an extension of HSL colors with an alpha channel - which specifies the opacity for a color.
An HSLA color value is specified with:
hsla(hue, saturation, lightness, alpha)
The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque):
The following example defines different HSLA 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 */
CSS opacity Property
The opacity property sets the opacity for the whole element (both background color and text will be opaque/transparent).
The opacity property value must be a number between 0.0 (fully transparent) and 1.0 (fully opaque).
Notice that the text inside the element will also be transparent/opaque!
The following example shows different elements with opacity:
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 */
