There are several ways to express colors in css

There are 6 ways to express colors in css, which are: 1. English words, such as red, blue; 2. Hexadecimal values, such as "#FF0000"; 3. RGB, such as "RGB( 255,0,0)"; 4. RGBA, for example "RGB(255,0,0,0.5)"; 5. HSL; 6. HSLA.

#The operating environment of this tutorial: Windows 7 system, css3 version, Dell G3 computer.

Tutorial recommendation: css video tutorial

Several expressions of color in css

1. Define color, use English words to represent colors; such as red, blue, etc.

2, hexadecimal value

three-digit hexadecimal; such as #F00 (each color Represented by one hexadecimal number)

Six-digit hexadecimal number; such as #FF0000 (each color is represented by two hexadecimal numbers)

3. RGB expression Method

RGB three primary colors: RGB(255,0,0) The given three parameters represent the color values ​​​​of red, green, and blue, expressed in decimal from 0 to 225

RGB, RGB (100%, 0%, 0%), use the percent sign to express

Note: The above expressions all belong to the RGB color system (red, green, blue)

4 , RGBA: Same as RGB, just with an additional transparency, such as RGB(255,0,0,0.5). The fourth value range is 0-1, 0 is completely transparent, 1 is completely opaque

5, HSL (more used for learning later color adjustment): hue, saturation, brightness. For example, HSL(360,100%,50%).

Hue: It is the basic attribute of color, which is the name of the color commonly referred to, such as red, etc.

Saturation: refers to the purity of the color. The higher the color, the purer the color, and the lower it gradually becomes. Gray, take the value of 0-100%

Brightness: It is the brightness of the color. The higher the brightness of the color, the brighter the color; the darker the brightness of the color, the darker the color. Take 0-100%.

(When you want the page to use a color system, you can use HSL)

6. HSLA: It has more transparency than HSL.

Usage:

①color:blue;

The first method is to call the color attribute and enter the English word of the color after the colon to separate The number ends.

This method is straightforward, but there are very few types of colors that can be represented.

②color:#000000;

The second type, starting with '#', each digit can be: 0, 1, 2, 3, 4, 5, 6, 7, 8 ,

9, a, b, c, d, e, f. The first 1 and 2 digits represent red, 3 and 4 digits represent green, and 5 and 6

represent blue. Similar to the idea of ​​RGB color representation, the three primary colors of red, green and blue are combined into

various colors, and there are many types.

③color:rgb(0,0,0);

The third method is RGB representation. There are two types of values: numerical value, all values ​​are 0-255; percentage value

, all values ​​are 0%-100%. Their common feature is that the first value represents red, the second

value represents green, and the third value represents blue. Through combination, various colors can be represented.

④color:rgba(0,0,0,0.5);

The fourth method is RGBA representation. It is an upgraded version of RGB representation and adds a new transparency attribute.

The first three attribute values ​​are the same as RGB notation. The value range of the fourth attribute value is 0-1 which can be

accurate to two decimal places.

⑤color:hsl (0, 100%, 100%);

The fifth method, HSL representation. Its meaning: H represents hue, the value range is 0-

360, 0 and 360 represent red, 120 represents green, and 240 represents blue. S represents saturation

, the value range is 0%-100%. L represents brightness, the value range is 0%-100%.

⑥color:hsla(0,100%,100%,0.5);

Sixth, HSLA representation. It is an enhanced version of HSL notation, adding the attribute

value of transparency, with a value range of 0-1.

For more programming-related knowledge, please visit: Programming Teaching! !

The above is the detailed content of There are several ways to express colors in css. For more information, please follow other related articles on the PHP Chinese website!