CSS rgb() and rgba() Function or Color Code

This article is created to cover two important functions, that are, rgb() and rgba(), used to create combination of colors.

CSS rgb() Function

The CSS rgb() function is used to color the background/text using following three parameters/colors:

red
green
blue

Where each color parameter defines its intensity using value ranges from 0 to 255 or percentage ranges from 0% to 100%.

Therefore, rgb(255, 0, 0) is equal to red color, rgb(0, 255, 0) is equal to green color, and rgb(0, 0, 255) is equal to blue color. For example:

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      p{color: white; padding: 12px;}
      .a{background: rgb(255, 0, 0);}
      .b{background: rgb(0, 255, 0);}
      .c{background: rgb(0, 0, 255);}
   </style>
</head>
<body>
   
   <p class="a">background: rgb(255, 0, 0)</p>
   <p class="b">background: rgb(0, 255, 0)</p>
   <p class="c">background: rgb(0, 0, 255)</p>
   
</body>
</html>

Output

background: rgb(255, 0, 0)

background: rgb(0, 255, 0)

background: rgb(0, 0, 255)

Note - If you use percentage, then be sure to define all the three color's intensity using percentage. For example, the following CSS code:

.a{background: rgb(100%, 0%, 0%);}
.b{background: rgb(0%, 100%, 0%);}
.c{background: rgb(0%, 0%, 100%);}

can also be used to produce the same output, as of above example. The 100% is similar to 255, whereas 0% is similar to 0.

Note - The rgb(255 255 255) is equal to white color. Whereas the rgb(0, 0, 0) is equal to black color.

CSS rgb() Function Syntax

The syntax of rgb() function in CSS, is:

rgb(red, green, blue)

The value of red parameter defines the intensity of red color. Similarly, the value of green and blue parameter defines the intensity of green and blue color.

Note - The rgb(255, 0, 0) is equal to red, because the intensity of red is at its peak, and at the same time, other two colors (green and blue) intensity is at its lowest.

CSS rgb() Function Example

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      p{color: white; padding: 12px;}
      .a{background: rgb(255, 0, 0);}
      .b{background: rgb(220, 0, 0);}
      .c{background: rgb(100, 0, 0);}
      .d{background: rgb(80, 80, 80);}
      .e{background: rgb(120, 120, 120);}
      .f{background: rgb(120, 120, 242);}
      .g{background: rgb(120, 242, 120);}
      .h{background: rgb(100, 0, 234);}
      .i{background: rgb(100, 234, 0);}
      .j{background: rgb(0, 0, 0);}
      .k{background: rgb(255, 255, 255); color: black;}
   </style>
</head>
<body>
   
   <p class="a">background: rgb(255, 0, 0)</p>
   <p class="b">background: rgb(220, 0, 0)</p>
   <p class="c">background: rgb(100, 0, 0)</p>
   <p class="d">background: rgb(80, 80, 80)</p>
   <p class="e">background: rgb(120, 120, 120)</p>
   <p class="f">background: rgb(120, 120, 242)</p>
   <p class="g">background: rgb(120, 242, 120)</p>
   <p class="h">background: rgb(100, 0, 234)</p>
   <p class="i">background: rgb(100, 234, 0)</p>
   <p class="j">background: rgb(0, 0, 0)</p>
   <p class="k">background: rgb(255, 255, 255); color: black</p>
   
</body>
</html>

Output

background: rgb(255, 0, 0)

background: rgb(220, 0, 0)

background: rgb(100, 0, 0)

background: rgb(80, 80, 80)

background: rgb(120, 120, 120)

background: rgb(120, 120, 242)

background: rgb(120, 242, 120)

background: rgb(100, 0, 234)

background: rgb(100, 234, 0)

background: rgb(0, 0, 0)

background: rgb(255, 255, 255); color: black

CSS rgba() Function

The CSS rgba() function is used to define the color of background/text using following four parameters:

red
green
blue
alpha

The first three parameters works exactly same as of rgb() function, whereas the last, that is, the alpha parameter is used to define the opacity of the color. For example:

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      .a{background: rgba(255, 0, 0, 1);}
      .b{background: rgba(255, 0, 0, .5);}
      .c{background: rgba(255, 0, 0, .2);}
   </style>
</head>
<body>
   
   <p class="a">background: rgba(255, 0, 0, 1)</p>
   <p class="b">background: rgba(255, 0, 0, .7)</p>
   <p class="c">background: rgba(255, 0, 0, .3)</p>
   
</body>
</html>

Output

background: rgba(255, 0, 0, 1)

background: rgba(255, 0, 0, .7)

background: rgba(255, 0, 0, .3)

CSS rgba() Function Syntax

The syntax of rgba() function in CSS, is:

rgba(red, green, blue, alpha)

The value of alpha (opacity) ranges from 0.0 to 1.0. Where 0.0 is used to create fully transparent color, and 1.0 is used to create fully opaque color.

The rgba(255, 0, 0, 1) is equal to red color, rgba(0, 255, 0, 1) is equal to green color, and rgba(0, 0, 255, 1) is equal to blue color.

The rgba(255 255 255, 1) is equal to white color. Whereas the rgba(0, 0, 0, 1) is equal to black color.

CSS rgba() Function Example

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      p{padding: 12px; border: 3px solid rgb(121, 108, 108);}
      .a{background: rgba(255, 0, 0, 1);}
      .b{background: rgba(255, 0, 0, .7);}
      .c{background: rgba(255, 0, 0, .3);}
      .d{background: rgba(0, 255, 0, 1);}
      .e{background: rgba(0, 0, 255, 1);}
      .f{background: rgba(0, 0, 0, 1); color: white;}
      .g{background: rgba(255, 255, 255, 1);}
      .h{background: rgba(100%, 0%, 0%, 1);}
      .i{background: rgba(0%, 100%, 0%, 1);}
      .j{background: rgba(0%, 0%, 100%, 1);}
   </style>
</head>
<body>
   
   <p class="a">background: rgba(255, 0, 0, 1)</p>
   <p class="b">background: rgba(255, 0, 0, .7)</p>
   <p class="c">background: rgba(255, 0, 0, .3)</p>
   <p class="d">background: rgba(0, 255, 0, 1)</p>
   <p class="e">background: rgba(0, 0, 255, 1)</p>
   <p class="f">background: rgba(0, 0, 0, 1); color: white</p>
   <p class="g">background: rgba(255, 255, 255, 1)</p>
   <p class="h">background: rgba(100%, 0%, 0%, 1)</p>
   <p class="i">background: rgba(0%, 100%, 0%, 1)</p>
   <p class="j">background: rgba(0%, 0%, 100%, 1)</p>
   
</body>
</html>

Output

background: rgba(255, 0, 0, 1)

background: rgba(255, 0, 0, .7)

background: rgba(255, 0, 0, .3)

background: rgba(0, 255, 0, 1)

background: rgba(0, 0, 255, 1)

background: rgba(0, 0, 0, 1); color: white

background: rgba(255, 255, 255, 1)

background: rgba(100%, 0%, 0%, 1)

background: rgba(0%, 100%, 0%, 1)

background: rgba(0%, 0%, 100%, 1)

CSS Online Test

« Previous Tutorial Next Tutorial »