当前位置：首页 > article >正文

re:从0开始的CSS学习之路 5. 颜色单位

article 2024/11/20 17:36:23

0. 写在前面

没想到在CSS里也要再次了解这些颜色单位，感觉回到了大二的数字图像处理，可惜现在已经大四了，感觉并没有学会什么AI的东西

1. 颜色单位

预定义颜色名：HTML和CSS规定了147种颜色名。例如：red yellow green blue
RGB颜色值
rgb(red, green, blue)：括号中每个参数代表对应颜色的浓度
浓度值是0-255之间的整数，0表示无浓度，255表示最大浓度
也可以使用百分比表示浓度 0%~100%
十六进制颜色值
#RRGGBB：RR-红色 GG-绿色 BB-蓝色，每种颜色使用十六进制整数表示浓度
十六进制（满十六进一）：0 1 2 3 4 5 6 7 8 9 A B C D E F
例如：#ff0000
若每种颜色的两位数值都一样可以简写为：#f00
RGBA：相较于RGB多了个A表示透明度，取值范围在0.0~1.0之间
0.0表示透明 1.0表示不透明 0.5表示半透明
HSL/HSLA
H 色调（0-360）0红色->120绿色->240蓝色
S 饱和度（0%-100%） 0%灰色->100%全彩
L 亮度（0%-100%） 0%黑色->100%白色
A透明度（0.0-1.0） 0.0透明->1.0不透明

示例如下：

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	.div1 {
		width: 200px;
		height: 200px;
	
		/* background-color: red; */
		/* background-color: rgb(255, 200, 0); */
		/* background-color: rgb(100%, 0%, 0%); */
		/* background-color: #f00; */
		/* background-color: rgba(255, 0, 0, 0.5); */
		background-color: hsla(0, 100%, 50%, .3);
	}
</head>

<body>
	<div class="div1"></div>
</body>

</html>