关于CSS的颜色，你知道多少？

一碗周
447 阅读8分钟

这是我参与8月更文挑战的第20天，活动详情查看：8月更文挑战

Hello 大家好，我是一碗周，不是你想的那个“一碗粥”，是一个不想被喝掉的前端👨🏻‍💻，如果我写的文章有幸可以得到你的青睐，万分有幸~

这是【从头学前端】系列文章的第十八篇-《CSS颜色的基本概念以及用法》

本系列文章在掘金首发，编写不易转载请获得允许

写在前面

导读.png

颜色的相关概念

关于CSS颜色的内容，首先需要来了解一些有关颜色的相关概念，具体有如下几个概念：

  • 色调：很接近通俗意义上的颜色。

  • 饱和度：是指颜色中灰色的含量。

  • 亮度：是指颜色中黑色的含量。

  • 对比度：前景色与背景色之间的差异。

  • Web安全色：不需要担心颜色在不同硬件环境、操作系统和浏览器之间的差异。

上述这些概念，除了Web安全色和我们具有直接关联之外，其他概念我们只需要了解即可。接下来，我们来分别解释一下这些概念的具体含义是什么。

色调

色调的含义 是指图像的相对明暗程度，在彩色图像上表现为颜色。

一个作品的色彩在明度、纯度、色相这三个要素中，某种因素起主导作用，就可以称之为某种色调。通常可以从色相、明度、冷暖、纯度四个方面来定义一幅作品的色调。

在这里我们只要简单地把色调 理解为颜色 就好了。

饱和度

饱和度的含义 是指色彩的纯洁性，也叫饱和度 或彩度 ，是“色彩三属性”之一。简单来说，饱和度 是指颜色中灰色的含量。

饱和度最大时，颜色中灰色的含量为零；饱和度最小时，颜色基本就是灰色。也就是说，饱和度与灰色的占比是成反比的。

亮度

亮度的含义 是指发光体的光源面积之比，定义为该光源单位的亮度，即单位投影面积上的发光强度。简单来说，亮度 是指颜色中黑色的含量。

亮度最大时，颜色中黑色的含量为零。亮度最小时，颜色会变得非常暗。也就是说，亮度与黑色的占比是成反比的。

对比度

对比度的含义 是指明暗区域最亮的白和最暗的黑之间不同亮度层级的测量，差异范围越大代表对比越大，差异范围越小代表对比越小。

如果使用CSS的方式来解释对比度 的话，就是指前景色与背景色之间的差异。差异越大，对比度越大；否则反之。

Web 安全色

很多的颜色在不同浏览器中显示是存在差异的，这是我们开发时所不希望出现的。Web 安全色 可以使得我们不需要担心颜色在不同硬件环境、操作系统和浏览器之间的差异。

Web 安全色 目前基本具有216种颜色，其中色彩为210种，非色彩为6 种。所以，有些资料上也会说 Web 安全色共有210种。因为这210种的Web安全色才是我们开发时真正可以使用的颜色。

提示 ：关于Web安全色的具体颜色以及值，可以参考 www.bootcss.com/p/websafeco…。

前景色与背景色

简单来说，CSS中的前景色和背景色就是color和backgorund-color两个属性，其中color属性表示前景色，background-color属性表示背景色。

前景色

CSS的color属性不仅仅表示前景色，更多地是用来表示HTML元素的文本内容颜色。这样来说，可能 color属性定位text-color会更准确一些，但你需要注意实际上并不是这样的。

如下示例代码展示了color属性的用法：

p {
  color: lightcoral;
}

上述示例代码运行效果如下图所示：

01_color属性.png

背景色

CSS的background-color属性是用来设置HTML元素的背景色，该属性的默认值是transparent（透明）。

如下示例代码展示了 background-color 属性的用法：

p {
  background-color: lightcoral;
}

上述示例代码运行效果如下图所示：

02_background-color属性.png

颜色值的类型

在上述无论是color属性还是background-color属性都需要应用到颜色值，这个颜色是一种标准RGB色彩空间（sRGB color space）的颜色。

颜色值可以通过如下 3 种类型进行定义：

  • 色彩关键字

  • RGB色彩模式

  • HSL色彩模式

注意 ：虽然 CSS 颜色值是被精确定义的，但在不同的输出设备上仍然有可能显示不一。

色彩关键字

色彩关键字 是一个不区分大小写的标识符，其表示一个具体的颜色，例如red表示红色、blue表示蓝色等。而且从CSS1版本发展到CSS3版本，色彩关键字的数量变化也是比较大的：

  • CSS1版本时只有16个基本颜色，称为HTML基本颜色。

  • CSS2版本时增加了orange这种颜色。

  • CSS3版本时增加的颜色数量比较多，具体可以参考 MDN 网站的色彩关键字文章。

值得注意的是，除了16 个HTML 基本颜色之外，其他任何颜色都需要通过特定的计算程序转换，最终导致不同浏览器呈现出的效果可能会不一致。

transparent 关键字表示一个完全透明的颜色，并且transparent是background-color属性的默认值。

值得注意的是 在CSS2版本中transparent并不是一个真实的颜色，到CSS3版本中重新定义为一个真实的颜色。

RGB模式

RGB 是一个简称，全称为Red-Green-Blue ，即红-绿-蓝 。RGB 色彩模式是工业界的一种颜色标准，是通过对红、绿、蓝三个颜色通道的变化以及它们相互之间的叠加来得到各式各样的颜色的。

在CSS中使用RGB色彩模式有如下 2 种方式：

  • 十六进制符号#RRGGBB和#RGB

    • #RRGGBB：是#符号后面编写6 个十六进制字符（0-9，A-F）
    • #RGB：是#符号后面编写 3 个十六进制字符（0-9，A_F）

    值得注意的是 ，当#RRGGBB格式中的两个R或G或B值相同时，就可以改写为#RGB格式。例如 #ff0033可以改写成#f03。

  • 函数符rgb(R, G, B)

    • 这里的R、G、B的值可以使用0 ~ 255之间的值

    • 这里的R、G、B的值也可以使用0% ~ 100%之间的值

    说明： rgb(R,G,B)的255和100%是一致的，相当于十六进制符号中的 FF。

如下示例代码展示了 RGB 模式的几种用法：

#p1 {
  background-color: #FFCC33;
}
#p2 {
  background-color: #FC3;
}
#p3 {
  background-color: rgb(255, 204, 51);
}

上述示例代码运行效果如下图所示：

03_rgb模式.png

如上述示例代码所示，我们可以看到3个<p>元素用了3种不同的RGB模式来表示颜色，但最终运行呈现的效果是一致的。

HSL模式

HSL 是一个简称，全称为Hue-Saturation-Lightness ，即色调-饱和度-亮度 。HSL色彩模式是一种将RGB色彩模型中的点在圆柱坐标系中的表示法。

在 CSS 中使用 HSL 色彩模式是通过hsl(H, S, L)函数实现的，具体含义如下：

  • H表示色调，其值范围为0~360之间的一个角度。

  • S表示饱和度，其值范围为0%~100%之间的百分值。

  • L表示亮度，其值使用百分值表示。0%表示黑色，50%表示标准色，100%表示白色。

如下示例代码展示了 HSL 模式的几种用法：

p {
  background-color: hsl(50, 33%, 25%);
}

上述示例代码运行效果如下图所示：

04_HSL模式.png

注意 ：HSL色彩模式在CSS中的hsl(H,S,L)函数用法是CSS3版本新增用法。

透明度模式

在CSS3中增加了rgb函数和hsl函数，实现了颜色的透明度，具体如下：

  • RGB 模式增加了 rgba(R,G,B,A) 函数，其中A为alpha表示透明度。

  • HSL 模式增加了 hsl(H,S,L,A) 函数，其中A为alpha表示透明度。

总结

本篇文章主要讲解了有关颜色的相关内容，其中包含了颜色的相关概念、CSS中的前景色与背景色、颜色的值类型以及透明度等内容。

  • 有关颜色的相关概念，我们以理解为主即可。这部分内容是辅助我们更好地使用CSS样式语法。

  • 颜色的值类型一共有色彩关键字、RGB模式的rbg()函数和rbga()函数，以及HSL模式的hsl()函数和hsla()函数。

avatar
文章
阅读
粉丝