RGBA Color Values in CSS3


The RGBA color value is for Red, Green, Blue and Alpha. The alpha is the color opacity i.e. a number between 0.0 and 1.0. Here, 1.0 would be for full opaque. Here, we can see the difference in opacity created with the Alpha parameter in RGBA.

Syntax

The following is the syntax of the RGBA Color Values −

rgba(red, green, blue, alpha)

Above, the following values are added to the rgba() method.

Red

Set the color as an −

  • Integer between 0 and 255.

  • Percentage between 0% and 100%

Green

Set the color as an −

  • Integer between 0 and 255.

  • Percentage between 0% and 100%

Blue

Set the color as an −

  • Integer between 0 and 255.

  • Percentage between 0% and 100%

Alpha

The alpha is a number for −

  • Fully transparent: 0.0

  • No transparency: 1.0

Set the text background color with RGBA

Let us now see an example to set the text background color using the RGBA color values −

Example

<!DOCTYPE html>
<html>
<head>
   <style>
      #demo1 {background-color:rgba(108,111,35,0.6);}
      #demo2 {background-color:rgba(108,111,35,0.5);}
      #demo3 {background-color:rgba(108,111,35,0.4);}
      #demo4 {background-color:rgba(108,111,35,0.3);}
      #demo5 {background-color:rgba(108,111,35,0.2);}
      #demo6 {background-color:rgba(108,111,35,0.1);}
   </style>
</head>
<body>
   <h1>Cricketers</h1>
   <p id="demo1">David Warner</p>
   <p id="demo2">Steve Smith</p>
   <p id="demo3">Mark Waugh</p>
   <p id="demo4">Steve Waugh</p>
   <p id="demo5">David Johnson</p>
   <p id="demo6">Andy Bichel</p>
</body>
</html>

Updated on: 26-Dec-2023

114 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements