CSS3 Color Characteristic temperature

Web pages are the expression of color: The display is made up of pixels, using an electron beam to represent color. The pixels combine the three primary colors of the Light: Red (R), Green (G), and Blue (B) in accordance with scientific principles. A pixel contains 8 bits of the amount of color, and from 0 to 255 of 256 units, where 0 is completely matte state, 255 is the brightest state

Safe colors for Web pages
Different platforms (Macs, PCs, etc.) have different color palettes, and different browsers have their own palettes. When you select a specific color, the browser tries to use the closest color in the palette that you use, and if you don't have the selected color in the browser, try to recreate the color by dithering or by blending its own color.
The safe color of a Web page is a color combination of red (R), Green (G), and Blue (B) color digital signal values of 0, 51, 102, 153, 204, and 255, which have a total of 6x6x6=216 colors (210 in color and 6 for non-colored). and 216 specific colors can be safely applied to all the web without worrying about the color changes between different hardware environments, operating systems, and browsers

The safe color of 216 Web pages is slightly less expensive to achieve a high-precision gradient or to display a true-color image or photo, but is more than enough to display a logo or two-dimensional plane. However, it is not possible to use a safe color, but security and non-safety with each other properly, so that the color will not appear

Color Mode Description:
(1) RGB color mode: Is the three primary colors of light red, green, blue mixed produce. Most of the images used in Web pages are in the RGB color mode, and the RGB color is generated by adding and blending colors, which is called adding color blending. In addition color blending, the complementary color refers to the case when the relevant two colors are mixed and become white
(2) CMYK color mode: is the primary color of the pigment cyan, magenta, yellow and black, mainly used for printing the image of a pattern, subtractive mixing refers to the color after mixing the colors appear darker than the original color, so that the two colors related to color mixing will appear color situation
(3) Indexed color mode: It has been limited to 256 colors within the mode, mainly used for Web page security color and make transparent GIF pictures.
(4) Grayscale mode: is a colorless mode, used in making black and white pictures, mainly used for processing black, white, gray pictures
(5) Duotone mode: A pattern that adds color to a black and white picture to make the hue richer. RGB, CMYK and other color modes can not be converted directly to Duotone mode, you must convert the color mode to grayscale mode before you can convert to Duotone mode. Use the Duotone mode to make beautiful pictures in a small space
(6) Bitmap mode: It is a pattern of working with white and black to work with pictures. As with Duotone, in addition to Duotone mode and grayscale mode, other color modes need to be converted to grayscale mode after converting to bitmap mode

CSS Transparency properties: opacity, used to set the transparency of an element
Syntax and parameters: Opacity:alphavalue | | Inherit
Alphavalue: The default value is 1, you can take 0 ~ 1 any floating point number. When the value is 1 o'clock, the element is completely opaque, whereas the value is 0 o'clock, and the element is completely transparent and invisible. Its value can not be negative
Inhert: Represents the value of the opacity setting that inherits the parent element, that is, the opacity of the inherited parent element
The difference between the alpha channel and the Opacity property is that Alpha can set the transparency individually, but the opacity can only be set for the whole, and directly back to the descendant elements, and the opacity can also be set to 0 with the transparent equivalent to the alpha channel value. You can use transparent in any of the color properties in CSS3.

Note: Opacity transparent properties are not supported under IE8, but they can be used with their proprietary filters for transparent effects
/*ie5-7*/
Filter:alpha (opacity= transparent value);
/*ie8*/
-ms-filter: "Progid:DXImageTransform.Microsoft.Alpha (opacity= transparent value)";
The transparency value here is not a floating-point number between 0~1, but an arbitrary integer between 0~100

To be compatible with browsers IE8 the following versions, opacity transparent properties are often used as follows in practice
/*ie5-7*/
Filter:alpha (opacity=80);
/*ie8*/
-ms-filter: "Progid:DXImageTransform.Microsoft.Alpha (opacity=80)";
opacity:0.8;

CSS3 Color modes: RGBA, HSL, and Hsla
RGBA syntax and Parameters: Rgba (r,g,b,a)
R: Red value, the value can be a positive integer or a percent, the value range is 0~255 or 0~100%;
G: Green value, its value can be positive integer or hundred points, the range is 0~255 or 0~100%;
B: The blue value, the value can be a positive integer or a percentage, the value range is 0~255 or 0~100%;
A:alpha transparent value, its value is between the 0~1 range, the value range is 0~1;
Values that are out of range will be closed to their nearest value limit, and no negative values can be obtained.
Browser compatibility

HSL Color Mode
HSL, like RGB, is a color standard that belongs to the industry, and is colored in a variety of colors by changing the hue (H), saturation (S), Brightness (L) three color channels, and their superposition to each other. The HSL standard is one of the most widely used color systems, including almost all the colors that human vision can perceive.
16777216 colors on the screen with only three channels mixed in different proportions
Syntax and parameters: separating values from values by commas
HSL (h,s,l)
Three attribute values, the H (<length>) value, the S (<percentage>) value, and the L (<percentage>) value, respectively, describe:
H: Hue (hue). Take an integer value (<length>), which can be any integer, where 0 (or 360 or-360) represents red, 60 is yellow, 120 is green, 180 is cyan, 240 is blue, and 300 is magenta. When their value is greater than 360, the actual value equals the remainder after the change, except 360. For example, if the value of the hue is 480, the actual color value is 480 divided by 360, resulting in a remainder of 120
S: Saturation (saturation). is the color of the depth and intensity of the program, take a percentage (<percentage>), you can take any value between 0~100%, where 0 is gray (no color), 100% means the highest saturation (the most vivid color)
L: Brightness (lightness). The value and saturation (S) can be taken as any value between 0~100%, where 0 is the darkest (black), 100% brightest (white)

Browser compatibility

Note: In addition to IE8 and the following versions of browsers, other mainstream browsers support the HSL color mode in a friendly way, without the need for a browser's private prefix for compatibility

Hsla Color Mode
Is the HSL expansion mode, on which a transparent channel alpha is added to set the opaque parameters
Syntax and Parameters: Hsla (<length>,<percentage>,<percentage>,<opacity>)
Opacity, the value range is between 0~1, the greater the value, the lower the transparency
Browser compatibility

Selection between RGBA and Hsla color modes
Using Rgb/rgba color values, it is difficult to identify the color of the representative, it is difficult to red, green, blue three values to identify the saturation of this color, what is the brightness. Another problem with Rgb/rgba color mode is that by adjusting a color, you have to modify each of their parameters
Using the Hsl/hsla color mode to get a color, there is no need to adjust the three colors as well as the Rgb/rgba color mode, just set the hue value to a specific value. Color specific information can be learned according to the color plate, and the brightness and dimming values (L) can be changed directly.
In addition to using different methods, the others are the same, a rgb/rgba color can be used to replace the Hsl/hsla
First, Rgba/hsla's IE compatibility scheme is usually preceded by a color that does not have a transparent color (RGB/HSL), followed by Rgba/hsla; unsupported direct display of the front color, supported by the display of the transparency of the following color
The second is to use PNG transparent images, which increases the HTTP request and does not recommend the use of
Third, use the gradient filter to specify a translucent color. Set the starting and ending colors to the same color to avoid gradients
Gradient filter:-ms-filter:filter:progid:dximagetransform.microsoft.gradient (enabled= ' true ', startcolorstr= ' # 99A6DADC ', endcolorstr= ' #99A6DADC ');

CSS3 Color Characteristic temperature