What are the methods for expressing color values in css3

Method: 1. Use English words to represent colors, such as "red" to represent red; 2. Use RGB to represent colors, and the syntax is "rgb (red value, green value, blue value)"; 3. Use hexadecimal to express color, and the syntax is "#RRGGBB"; 4. Use HSL to express color, and the syntax is "hsl (hue, saturation, brightness)".

The operating environment of this tutorial: Windows 10 system, CSS3&&HTML5 version, Dell G3 computer.

What are the ways to express the color value of css3

1. English words to express color

The most direct and simplest method is to use the English word of color Word representation, for example: red we can write color: red.

Disadvantages: There are thousands of colors, not every color has a corresponding English word, and there are limitations in use.

2. Hexadecimal representation of color

The components of hexadecimal color are: #RRGGBB, where RR (red), GG (green) and BB (blue), all values must be between 0 and FF. In layman's terms, the essence of hexadecimal is rgb, and every two digits represent a color. When the values of each two digits are the same, they can be abbreviated. For example, color: #ffcc00 can be abbreviated as color: #fc0.

All major browsers support hexadecimal color values and are recommended.

3. RGB represents color

In RGB, R represents red, G represents green, and B represents blue.

RGB writing method: rgb (0,0,0). Its value range is between 0-255, the larger the value, the darker the color. In addition to using numerical values, RGB can also use percentages, with values ranging from 0% to 100%. For example: RGB (0,0,255) and RGB (0%, 0%, 100%) represent the same color.

RGB representation of common colors. Red: rgb(255,0,0); White: rgb(255,255,255); Black: rgb(0,0,0)

All major browsers support RGB color values.

4. HSL represents color

HSL color values represent: hue, saturation, and brightness.

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

Note: IE9, Firefox, Chrome, Safari, and Opera10. Support HSL color values.

(Learning video sharing:css video tutorial)

The above is the detailed content of What are the methods for expressing color values in css3. For more information, please follow other related articles on the PHP Chinese website!