Home > Web Front-end > CSS Tutorial > Analysis of the use of RGB colors in CSS

Analysis of the use of RGB colors in CSS

不言
Release: 2018-06-12 16:11:26
Original
2232 people have browsed it

This article mainly introduces the detailed explanation of the use of RGB colors in CSS. It is the basic knowledge for introductory learning of CSS. Friends in need can refer to

RGB color model explanation

The RGB color model is a method of describing how much of the three primary colors of red, green, and blue are in a certain color, just like mixing watercolor paints or oil paints to get the real color we want.

Imagine if you want to match a pure blue. To achieve this, you cannot put red and green into this color. So we set red and green to 0%, and set green to 100%:

rgb(0%, 0%, 100%)
Copy after login

Result:

But if what you want is not blue but purple, then How to do it? We can get mauve by mixing 100% red and 100% blue:

rgb(100%, 0%, 100%)
Copy after login

Result:

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

rgb(0%, 0%, 0%)
Copy after login

Result:
How to determine the value of RGB color

We can use Photoshop’s picker The color slider function is used to obtain the values ​​​​of the three primary colors of red, green, and blue for a specific color, but there are also free online tools such as Color Slider and The RGB Color Calculator.

w3school’s explanation of RGB color:

RGB color

All browsers support RGB color values.

RGB color value is specified as follows: rgb(red, green, blue). Each parameter (red, green, and blue) defines the intensity of the color and can be an integer between 0 and 255, or a percentage value (from 0% to 100%).

For example, the rgb(0,0,255) value is displayed in blue because the blue parameter is set to the highest value (255) and the others are set to 0.

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

p   
{   
background-color:rgb(255,0,0);   
}
Copy after login

The above is the entire content of this article. I hope it will be helpful to everyone's learning. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

Use css to achieve shadow effects

##Several color gradient modes commonly used in CSS3

The above is the detailed content of Analysis of the use of RGB colors in CSS. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template