Detailed graphic explanation of the four representation methods of color in CSS

Color will inevitably be used in page layout. Good-looking color matching will add a lot of color to the page. Do you know how to set the color on the page? This article will talk to you about the various ways to express colors. Friends who don’t know how to express color values ​​can refer to it. I hope it will be helpful to you!

1. English words to express colors

The most direct and simplest way is to use English words to express colors. 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 Opera 10. support HSL color values.

Example: Use the above four methods to represent different colors. The code is as follows:

HTML part:

<div class="color1">床前明月光</div>
<div class="color2">疑是地上霜</div>
<div class="color3">举头望明月</div>
<div class="color4">低头思故乡</div>

CSS part:

<style type="text/css">
	.color1{background-color:orange;}
	.color2{background-color:#FFFF00;}
	.color3{background:rgb(0,255,0);}
	.color4{background-color:hsl(360,50%,50%);}
</style>

Rendering:

The background color of the div with the class name color1 is orange, expressed directly in English words; the background color of the div with the class name color2 is yellow, expressed in hexadecimal #FFFF00 means; the background color of the div with the class name color3 is green, represented by rgb(0,255,0); the background color of the div with the class name color4 is dark red, and the saturation and brightness are both set to 50%, represented by hsl(360,50 %,50%) means.

Summary: The above introduces four methods of expressing colors, each of which is different. Which method to choose depends on personal habits and work needs. Beginners can try it by themselves and combine it with the color encyclopedia. Try different colors, hope it helps.

The above is the detailed content of Detailed graphic explanation of the four representation methods of color in CSS. For more information, please follow other related articles on the PHP Chinese website!