CSS learning -- color representation

Posted by krang on Sat, 21 Dec 2019 16:59:53 +0100

Color representation of CSS

1.RGB mode

R stands for red, G stands for green, B stands for blue, that is, the three primary colors of red, green and blue can form N multi colors.

RGB value range

RGB values range from 0-255.

RGB mode instance

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#box{
				/*Set width*/
				width: 100px;
				/*Set height*/
				height: 100px;
				/*Set the background color, as long as you change the value in rgb, you can see different effects. Note that the value range is 0-255*/
				background-color: rgb(255,0,0);
			}
		</style>
	</head>
	<body>
		<div id="box"></div>
	</body>
</html>

2. Write color name directly (for common colors)

The effect is consistent with the above method. For common colors, special colors cannot be accurately expressed.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#box{
				/*Set width*/
				width: 100px;
				/*Set height*/
				height: 100px;
				/*Set background color*/
				background-color: red;
			}
		</style>
	</head>
	<body>
		<div id="box"></div>
	</body>
</html>

3. Hex

The effect is consistent with the above two methods, but the representation in the code is different.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#box{
				/*Set width*/
				width: 100px;
				/*Set height*/
				height: 100px;
				/*Set background color*/
				background-color: #FF0000
			}
		</style>
	</head>
	<body>
		<div id="box"></div>
	</body>
</html>

RGBA model

R stands for red, G stands for green, B stands for blue, A stands for transparency, and if there is more A with the first RGB mode, then transparency.

Code instance

The effect is the same as the above three methods, but the representation in the code is different.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#box{
				/*Set width*/
				width: 100px;
				/*Set height*/
				height: 100px;
				/*Set the background color. Note that the rgb value is 0-255, and the a value is 0 (fully transparent) - 1 (opaque)*/
				background-color: rgba(255,0,0,1);
			}
		</style>
	</head>
	<body>
		<div id="box"></div>
	</body>
</html>

Programmer Think