Setting color via rgb in CSS

At the very beginning of the tutorial, when we were studying colors, I told you that a color can be specified either by an English word, or by rgb, or by #. The last two formats allow you to get a color of any shade. Let's figure out how exactly these formats work.

To understand these methods, we first need to understand how the desired color is obtained on the computer screen.

In fact, a single screen point (pixel) cannot glow with all the colors needed, as this would be technically very difficult. Each screen point can glow with only three colors: red, green and blue. But at the same time and in different proportions.

By combining these colors we can get any color we need, just like artists do with paints: by mixing several colors they get another new one.

To mix colors in CSS, you need to specify the keyword rgb as the property value, followed by a comma-separated list specifying the proportions in which these three basic colors should be taken. The colors themselves can vary from 0 to 255. Moreover, zero is the absence of color, and 255 is a pure color (for example, pure red).

The letters rgb themselves stand for red, green, blue.

Let's look at some examples.

Example

Let's mix pure red and pure blue. To do this, set the first value to 255, the second to 0, and the third to 255. We'll get purple:

:

Example

Let's now set the first value to 255 and all the others to zero. The result will be pure red:

:

Example

This is how we get pure green color:

:

Example

And if for green you set not 255, but 100, then you get partially green:

:

Example

Mix all three colors in arbitrary proportions. See what you get:

:

Example

If you put all the values ​​in 255, you get pure white:

Example

If you put all the values ​​in 0, you get pure black:

Practical tasks