Deep understanding of CSS six color modes

[1] keyword [2]16 [3]rgb mode [4]rgba mode [5]HSL mode] [6]hsla mode]Previous words

The pleasing color collocation makes people feel comfortable, the function of modifying element color is very attractive. However, improper color planning will make the site users at a loss. Color from <font color= "" > Development so far, has retained a lot of content, also added new content, this article will introduce about the color pattern the content

Color mode

In the past, the main use of keywords, 16 and RGB three ways to set colors. After the advent of CSS3, the three modes of RGBA, HSL, and Hsla have been added, greatly enriching the way CSS colors are set

"1" keyword

CSS color keywords include named colors, transparent, currentcolor property values

Name Color

The color value of a directly used name is called a named color

CSS supports 17 legally named colors (Standard colors):

Aqua Fuchsia lime Olive red white black gray maroon orange silver yellow blue green Navy Purple Teal

[note] The browser supports 140 colors

Transparent

Color:transparent is used to indicate that the color of the text is pure and transparent and can be approximated as RGBA (0,0,0,0)

Note Ie7-does not support color:transparent, but supports list-style-type:none; List-style-image:none; Line-height:2; " >currentcolor

CurrentColor refers to the current color, exactly refers to the current text color

Note Ie8-does not support this property value

"2" 16 binary

16 binary is a common way to set color values, connect three hexadecimal numbers between 00-ff, if the number of 3 groups of 16 binary pairs, it can be abbreviated to 3-bit

#abcdef #aabbcc <=> #abc

< safe color >

A web-safe color is a color that always avoids dithering on a 256-color computer system, expressed as a multiple of the RGB values 20% and 51 (corresponding 16 binary values are 33). Therefore, when using 16 binary, using 00\33\66\99\CC\FF as a web-safe color, altogether 6*6*6=216 species

"3" RGB mode

Colors created by combining different red, green, and blue components become RGB mode colors. The display is made up of pixels, using an electron beam to represent color. Pixels combine the three primary colors of light: Red (R), Green (G), and Blue (B). The amount of information per pixel containing 8 bits of color, 0-255 of 256 units, 0 of which is completely matte, 255 is the brightest state

RGB (x%,y%,z%) RGB (A,B,C)

[note] If the value is less than the minimum value of 0, the default adjustment is 0; If the value is the maximum value 255, the default adjustment is 255

"4" Rgba mode (ie8-browser not supported)

The RGBA mode adds an alpha channel to the RGB base to set the transparency of the color, where the range of the channel value is 0-1. 0 for full transparency, 1 for completely opaque

    RGBA (R,g,b,a)

<ie Filter >

The Ie8-browser does not support the new color mode and requires the use of the gradient filter. The first two bits of the gradient filter represent alpha transparency values (00-FF), where 00 means full transparency and FF is completely opaque. The latter six bits represent the RGB mode

If the #a6dadc is used and the transparency is 0.6 transparent (0.6*255=153, converted to 16 is 99), the gradient filter is represented as

Filter:progid:DXImageTransform.Microsoft.gradient (enabled = ' true ', startcolorstr= "#99A6DADC", endcolorstr= "# 99A6DADC ")

Note IE filters can only be compatible with background colors, not foreground color

"5" HSL mode (ie8-browser not supported)

The HSL mode is available in a variety of colors by changing the hue (H), saturation (S), Brightness (L) three color channels, and their overlapping. The HSL standard can almost include all the colors that human vision can perceive

    HSL (h,s,l)

H: Hue (hue) can be any integer. 0 (or 360 or-360) is red, 60 is yellow, 120 is green, 180 is cyan, 240 is blue, 300 is magenta (when the H value is greater than 360, the actual value equals the value after modulo 360)

S: Saturation (saturation), refers to the color of the depth and intensity of brightness. Take the value of the 0-100% range, where 0 represents grayscale (no color), and 100% indicates the highest saturation (most brightly colored)

L: Brightness (lightness), take the value of 0-100% range, where 0 is the darkest (black), 100% is the brightest (white)

"6" Hsla mode (ie8-browser not supported)

The Hsla mode is HSL's extended mode, which adds a transparent channel alpha on the HSL to set the transparency

    Hsla (<length>,<percentage>,<percentage>,<opacity>)

Deep understanding of CSS six color modes