The use of RGB colors in CSS is detailed

Source: Internet
Author: User

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);

}

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.