CSS Design Guide Notes-A brief discussion of color values

Color values

There are several ways to specify color values. These methods can be mixed in the same style sheet.

1. Color name (e.g. red)

You can use the color name directly when setting the color attribute, or the official term is the color keyword.

The fuchsia defines 16 color keywords: aqua (light green), black (white), Blue (blue), (magenta), gray (Gray), green (green), lime (yellowish green), maroon (maroon), Navy (dark blue), Olive (cyan), purple (purple), red (red), silver (silver), teal (cyan), White, and yellow (yellow).

To learn about these color names and their corresponding RGB color values, please refer to: http://www.w3.org/TR/css3-color/#html4. Most modern browsers support more color names (that is, the X11 color name), but if you really want to use color names, it's best to use only the previous 16. In general, color keywords are most commonly used to specify white and black. For other colors that are really seriously, you have to use the following color values in several formats.

2.16 Binary color (#RRGGBB或 #rgb)

The hexadecimal color values are formatted as follows: #rrggbb e.g. Orange is: The first two bits of this 6-digit number are defined in red, the middle two bits are defined in green, and the last two bits define blue.

The computer uses a binary count instead of our usual decimal, so it has 16 binary (16 is the power of 2 4). Hexadecimal is based on 16 and uses the number 0-9 and the letter a-f for a total of 16 values. Among them, A-f represents 10 to

15. Since each color is represented by a two-bit hexadecimal value, the color has a possible value of 777 (16x16), and the result is a combination of 216 (256x256x256), which can represent a variety of colors.

Pure red is #ff0000, pure green is #00ff00, and pure blue is #0000ff. If each pair in the three pair is two of the same number, you can also use shorthand:#rgb For example, #000是纯黑, #444是75% Gray, #888是50% gray, #bbb是25% gray, and #fff is pure white.

3. RGB color VALUES (R, G, B)

Each color can be specified with a value between 0 and 255 (inclusive). The format is as follows: RGB (R, G, b)

For example, RGB (0,255,0) represents pure green. As with hexadecimal RGB values, only decimal values are used. Because there are 256 possibilities for each color, it can represent the same number of colors as in hexadecimal format.

4. RGB percent Value (r%, g%, B%)

This is a method of representing each color value as a percentage, in the following format: r%, g%, b%

The acceptable values are 0% to 100%. Although this method can only represent a mere 1 million (100x100x100) color, but for our very large number of people, it is enough. Similarly, using a percentage representation of the color value is easier than using hex to guess the color you want. For example, 100%, 0%, 0% is pure red, 0%, 100%, 0% is pure green, and 46%, 76%, 80% close to the front with a hexadecimal value for example analysis of the dark blue green.

5. HSL (hue, saturation%, brightness%) The HSL format is as follows: HSL (0,0%,0%)//Hue, saturability, lightness

HSL is more intuitive than the various RGB methods we've seen, because it's easier to write and understand colors. The first value in the HSL color represents the hue, which is an actual color, such as red and green. All colors revolve around the hue ring (also called the Color Wheel) for a week, and the hue value is expressed in degrees on the circumference.

Red is 0 or, and cyan is 180 relative to it. Here is the approximate hue value of the Rainbow Seven colors in the color wheel.

• Red: 0
• Orange: 35
• Yellow: 60
• Green: 125
• Blue: 230
• Indigo: 280
• Purple: 305

As for saturation and brightness, it is relatively easy to understand more. Saturation is set to how many colors, gray saturation is low, and strong color saturation is high. Brightness set the color of the light and shade, 0% is black, 100% is white,

The median value is the actual hue that can be seen . RGB and hex color values require you to first mix the colors in your brain, while HSL has only one value that represents the color. From setting the saturation and brightness to 50%, you can easily modulate your

Want any color to come.

6. Alpha Channel

Both RGB and HSL support the alpha channel, which sets the opacity of the color (in other words, how many backgrounds can be used). The corresponding formats are called RGBA and Hsla, respectively. Where the A (Alpha) value in both formats can be 1 (completely opaque) or 0 (fully transparent), or a decimal value between 1 and 0.

This article is excerpted from chapter II of the third edition of the CSSS Design Guide;

Support Genuine http://www.ituring.com.cn/book/1111

CSS Design Guide Notes-A brief discussion of color values