CSS3 color feature temperature

CSS3 color features the web page shows the principle of color: the display is composed of pixels, and the electron beam is used to represent the color. Pixel colors combine the three primary colors of light: red (R), Green (G), and blue (B. A pixel contains 8-bit color information, and ranges from 0 ~ 255 of 256 units, 0 of which is completely light-free and 255 is the brightest

Web page Security Color
Different platforms (such as Mac and PC) have different color palette, and different browsers also have their own color palette. When selecting a specific color, the browser tries its best to use the closest color in the color palette. If no color is selected in the browser, it will try to re-generate the color by shaking or mixing its own color.
The security color on the Web page is a combination of colors consisting of red (R), Green (G), and blue (B) color numbers 0, 51, 102, 153, 204, and 255, it has a total of 6x6x6 = 216 colors (color: 210, non-color: 6 ). The 216 colors can be safely applied to all Web applications without worrying about changes in colors in different hardware environments, operating systems, and browsers.

The security colors of the 216 kinds of web pages are slightly inadequate when you need to achieve a high-precision gradient effect or display a true color image or photo, but more than enough when displaying the logo or two-dimensional plane. However, you do not need to use a security color. Instead, the security and non-security products are properly matched to each other, so that there will be no color skewness.

Color mode description:
(1) RGB color mode: the three primary colors of light are red, green, and blue. Most of the images used on Web pages are in RGB color mode. RGB colors are generated by the combination of colors. Such a mixture is called the addition of colors. In addition, the complementary color refers to the case where the two colors are white when they are mixed.
(2) CMYK color mode: it is the three primary colors of pigments, including blue, magenta, yellow, and black. It is mainly used to create images during printing, the fading Mixture means that the colors after the colors are mixed are darker than the original ones. In this way, the two colors related to the complementary colors are mixed with colors.
(3) Indexing color mode: This mode has been limited to less than 256 colors. It is mainly used for Security Color of Web pages and transparent GIF images.
(4) gray mode: it is a colorless mode. It is used when creating black and white images. It is mainly used to process black, white, and gray images.
(5) two-color adjustment mode: adds color to the black and white images to make the tone richer. RGB, CMYK, and other color modes cannot be directly converted to the two-color mode. You must convert the color mode to the gray mode before conversion to the two-color mode. You can use a two-color tone mode to create beautiful images in a small space.
(6) bitmap mode: it is the mode in which the image is processed in white and black. Like the two-color mode, in addition to the two-color mode and the gray mode, all other color modes need to be converted to the gray mode and then converted to the bitmap mode.

CSS transparency attribute: opacity, used to set the transparency of Elements
Syntax and parameter: opacity: alphavalue | inherit
Alphavalue: The default value is 1, which can be 0 ~ 1. Any floating point number. When the value is 1, the elements are completely opaque. If the value is 0, the elements are completely transparent and invisible. The value cannot be a negative value.
Inhert: indicates the value that inherits the opacity settings of the parent element, that is, the opacity of the parent element.
The difference between the alpha channel and the opacity attribute: the transparency can be set separately, but the opacity can only be set as a whole and be inherited directly to the child element; opacity can also be set to 0 using transparent, which is equivalent to alpha channel value. In CSS3, transparent can be used in any color attribute.

Note: IE8 or lower does not support the opacity transparency attribute, but you can use its proprietary filter to achieve transparency.
/* IE5-7 */
Filter: alpha (opacity = transparent value );
/* IE8 */
-Ms-filter: "progid: DXImageTransform. Microsoft. Alpha (Opacity = transparent value )";
The transparency value here is not 0 ~ The floating point between 1 and 0 ~ Any integer between 100

To be compatible with browsers earlier than IE8, the opacity transparent attribute is often used as follows
/* IE5-7 */
Filter: alpha (opacity = 80 );
/* IE8 */
-Ms-filter: "progid: DXImageTransform. Microsoft. Alpha (Opacity = 80 )";
Opacity: 0.8;

CSS3 color mode: RGBA, HSL, and HSLA
RGBA syntax and parameters: rgba (r, g, B,)
R: Red value. The value can be a positive integer or a hundred points. The value range is 0 ~ 255 or 0 ~ 100%;
G: green value. The value can be a positive integer or a hundred points. The value ranges from 0 ~ 255 or 0 ~ 100%;
B: blue value. The value can be a positive integer or a hundred points. The value range is 0 ~ 255 or 0 ~ 100%;
A: The alpha transparency value. The value ranges from 0 ~ The value range is between 1 and 0 ~ 1;
A value out of the range will end with its nearest value limit, and cannot go negative.
Browser compatibility

HSL color mode
Like RGB, HSL is a color standard in the industry. It is based on colors (H), saturation (S), and brightness (L) the variation of the three color channels and their overlapping each other make a variety of colors. The HSL standard covers almost all colors that human vision can perceive and is currently one of the most widely used color systems.
Only three channels are mixed according to different proportions, and 16777216 colors are displayed on the screen.
Syntax and parameters: values are separated by commas (,).
Hsl (h, s, l)
Three property values, respectively h ( ) Value, s ( ) Value and l ( ) Value, description:
H: Hue ). Take the integer ( Can be any integer. 0 (or 360 or-360) indicates red, 60 indicates yellow, 120 indicates green, 180 indicates blue, 240 indicates blue, and 300 indicates foreign red. When their values are greater than 360, the actual values are equal to the remainder after the value is changed to 360. For example, if the tone value is 480, the actual color value is 480 divided by 360 and the remainder is 120.
S: Saturation ). Is the shade of the color and the bright program, take the percentage ( ), Which can be 0 ~ Any value between 100%, where 0 indicates grayscale (not the color), 100% indicates the highest saturation (the most bright color)
L: brightness ). The value is the same as the saturation (S). The value can be 0 ~ Any value between 100%, of which 0 is the lowest (black), 100% is the brightest (white)

Browser compatibility

Note: In addition to IE8 and earlier browsers, other mainstream browsers provide friendly support for HSL color modes, without requiring private prefixes of individual browsers.

HSLA color mode
Is the extension mode of HSL, and adds a transparent channel alpha to set the opacity parameter.
Syntax and parameters: hsla ( , , , )
Opacity. The value range is 0 ~ The greater the value, the lower the transparency.
Browser compatibility

Select between RGBA and HSLA color mode
Using RGB/RGBA color values, it is difficult to identify the representative color at a glance. It is difficult to identify the saturation and brightness of the color in red, green, and Blue values. Another problem with the RGB/RGBA color mode is that when you adjust a color, you have to modify each of their parameters.
Use the HSL/HSLA color mode to obtain a color. You do not need to adjust the three colors at the same time as the RGB/RGBA color mode. You only need to set the color value to a specific value. You can see the specific color information based on the color disk. You can directly change the brightness value (L) when the color is brightened or dimmed.
In addition to different methods, the two are the same for others. An RGB/RGBA color can be completely replaced by HSL/HSLA.
First, the IE compatibility solution of RGBA/HSLA generally sets a color (RGB/HSL) that does not have a transparent color, followed by RGBA/HSLA; the Front color is not supported. The Front color is transparent.
The second method is to use PNG transparent images, which will increase HTTP requests. We do not recommend that you use
Third, you can use the Gradient filter to specify a translucent color. Set the start and end colors to the same color to avoid gradient.
Gradient filter:-ms-filter: progid: DXImageTransform. Microsoft. gradient (enabled = 'true', startColorstr = '# 99A6DADC', endColorstr = '# 99A6DADC ');