小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

颜色

颜色的相关概念

• 色调：很接近通俗意义上的颜色。
• 饱和度：是指颜色中灰色的含量。
• 亮度：是指颜色中黑色的含量。
• 对比度：前景色与背景色之间的差异。
• Web 安全色：不需要担心颜色在不同硬件环境、操作系统和浏览器之间的差异。

色调

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

饱和度

饱和度的含义是指色彩的纯洁性，也叫饱和度或彩度。

亮度

亮度的含义是指发光体的光源面积之比，定义为该光源单位的亮度，即单位投影面积上的发光强度。

对比度

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

Web 安全色

Web 安全色可以使得我们不需要担心颜色在不同硬件环境、操作系统和浏览器之间的差异。

前景色与背景色

CSS 的 color 属性不仅仅表示前景色，更多地是用来表示 HTML 元素的文本内容颜色。

p {
color: lightcoral;
}

背景色

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

p {
background-color: lightcoral;
}

颜色值的类型

• 色彩关键字
• RGB 色彩模式
• HSL 色彩模式

RGB 模式

RGB是一个简称，全称为 Red-Green-Blue，即红-绿-蓝。

• 十六进制符号 #RRGGBB 和 #RGB
• 函数符 rgb(R, G, B)

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

HSL 模式

HSL是一个简称，全称为 Hue-Saturation-Lightness，即 色调-饱和度-亮度。

HSL 色彩模式是通过 hsl(H, S, L) 函数实现的。

• H 表示色调，其值范围为 0 ~ 360 之间的一个角度。
• S 表示饱和度，其值范围为 0% ~ 100% 之间的百分值。
• L 表示亮度，其值使用百分值表示。0%表示黑色，50%表示标准色，100%表示白色。

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

透明度

opacity 属性用来设置 HTML 元素的透明度，该属性的值范围介于 0 ~ 1 之间。

• 如果值为 0 或 0.0 则表示完全透明
• 如果值为 0.5 则表示半透明
• 如果值为 1 或 1.0 则表示不透明
• RGB 模式增加了 rgba(R,G,B,A) 函数，其中 A 为 alpha 表示透明度。
• HSL 模式增加了 hsl(H,S,L,A) 函数，其中 A 为 alpha 表示透明度。