The colors in CSS (legal color values)

There are six main ways of specifying colors in CSS:

1.16 Binary color

2.RGB Color

3.RGBA Color

4.HSL Color

5.HSLA Color

6. Predefined/cross-browser color names

The first three species are the most common and most used, and the last three are "what ghosts" for beginners? ”。 But! Don't be afraid, today we'll talk about the six little members of CSS.

16 or 16 binary color

The hexadecimal color is a relatively gentle and lovable member, loved by all browsers, and its components are "#RRGGBB", where RR (Red red), GG (green), BB (blue blue). But it is also limited, and all its values must be between 0~9, A~f (a~f), and not case-sensitive.

p{    background-color: #8e236b;}

Below fry a few special colors of small chestnuts:

• #ff0000值呈现的是红色 because the red composition is set to highest (FF), while the other setting is 0

(similarly #00ff00 is green, #0000ff为蓝色)

• #000000值为黑色

• #ffffff值为白色

Second, RGB color

RGB color is also a favorite member of all browsers, in contrast to the hexadecimal color, the RGB color value is specific, because the range of values expanded, the display of a more colorful color. Its designation is RGB (red, green, blue). Each parameter defines the brightness of the color, the value range is an integer between 0~255, or an integer percentage value from 0%~100%.

As with a member, when one of its three parameters reaches the highest value, it behaves as a solid color of the parameter.

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

The following a Baidu dad to give the hexadecimal color code with RGB

Three, Rgba color

This member is more picky, is a "do not love the elderly" Zhu Er, specifically selected young adults below the hand, only IE9, firefox3+, Chrome, Safari, and opera10+ can be favor. The only difference between it and the above is that its parameters are more than a a:alpha channel extension, specifying the transparency of the object, so that the original color more than a differentiated channel, natural color is also more.

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

Below the previous set of RGB parameters the same, a parameter of a different contrast chart (superfluous style I will not write, mainly see the effect)

p{    Background:rgba (223,106,95,.3);}

p{    Background:rgba (223,106,95,.9);}

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

Four, HSL color

Speaking of which, this is a very powerful member. As a color standard of industrial street, its color almost includes all the colors that human power can perceive, and is one of the most widely used color systems. Such a powerful character, nature is also very picky, only IE9, Firefox, Chrome, Safari, and opera can support.

HSL is a presentation format that appears in CSS3, representing Hue, saturation, and brightness, expressed in color cylindrical coordinates. Let's look at Baidu Dad's explanation.

1.H (hue) Hue:

Represents the range of colors that the human eye can perceive, which are distributed over a flat hue ring, with a range of 0° to 360° center angles, each representing a color. The meaning of the hue value is that we can change the color by rotating the hue ring without changing the light sense. In practice, we need to remember the six main colors on the Hue ring as a basic reference: 360°/0° red, 60° yellow, 120° green, 180° blue, 240° Blue, 300° Magenta, which are arranged in the hue ring at the interval of 60° center angle. Roughly in accordance with the order of red Orange green cyan Purple, set the approximate color and then choose according to the angle of the good!

Don't you understand? You'll understand.

When the six main colors are fused, we can write the color of the angle.

2.S (saturation) component

Refers to the saturation of the color, it uses a value of 0% to 100% to describe the same hue, brightness of the change in color purity. The larger the number, the less gray the color, the brighter the color, and the change from the rational (grayscale) to the perceptual (solid color).

3.L (lightness) component

Refers to the lightness of color, the role is to control the color of the light and shade changes. It also uses a range of values ranging from 0% to 100%. The smaller the value, the darker the color, the closer it is to black, and the greater the value, the brighter the color, the closer it is to white.

p{    BACKGROUND-COLOR:HSL (120,65%,75%);}

It is important to note that S and l,s control is the color of the brightness, the larger the value of the more vivid color, and L control the color of the luminance, the duty is 50% when the normal brightness. The difference between the two can be clearly distinguished by looking at the maximum and minimum values.

According to Zhang Xin, the HSL color is very useful in the color picker, helping to quickly pick the color values we want. Or get the approximate color based on the existing color. Let's say we want to achieve a hover effect, hover a color block, and then the color deepens, how to do? Using RGB is a headache, and the use of HSL is simple, we just need to adjust the brightness of L is lower.

hexadecimal color, RGB and HSL can be converted to each other, the process is more complex, I do not say, interested can check.

Five, Hsla color

RGB has brother Rgba, then HSL has sister Hsla nature is not strange. function is also the same as a pair of brothers, a controls transparency, attributes all refer to Rgba. That's not much to say.

p{    BACKGROUND-COLOR:HSL (120,65%,75%,.5);}

Vi. Predefined/cross-browser color names

147 is a predefined color name in the HTML and CSS color specification, which is supported by all browsers. 147 includes 17 standard colors (light green, black, blue, fuchsia, grey, grey, green, lime, maroon, navy, olive, purple, red, silver, turquoise, white and yellow) and 130 more.

Conclusion:

About the color of the main classification is the above several, usually with the words there is no big difference, mainly the expression of the different forms, in fact, there is no more difficult, combined with pictures to see a few times to understand. There are some small knowledge about the color of the temporary I have not been involved, so write it first, if there is anything bad please forgive me.

More things about colors in CSS (legal color values) related articles please follow topic.alibabacloud.com!

