HTML RGB Colors
RGB( Red, Green, Blue ) color -
You can use RGB color codes too to represent any colors you want. RGB stands for Red, Green, Blue. The colors we see in monitor, television, and mobile phones are the combination of this three lights ( Red, Green, and Blue ).
RGB colors format -
RGB color values -
rgb() takes three values - Red, Green, and Blue. First value of this property must be for the intensity of Red, and second value of this property must be for the intensity of Green and third value of this property must be for the intensity of Blue.
To define the intensity of a color either you can use integer numbers between 0 (including) to 255 (including) for each color or you can use a parcenatge between 0 (including) to 100 (including) for each color.
As each color can have from minimum possible integer value 0 to maximum possible integer value 255, So the combination of RGB ( Red, Green, Blue ) can make 256 x 256 x 256 = 16777216 possible colors.
Let's understand the format now what exactly it is.
| color | RGB integer color values | RGB parcenatge color values |
|---|---|---|
| Red | rgb(255, 0, 0) | rgb(100%, 0%, 0%) |
| Green | rgb(0, 255, 0) | rgb(0%, 100%, 0%) |
| blue | rgb(0, 0, 255) | rgb(0%, 0%, 100%) |
| White | rgb(255, 255, 255) | rgb(100%, 100%, 100%) |
| Black | rgb(0, 0, 0) | rgb(0%, 0%, 0%) |
| Yellow | rgb(255, 255, 0) | rgb(100%, 100%, 0%) |
| Cyan | rgb(0, 255, 255) | rgb(0%, 100%, 100%) |
| Magenta | rgb(255, 0, 255) | rgb(100%, 0%, 100%) |
rgb(255, 0, 0) - highest intensity of red with the lowest intensities of green and blue makes solid red.
rgb(0, 255, 0) - highest intensity of green with the lowest intensities of red and blue makes solid green.
rgb(0, 0, 255) - highest intensity of blue with the lowest intensities of red and green makes solid blue.
rgb(255, 255, 255) - highest intensities of red, green and blue makes solid white.
rgb(0, 0, 0) - lowest intensities of red, green and blue makes solid black.
rgb(255, 255, 0) - highest intensities of red, and green with the lowest intensity of blue makes solid yellow.
rgb(0, 255, 255) - highest intensities of green, and blue with the lowest intensity of red makes solid cyan.
rgb(255, 0, 255) - highest intensities of red, and blue with the lowest intensity of green makes solid magenta.
Random RGB color values generator-
Click on the box below to generate random RGB color values.
Why don't you try to get the same color with the mixer of RGB color values below ?
Play with RGB color codes and experiment -
Mix the RGB color values to get the desired colors.
Example of changing color of a webpage using RGB color values-
Here you can see that to change the colors of the webpage we used RGB color values instead of color names.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Example of changing color of a webpage using color names.</title>
</head>
<body style="color:rgb(255, 0, 0);;background-color:rgb(255, 255, 0)">
<p> I am red and my background color is yellow. </p>
<table style="background-color:rgb(0, 0, 255)">
<tr>
<td style="color:rgb(255, 255, 255)">
I am white and my background color is blue.
</td>
</tr>
</table>
</body>
</html>Result
You'll see the same color if you use color names.
RGBA ( Red, Green, Blue, Alpha ) Color -
RGBA stands for red green blue alpha. Alpha is just an extension of RGB color model. Now see the format of RGBA below -
RGBA colors format -
RGBA color values -
rgba() takes four values. The first, second, and third values are used for the intensity of red, green, and blue respectively that you already know. (see above)
Alpha, fourth and last value of rgba(), uses for transparency/opacity of a color. The value 0.0 represents fully transparent and the value 1.0 represents not transparent at all.