CSS RGBA Colors

Please Share On:
  1. RGBA Colors

Definition:

RGBA value stands for Red, Green, Blue, and Alpha values. RGB values range from the lowest value “0” to the highest value “255“. The alpha parameters range from 0.0 (fully transparent) to 1.0 (none transparent).

RGBA values are used in the form RGBA (red, green, blue, alpha). For example rgba(0,255,0,0.5). These values display green with partly transparent. Red and Green are the lowest values and green has the highest value that displays partly transparent green. See the below example of using RGBA values.

Source Code

<!DOCTYPE html>
<html>
  <body>
    <h3 style="background-color:rgba(255,0,0,0.5)"><center>rgba(255,0,0,0.5)<br/> red(r) value is highest i.e 255. <br/> green(g) and blue(b) values are lowest i.e 0.<br/> The alpha values is 0.5. <br/></center></h3>
    <hr>
    <h3 style="background-color:rgba(0,255,0,1.0);"><center>rgb(0,255,0,1.0) <br/>green(g) value is highest i.e 255. <br/> red(r) and blue(b) values are lowest i.e 0.<br/>The alpha value is 1.0.</center></h3>
    <hr>
    <h3 style="background-color:rgba(0,0,255,0.1);"><center>rgba(0,0,255,0.1)<br/> blue(b) value is highest i.e 255. <br/> red(r) and green(g) values are lowest i.e 0.<br/> The alpha value is 0.1.</center></h3>
  </body>
</html>

Output:

try it yourself

You can use any color combination of RGBA values.

Let’s use the RGBA color values in backgrounds, texts, and borders.

1.1 Using RGBA color values in backgrounds:

Source Code:

<!DOCTYPE html>
<html>
  <body>
    <h3 style="background-color:rgba(255,0,0,0.1);"><center>The alpha paramater is 0.1</center></h3>
    <h3 style="background-color:rgba(255,0,0,0.2);"><center>The alpha paramater is 0.2</center></h3>
    <h3 style="background-color:rgba(255,0,0,0.3);"><center>The alpha paramater is 0.3</center></h3>
    <h3 style="background-color:rgba(255,0,0,0.4);"><center>The alpha paramater is 0.4</center></h3>
    <h3 style="background-color:rgba(255,0,0,0.5);"><center>The alpha paramater is 0.5</center></h3>
    <h3 style="background-color:rgba(255,0,0,0.6);"><center>The alpha paramater is 0.6</center></h3>
    <h3 style="background-color:rgba(255,0,0,0.7);"><center>The alpha paramater is 0.7</center></h3>
    <h3 style="background-color:rgba(255,0,0,0.8);"><center>The alpha paramater is 0.8</center></h3>
    <h3 style="background-color:rgba(255,0,0,0.9);"><center>The alpha paramater is 0.9</center></h3>
    <h3 style="background-color:rgba(255,0,0,1.0);"><center>The alpha paramater is 1.0</center></h3>
  </body>
</html>

Output:

try it yourself

1.2 Using RGBA colors values in texts:

Source Code:

<!DOCTYPE html>
<html>
  <style>
    .style1{color:rgba(255,0,0,0.1);}
    .style2{color:rgba(255,0,0,0.2);}
    .style3{color:rgba(255,0,0,0.3);}
    .style4{color:rgba(255,0,0,0.4);}
    .style5{color:rgba(255,0,0,0.5);}
    .style6{color:rgba(255,0,0,0.6);}
    .style7{color:rgba(255,0,0,0.7);}
    .style8{color:rgba(255,0,0,0.8);}
    .style9{color:rgba(255,0,0,0.9);}
    .style10{color:rgba(255,0,0,1.0);}
  </style>

  <body>
    <h3 class="style1"><center>The alpha parameter is 0.1.</center></h3>
    <h3 class="style2"><center>The alpha parameter is 0.2.</center></h3>
    <h3 class="style3"><center>The alpha parameter is 0.3.</center></h3>
    <h3 class="style4"><center>The alpha parameter is 0.4.</center></h3>
    <h3 class="style5"><center>The alpha parameter is 0.5.</center></h3>
    <h3 class="style6"><center>The alpha parameter is 0.6.</center></h3>
    <h3 class="style7"><center>The alpha parameter is 0.7.</center></h3>
    <h3 class="style8"><center>The alpha parameter is 0.8.</center></h3>
    <h3 class="style9"><center>The alpha parameter is 0.9.</center></h3>
    <h3 class="style10"><center>The alpha parameter is 1.0.</center></h3>
  </body>
</html>

Output:

try it yourself

1.3 Using RGBA Color Values in Borders

Source Code:

<!DOCTYPE html>
<html>
  <style>
    .style1{
       color:rgba(0,0,0,0.1);
       border: 5px dashed rgba(255,0,0,0.1);
      }
    .style2{
       color:rgba(0,0,0,0.2);
       border: 5px dashed rgba(255,0,0,0.2);
      }
    .style3{
       color:rgba(0,0,0,0.3);
       border: 5px dashed rgba(255,0,0,0.3);
      }
    .style4{
       color:rgba(0,0,0,0.4);
       border: 5px dashed rgba(255,0,0,0.4);
      }
    .style5{
       color:rgba(0,0,0,0.5);
       border: 5px dashed rgba(255,0,0,0.5);
      }
    .style6{
      color:rgba(0,0,0,0.6);
       border: 5px dashed rgba(255,0,0,0.6);
      }
    .style7{
       color:rgba(0,0,0,0.7);
       border: 5px dashed rgba(255,0,0,0.7);
      }
    .style8{
       color:rgba(0,0,0,0.8);
       border: 5px dashed rgba(255,0,0,0.8);
      }
    .style9{
       color:rgba(0,0,0,0.9);
       border: 5px dashed rgba(255,0,0,0.9);
      }
    .style10{
       color:rgba(0,0,0,1.0);
       border: 5px dashed rgba(255,0,0,1.0);
      }
  </style>

  <body>
    <h3 class="style1"><center>The border parameter is 0.1</center></h3>
    <h3 class="style2"><center>The border parameter is 0.2</center></h3>
    <h3 class="style3"><center>The border parameter is 0.3</center></h3>
    <h3 class="style4"><center>The border parameter is 0.4</center></h3>
    <h3 class="style5"><center>The border parameter is 0.5</center></h3>
    <h3 class="style6"><center>The border parameter is 0.6</center></h3>
    <h3 class="style7"><center>The border parameter is 0.7</center></h3>
    <h3 class="style8"><center>The border parameter is 0.8</center></h3>
    <h3 class="style9"><center>The border parameter is 0.9</center></h3>
    <h3 class="style10"><center>The border parameter is 1.0</center></h3>
  </body>
</html>

Output:

try it yourself

Donate to support writers.

You may be interested in the following topics:

Post Views: 2,281

Leave a Reply

Your email address will not be published. Required fields are marked *

Copyright @2023. All Right Reserved.


Social media & sharing icons powered by UltimatelySocial