In this article, three color representation methods: RGB, RGBA and HEX are discussed. In CSS, rgb() is a built-in function, RGBA is also a format of display colors with the extension of Alpha. Moreover, providing color values in Hexadecimal numbers is also used widely in CSS.
rgb() function in CSS
RGB is a combination of three colors (Red, Green and Blue) that is used in all computer systems for colored display. As we know, these are the basic colors and by combining them we can obtain any color which is visible in the color spectrum.
In CSS, these colors are defined in the form of a function rgb(): (red, green, blue). The range of all these colors is defined from 0 to 255 defines the intensity of a color, and we can change the colors by changing these values. The intensity of these colors is well defined in the given example.
Example
This combination returns the green color because it has the highest intensity and the other two colors have 0 intensity.
By changing the intensities of all three colors we get the different colors such as
- rgb(255, 255, 255) displays the white color
- and rgb(0, 0, 0) gives the black color.
Further color examples are shown in the given example
Example
<html>
<body>
<h2 style="background-color:rgb(0, 255, 0);">rgb(0, 255, 0)</h2>
<h2 style="background-color:rgb(60, 60, 60);">rgb(60, 60, 60)</h2>
<h2 style="background-color:rgb(138, 238, 130);">rgb(138, 238, 130)</h2>
<h2 style="background-color:rgb(255, 255, 255);">rgb(255, 255, 255)</h2>
</body>
</html>
RGBA Colors
In CSS RGBA is also a format to display colors with the extension of Alpha. The structure of this color function is given below.
In this function, an Alpha is used to express the opacity of a color. In CSS opacity property is used to set the transparency of a color and its range lies between 0.0 to 1.0, where 0.0 represents the fully transparent and 1.0 represents the fully opaque. You will better understand from the given example.
Example
<html>
<head>
</head>
<body>
<h1 style="background-color:rgba(0,255,0,0.0);">Green</h1>
<h1 style="background-color:rgba(0,255,0,0.25);">Green</h1>
<h1 style="background-color:rgba(0,255,0,0.5);">Green</h1>
<h1 style="background-color:rgba(0,255,0,0.75)">Green</h1>
<h1 style="background-color:rgba(0,255,0,1.0)">Green</h1>
</body>
</html>
In the above given example, we set the value of alpha from 0.0 (fully transparent) to 1.0 (fully opaque) and you can see the difference in intensity of transparency.
CSS HEX Colors
In CSS colors can also be specified with hexadecimal values, it is just another way to represent colors. In CSS, it is the most common way to specify a color by using hexadecimal values with an “#” sign such as #RRGGBB. Whereas, R, G, B are the codes for red, green and blue, respectively.
Hexadecimal numbers with the combination of 0-9 and A-F are used to represent a color in CSS. Some examples of basic HEX colors are given below:
- #ffffff: it represents the white color and
- #000000: it represents the black color.
For better understanding have a look to the following example.
Example
<html>
<body>
<h1>Specify colors using HEX values</h1>
<h2 style="background-color:#0f4bff;">#0f4bff</h2>
<h2 style="background-color:#3cb371;">#3cb371</h2>
<h2 style="background-color:#ee652e;">ee652e</h2>
<h2 style="background-color:#ffa500;">#ffa500</h2>
<h2 style="background-color:#6a5acd;">#6a5acd</h2>
</body>
</html>
In the above example, different colors are displayed by using the HEX values. All these HEX values are the combination of hexadecimal numbers, which are 16 distinct alpha-numeric values that lie between 0-9 and A-F.
Conclusion
RGB, RGBA, and HEX are the different types to display colors in CSS. Whereas RGB is a combination of three colors (Red, Green, and Blue), RGBA is the same as RGB with the extension of alpha (alpha=transperancy) and HEX uses the hexadecimal values to represent colors. The range of RGB and HEX colors lies between 0 to 255 integer and 00 to FF respectively. All these three types are well defined with examples.
