rgba()

The rgba() functional notation is used to set colors as a combination of red, green, blue and an alpha value for transparency.

The color function is a variation of the rgb() function. In addition to the three color values it accepts, it also accepts a fourth value: an alpha value, or the opacity, which is expressed as a decimal number between 0 and 1. For example, if you want to set a semi-transparent red color, you could write: rgba(100%, 0, 0, 0.5), where the last value 0.5 sets the transparency of the color to half its value. An alpha value of 1 means the color is fully opaque, and the value 0 means the color is fully transparent.

The following example will create a semi-transparent purple background color on an element, with white text.

.some-class {
  color: rgba(255, 255, 255, 1); /* fully-opaque white text color */
  background-color: rgba(255, 0, 255, 0.5); /* semi-transparent background color */
}
        

The following is a live demo showing how the color changes when its opacity is changed by changing the alpha value in the function.