The color in css (valid color value) and css color

The color in css (valid color value) and css color

There are six methods to specify the color in css:

1. hexadecimal color

2. RGB color

3. RGBA color

4. HSL color

5. HSLA color

6. predefined/cross-browser color names

The first three are the most common and most commonly used ones. The last three are simply "What's the ghost?" for beginners ?". But! Don't worry. Today, let's have a good chat about the six small members in css.

I. hexadecimal color

The hexadecimal color is a gentle and popular member and is favored by all browsers. Its components are "# RRGGBB", in which RR (red ), GG (green), BB (blue ). However, it is also limited, and all its values must be between 0 and ~ 9. ~ F (~ F), not case sensitive.

 

div{    background-color:#8e236b;}

 

Stir-fry the following small chestnuts of special colors:

• # The ff0000 value is red, because the Red composition is set to the highest (ff), and other settings are set to 0.

(Similarly, #00ff00 is green, # 0000ff is blue)

• # The value 000000 is black.
• # The ffffff value is white.

Ii. RGB color

The RGB color is also a Member favored by all browsers. Unlike the hexadecimal color, the RGB color value is more specific. Due to the expanded range of values, the color displayed is richer. It is specified as RGB (red, green, blue ). Each parameter defines the brightness of a color. The value range is 0 ~ An integer between 255 or a value ranging from 0% ~ Integer percentage value between 100%.

As with the previous Member, when a parameter of the three parameters reaches the maximum value, it will be displayed as the solid color of the parameter.

 

#word{    color:rgb(255,255,153);}

 

The following is a hexadecimal color code that Baidu Dad gives with RGB.

3. RGBA color

This member is very picky. He is the master of "not respecting the elderly". He is dedicated to serving young adults. Only IE9, Firefox3 +, Chrome, Safari, and Opera10 + can be favored. The only difference between it and the above is that its parameter has an extension of the: alpha channel, specifying the transparency of the object, so that there is more color than A differentiated channel, there are more natural colors.

The alpha parameter is a parameter that takes only the first digit after the decimal point, between 0.0 (completely transparent) and 1.0 (completely opaque.

The preceding group of RGB parameters are the same, and the comparison between the parameters is different (I will not write the redundant style, mainly to see the effect)

div{    background: rgba(223,106,95,.3);}

 

 

div{    background: rgba(223,106,95,.9);}

Note: When writing the alpha parameter, the value 0 before the decimal point can be directly omitted.

Iv. HSL color

Speaking of this, this member is amazing. As a color standard of industrial street, its color covers almost all the colors that human power can perceive and is one of the most widely used color systems. Such a powerful role is naturally a bit picky, only IE9, Firefox, Chrome, Safari, and Opera 10 + support.

HSL is a representation of css3, representing the color phase, saturation, and brightness. It is represented by the color cylindrical coordinates. Let's take a look at Baidu's father's explanation.

1. H (hue) color:

It represents the color range that the human eye can perceive. These colors are distributed on a plane's color ranges from 0 ° to 360 °. Each angle can represent a color. The significance of the color phase value is that we can change the color without changing the light sense. In practical application, we need to remember the Six dominant colors on the color palette for basic reference: 360 °/0 ° red, 60 ° yellow, 120 ° green, 180 ° green, 240 ° blue, 300 ° foreign red, they are arranged at intervals of 60 ° circle angle on the color. You can select the approximate color according to the sequence of red, orange, yellow, green, blue, and purple!

Don't you understand? You will understand

After the six colors are arranged and merged, we can select the color from the angle ~

2. S (saturation) Component

It refers to the color saturation, which describes the change of color purity under the same color phase and brightness with a value of 0% to 100%. The larger the value, the less gray the color, and the brighter the color, presents a change from rational (Gray) to perceptual (solid color.

  3. L (lightness) ComponentIt refers to the brightness of the color, and its function is to control the variation of the light and shade of the color. It also uses the value range from 0% to 100%. The smaller the value, the darker the color, the closer it is to black. The larger the value, the brighter the color, and the closer it is to white.

div{    background-color:hsl(120,65%,75%);}

Note that S and L are used to control the brightness of the color. The greater the value, the brighter the color. L controls the brightness of the color, when the value is 50%, the brightness is normal. The difference between the maximum and minimum values is obvious.

According to Zhang xinxu's great god, the HSL color in the color filter is very useful and helps to quickly select the desired color value. Or obtain an approximate color based on the existing color. For example, if we want to achieve a hover effect, hover, a color block, and then deepen the color, how should we do it? It is a headache to use RGB, while using hsl is very simple. We only need to fine-tune l, that is, brightness, a little lower. The hexadecimal color, RGB, and HSL can be converted to each other, and the process is complicated. I will not talk about it here. If you are interested, check it. V. HSLA colorRGB has a brother RGBA, so it is not surprising that HSL has a sister HSLA. Like A brother, A controls transparency. For details about attributes, see RGBA. This is not much to say.

div{    background-color:hsl(120,65%,75%,.5);}

6. predefined/cross-browser color names

147 is a predefined color name in HTML and css color specifications, which is supported by all browsers. 147 includes 17 Standard colors (light green, black, blue, purple red, gray, gray, green, lime, Chestnut, navy, Olive, purple, Red, silver, blue-green, white and yellow) and more than 130 others.

Come with a cainiao website with detailed colors. Http://www.runoob.com/cssref/css-colornames.html

Conclusion:

The main classification of colors is the above. There is no big difference in what we usually use, mainly because of the different forms of expression. In fact, it is not difficult to see it several times with images. There are also some tips on color that I haven't covered yet, so let's write it first. If there is anything bad, please forgive me.

The above content is referenced by Baidu search, w3c, cainiao, and other websites. If there is anything wrong, please note.