The use of RGB colors in CSS is detailed

RGB color Model Explanation

The RGB color model is a way of describing how many red, green, and blue primary colors there are in a color, like mixing watercolor or oil paints to get some of the real colors we want.

Imagine if you were going to have a pure blue, in order to achieve this, you can't put red and green into this color. So we set the red and green to 0% and set the green to 100%:

CSS code copy content to clipboard

RGB (0%, 0%, 100%)

Results:

But what if what you want is not blue but magenta? We can get magenta by mixing 100% of red and 100% blue:

CSS code copy content to clipboard

RGB (100%, 0%, 100%)

Results:

From the basis of the color theory, we know that no color is black. So in order to get the black we can do this by setting the red, green, and blue three primary colors as 0%:

CSS code copy content to clipboard

RGB (0%, 0%, 0%)

Results:

How to determine the value of an RGB color

We can use Photoshop's color picker feature to get the values for the red, green, and blue primaries of a particular color, but there are free online tools such as Color slider and the RGB color Calculator.

Explanation of RGB color on W3school:

RGB Color

RGB color values are supported for all browsers.

RGB color values are defined as: rgb (red, green, blue). Each parameter (red, green, and blue) defines the intensity of the color, either an integer between 0 and 255, or a percentage value (from 0% to 100%).

For example, the RGB (0,0,255) value is shown as blue because the blue parameter is set to the highest value (255) and the other is set to 0.

Similarly, the following values define the same color: rgb (0,0,255) and RGB (0%,0%,100%).

Instance

CSS code copy content to clipboard

P

{

Background-color:rgb (255,0,0);

}