【CSS颜色指南】：看完这一篇就明白CSS常见颜色表示方法

大家好，我是翼同学！

1️⃣前言

今日笔记内容是：

• CSS中的颜色体系

在HTML文档中，有好多地方可以通过CSS来设置颜色属性美化样式，常见的有文本的颜色color、元素的背景色background-color、元素的边框border-color、元素的阴影颜色等。而在CSS中，颜色的表示方法也有很多，下面就来看看具体的颜色指南。

---

2️⃣颜色体系

在CSS中有多种颜色表示方法，思维导图如下：

✨颜色名称

• CSS支持 140 种被预定义过色值的标准颜色名称
• 比如：red、blue、green等
• 这些颜色名称是不区分大小写的
• 举例如下：

---

📓颜色值

颜色值有三种表示方式：

• HEX值
• RGB值
• HSL值

现在举例如下：

📙HEX值

• 用HEX值的特定格式来表示颜色值是颜色定义中最常见的方法了
• HEX值由符号#和十六进制组合而成，其表示形式为：#RRGGBB，比如##fafa44
• 其中，R表示红色，G表示绿色，B表示蓝色，其值介于00~ff之间，用于指定颜色的强度
• 注意，当#RRGGBB满足两个R、两个G和两个B同时相等时，可以简写为#RGB，比如#aabbcc可以简写为#abc

如下所示：

📘RBG值

• 在CSS中，也可以通过RGB值来指定颜色。
• 其中RGB分别表示红绿蓝，书写格式为：rgb(0, 0, 0)，括号里用三个数值分别表示种颜色的强度，并且数值的范围是：0~255

RBG值举例如下：

• 另外，有一个知识点是透明度。也就是可以为RGB值添加alpha值用于定义透明度
• 具体做法为，在rgb(0, 0, 0)中添加第四个值，范围是0~1
• 其中0是最小值，表示完全透明，1是最大值，表示不透明
• 现举例如下：

---

📗HSL值

• 在CSS中，可以使用HSL值来表示颜色值
• 这个颜色表示与前两种不怎么像。
• HSL值分别表示色调、饱和度和亮度

具体解释如下：

一、色调（hue）

色调是色轮的度数，其值的范围是0到360，其中0表示红色，120表示绿色，240表示蓝色。

具体如下所示：

二、饱和度（saturation）

饱和度，表示色彩的纯度。饱和值越高，色彩越纯，越低则色彩越灰。并且注意到，饱和值是用百分号来表示，0%表示灰色阴影，100%表示全色。

示意图如下：

三、亮度（lightness）

亮度也可以称明亮度。值越高越亮，也就越接近白色。值越小就越暗，越接近黑色。

跟饱和度一样，亮度值也是用百分比来表示。其中0%是黑色，50％表示不明不暗，100％是白色。

举个例子：

和RGB值一样，HSL值也可以添加alpha值来指定颜色的不透明度。其语法为：hsla(0, 0, 0, 0.0)，最后一个值表示alpha，取值范围也是0.0到1.0。

效果如下所示：

---

💡关键字

在CSS中，关于颜色表示的还有两个关键字：transparent和currentColor。具体用法看下面：

🎐transparent

• transparent，意为透明，用于表示完全透明的颜色。
• transparent就是全透明黑色（rgba(0,0,0,0)）的速记方法
• 需要注意的是，在 CSS3 之前，transparent 关键字不是一个真实的颜色。而在支持 CSS3 的浏览器中，它被重新定义为一个真实的颜色，也就是说，transparent被延伸到任何一个有color值的属性上。

举个例子：

div { background-color: transparent;}

🪄currentColor

在CSS3中，扩展了currentColor关键字，用于所有接收颜色的属性上，表示元素当前颜色。

如何来理解这个关键字呢？

来看一个例子：

div{
    color: red;
    border:1px solid;
}

如果你一看就知道上述代码的运行效果，那就能轻松理解currentColor关键字的作用。

具体的，当我们指定<div>标签中color属性为红色时，即使不给盒子边框设置颜色值(border:1px solid;)，其默认颜色值也会是color属性的值，也就是红色。另外，如果我们去掉上述代码中的color属性的定义，边框会变成什么颜色？此时边框的颜色取决于父元素的颜色值，也就是说color值具有继承性。

因此，总结的说，currentColor关键字用于接受颜色的属性上，其作用是：使用当前color属性值的计算值，如果当前未设置color值，则会继承父元素的color值

---

3️⃣写在最后

好了，今天的笔记就写到这里。