rgb() Function with Example in CSS

CSS | rgb() function: Here, we are going to learn about the rgb() function with its syntax, examples in CSS (Cascading Style Sheet).
Submitted by Anjali Singh, on February 18, 2020

Introduction:

Functions and properties go hand in hand while developing a website or web page, therefore to be a good developer you need to know as many properties and functions and if you are familiar with plenty of these functions then definitely you will be able to develop a very unique and responsive website or web page. In this article we the focus is going to be on one such function, known as rgb() function. Before we talk about rgb() function in detail, let us see why functions are an important part of web development.

By using functions, you can reduce the line of codes and hence you will not need to put in much effort for writing long lethargic codes. Besides, it is a trait of a good web developer to know functions and know-how to implement them. That would also showcase your knowledge regarding the web developer and coding. So never miss a chance to learn any new functions and properties if you wish to be a good professional coder. So, with that note, let us move forward and take this discussion a bit further by grasping the insight of rgb() function.

Definition:

You must be familiar with rgb() function yourself and have even used it many times but if you have not, well don't worry because this article has got you covered and all you need to learn about rgb() function. Let us have a look at a formal definition of rgb() function.

The rgb() function is a function that helps you define the color values by making use of the RGB model. RGB stands for Red, Green, and Blue. These three primary colors are solely responsible for various different shades of color values. The parameter of RGB can range from 0% to 100%.

Now, that we have made ourselves familiar with the definition of rgb() function, let us have a look at the syntax of this function

Syntax:

    element{
        background-color : rgb(red,green,blue);
    }

Example:

<!DOCTYPE html>

<html>

<head>
    <style>
        p {
            background-color: rgb(225, 0, 0);
            font-size: 50px;
            color: rgb(0, 225, 0);
        }
    </style>
</head>

<body>
    <p>My name is Anjali Singh.</p>
</body>

</html>

Output

In the above example, both the background and font color are set through rgb() function.

Conclusion:

A very easy-to-understand function isn’t it? Besides a very interesting one. So go ahead and start making use of this function to make your website or web page colorful and stylish. Rest assured, you will have fun while making use of this function. There is a plethora of shades for you to select from and a very wide range of colors as well. Just select a theme for your website or web page and start putting it into the right colors.

CSS Functions »

CSS | hsla() Function

CSS | rgba() Function

Comments and Discussions!

Load comments ↻

Top MCQs

Top Programs/Examples