CSS Function - rgb()

The rgb() function in CSS is used to define a color value using the RGB (Red, Green, Blue) color model. It allows you to specify a color by specifying the intensity of each of these three primary colors.

To add the color transparency, an optional <alpha-value> can be passed to the rgb() function.

The legacy function rgba() is an alias to function rgb() and they both accept the same parameters and behave in the same manner.

Possible values

The functional notation for rgb() function is rgb(R G B[ / A]).

  • R, G, B: Can contain any of the format(s), that represents the red, green, and green channels, respectively :

    • <number>: Any number between 0 and 255.

    • <percentage>: Any value between 0% and 100%.

    • keyword none

  • A: Represents the transparency of the color. It is an optional value.

    • <alpha-value>: any number between 0 and 1, where 1 corresponds to full opacity and 0 corresponds to full transparency.

    • keyword none

The values of the red, green and blue components are rounded in serialization, as the functional notation serializes it as sRGB.

Syntax

rgb(255 255 255) | rgb(255, 255, 255) | rgb(255 255 255 /0.5)

CSS rgb() - Number Value

Following is an example showing the usage of rgb() function where all the three values are passed with and without the alpha value (number values):

<html>
<head>
<style>
   div {
      width: 100px;
      height: 100px;
      border: 2px solid black;
      margin-bottom: 10px;
   }
   .color-rgb-red{
      background-color: rgb(255 0 0);
   }
   .color-rgb-green{
      background-color: rgb(0 255 0);
   }
   .color-rgb-blue{
      background-color: rgb(0 0 255);
   }
   .color-rgb-alpha{
      background-color: rgba(255 0 0 /0.5);
   }
</style>
</head>
<body>
   <div class="color-rgb-red">rgb(255 0 0)</div>
   <div class="color-rgb-green">rgb(0 255 0)</div>
   <div class="color-rgb-blue">rgb(0 0 255)</div>
   <div class="color-rgb-alpha">rgba(255 0 0 /0.5)</div>
</body>
</html>

CSS rgb() - Percentage Value

Following is an example showing the usage of rgb() function where all the three values are passed with and without the alpha value (percentage values):

<html>
<head>
<style>
   div {
      width: 100px;
      height: 100px;
      border: 2px solid black;
      margin-bottom: 10px;
   }
   .color-rgb-red {
      background-color: rgb(70% 30% 10%);
   }
   .color-rgb-comma {
      background-color: rgb(0%, 55%, 20%);
   }
   .color-rgb-blue {
      background-color: rgb(10% 10% 85%);
   }
   .color-rgb-alpha-number {
      background-color: rgba(0% 40% 50% /0.5);
   }
   .color-rgb-alpha-percent {
      background-color: rgba(70% 0% 50% /12%);
   }
   </style>
</head>
<body>
   <div class="color-rgb-red">rgb(70% 30% 10%)</div>
   <div class="color-rgb-comma">rgb(comma-separated)</div>
   <div class="color-rgb-blue">rgb(10% 10% 85%)</div>
   <div class="color-rgb-alpha-number">rgba(0% 40% 50% /0.5)</div>
   <div class="color-rgb-alpha-percent">rgba(70% 40% 50% /12%)</div>
</body>
</html>
Advertisements