Getting web front end to combat: css color

colour

If we are relative to the page to set the color can be set using a variety of methods:

One, named colors

Assume that a small part of the color concentrate enough, you can directly given name of the color in the color settings page. CSS calls these color names have named color.

Limited color name keywords, css defines 17 standard colors: light green, black, blue, purple, gray, orange, green, lime, maroon, navy, olive, purple, red, silver, blue, green, white and yellow.

Getting web front end to combat: css color

Maybe sometimes use other color values, not color in the color of the standard can be used, it has been able to work, because most of the web browser can recognize up to 140 colors, including in front of that 17 kinds colour.

(B), RGB color designated

Computer through a combination of different red, blue, green component to create color. This combination is commonly referred to as RGB color. Direct access to these colors, by adjusting the red, green, and blue color components to maximize control. All browsers support RGB color value.

RGB color values ​​is predetermined: rgb (red, green, blue). Each parameter (red, green and blue) defining a color intensity, may be an integer triples notation: parameter an integer, or a percentage value between 0 and 255 (from 0% to 100%).

Percentage notation: specify white and black, the value specified as:

rgb(100%,100%,100%)
rgb(0%,0%,0%)

Triples integer notation, the same color as follows

rgb(255,255,255)
rgb(0,0,0)
专门建立的学习Q-q-u-n ⑦⑧④-⑦⑧③-零①②  分享学习方法和需要注意的小细节,不停更新最新的教程和学习技巧(从零基础开始到前端项目实战教程,学习工具,全栈开发学习路线以及规划)

May also be used in fractional percentage of notation, it is assumed to specify if a red color component of 25.5%, 40% green component, the blue component of 98.2%, if the user agent ignores the decimal point, these values ​​will be rounded in contrast to the nearest integer. Of course, the integer value method can only use integers. As follows:

h2 {color: rgb (25.5%, 40%, 98.2%)} is converted to h2 {color: rgb (26%, 40%, 98%)}

Whatever the notation, if values ​​fall outside the desirable range, will change to the nearest range boundaries. When a value greater than or less than 0% to 100% will be adjusted to the default 100% or 0% (which is desirable maximum and minimum)

h2 {color: rgb (200%, - 40%, 0%)} is converted to h2 {color: rgb (100%, 0%, 0%)}

h2 {color: rgb (42,500, -20)} is converted to h2 {color: rgb (42,255,0)}

Suppose there is a color rgb (25%, 37.5%, 60%), convert it to an integer notation, multiplied by 255 percent, it will give 63.75,95.625,153. These values ​​are then rounded to the nearest integer, to remember the rgb (64,96,153).

(C), RGB hexadecimal color

All browsers support hexadecimal color values.

Hex color is such a requirement: #RRGGBB, where RR (red), GG (green), BB (blue) hexadecimal integers specifies the component colors. All values ​​between 0 and FF. Uppercase lowercase can be.

If the number of three groups consisting each hex are paired, but also allows for a shorthand method, such an approach is generally #RGB

如 h2{color:#FFF}=h2{color:#FFFFFF}

The browser will take place, and copy it into two. # FF0000 therefore equivalent to # F00.

(IV), RGBA color value

RGBA color is worth to support the following browsers: IE9 +, Firefox 3 +, Chrome, Safari and Opera 10+.

RGBA color values ​​are extended RGB color values, with an alpha channel - it specifies the object's opacity.

RGBA color values ​​is predetermined: rgba (red, green, blue, alpha). parameter alpha is from 0.0 (fully transparent) to the digital 1.0 (fully opaque).

(Five), HSL color

HSL color worthwhile to support the following browsers: IE9 +, Firefox, Chrome, Safari and Opera 10+.

Hue refers to the HSL (hue), saturation (saturation), lightness (luminance) - a cylindrical coordinate represents a color notation.

HSL color values ​​is predetermined: hsl (hue, saturation, lightness).

Hue is the degree of the color wheel (from 0 to 360) - 0 (or 360) is red, 120 is green, 240 is blue. Saturation is a percentage value; 0% means gray, and 100% of full color. Lightness is the same percentage; 0% is black, 100% white.

(Six), HSLA color

HSLA color is worth to support the following browsers: IE9 +, Firefox 3 +, Chrome, Safari and Opera 10+.

HSLA color value is extended HSL color values, with an alpha channel - it specifies the object's opacity.

HSLA color values ​​is predetermined: hsla (hue, saturation, lightness, alpha), wherein the alpha parameter defines opacity. parameter alpha is from 0.0 (fully transparent) to the digital 1.0 (fully opaque).

(Seven), web-safe colors

web-safe colors means that, on a 256-color color computer system can avoid jitter, to ensure color pages display correctly. web-safe colors RGB values may be expressed as a multiple of 51 and 20% (corresponding hexadecimal value of 33). Further, 0% or 0 is a safe value.

  • If the percentage of RGB, all three components make either 0% or 20 can be divided by a value, e.g. rgb (40%, 100%, 80%) or rgb (60%, 0%, 0%) .
  • If RGB values ​​ranging from 0 to 255, the component is either 0 or 51 can be divisible, as rgb (0,204,153) or rgb (255,0,102)
  • Hexadecimal notation, use a value of 00,33,66,99, CC and FF triples are considered Web safe. Such examples are # 669933, # 00CC66 and # FF00FF. This shows, web-safe colors shorthand hexadecimal value is 0,3,6,9, C and F. So # 693, # 0C6, # F0F examples are web safe colors.

Guess you like

Origin blog.51cto.com/14592820/2464785