5 分钟一览 CSS 颜色表示方法和专业用法

CSS 颜色有很多种表示方式，包括 RGB、HSL、HWB、LAB 和 LCH。

这些表示方式各有优缺点，本文将分别介绍它们的特点和使用方法。

冲冲冲！

表示方法

RGB

RGB 是最常用的颜色表示方式，它使用红、绿、蓝三个颜色通道来表示颜色。

每个通道的取值范围是 0 ~ 255，因此一共有 256256256 种颜色。RGB 颜色可以通过以下方式来表示：

color: rgb(255, 0, 0); /* 红色 */
color: rgb(0, 255, 0); /* 绿色 */
color: rgb(0, 0, 255); /* 蓝色 */

HSL

HSL 是另一种常用的颜色表示方式，它使用色相、饱和度、亮度三个参数来表示颜色。

其中色相的取值范围是 0 ~ 360，饱和度和亮度的取值范围是 0% ~ 100%。HSL 颜色可以通过以下方式来表示：

color: hsl(0, 100%, 50%); /* 红色 */
color: hsl(120, 100%, 50%); /* 绿色 */
color: hsl(240, 100%, 50%); /* 蓝色 */

HWB

HWB 是一种比较新的颜色表示方式，它也使用色相、饱和度、亮度三个参数来表示颜色。

与 HSL 不同的是，HWB 使用白色和黑色来调节亮度和饱和度。HWB 颜色可以通过以下方式来表示：

color: hwb(0, 0%, 0%); /* 黑色 */
color: hwb(0, 100%, 0%); /* 红色 */
color: hwb(120, 0%, 100%); /* 亮蓝色 */

LAB

LAB 是一种基于人眼感知的颜色表示方式，它使用亮度、a 轴、b 轴三个参数来表示颜色。

其中亮度的取值范围是 0 ~ 100，a 轴和 b 轴的取值范围是 -128 ~ 127。LAB 颜色可以通过以下方式来表示：

color: lab(54.5, 80.3, 69.5); /* 粉红色 */
color: lab(90, -60, 70); /* 绿色 */
color: lab(50, 0, -50); /* 蓝色 */

LCH

LCH 是 LAB 的一种变种，它使用亮度、色度、色相三个参数来表示颜色。

其中亮度和色度的取值范围与 LAB 相同，色相的取值范围是 0 ~ 360。LCH 颜色可以通过以下方式来表示：

color: lch(54.5, 103.8, 327.6); /* 粉红色 */
color: lch(90, 96.1, 137.5); /* 绿色 */
color: lch(50, 70.7, 306.9); /* 蓝色 */

专业用法

接下来，介绍下 CSS 颜色表示的一些专业用法：

• 使用颜色函数来生成颜色，比如 rgb(), hsl(), hwb(), lab(), lch(), color(), system-color(), gray(), device-cmyk(), color-mod() 等等。

• 使用透明度来生成半透明颜色，比如 rgba(), hsla(), color-mod()。

• 使用 currentColor 关键字来继承当前元素的文本颜色，比如 border: 1px solid currentColor;。

• 使用 var() 函数来引用 CSS 变量作为颜色，比如 color: var(--text-color);。

• 使用 color-scheme 属性指定颜色方案，比如 color: buttonface; color-scheme: light;。

• 使用 mix() 函数来混合两个颜色，比如 color: mix(red, yellow, 50%);。

• 使用 contrast() 函数来计算颜色和背景色的对比度，比如 background-color: #333; color: contrast(#333, white, black);。

• 使用 filter 属性来调整颜色，比如 filter: grayscale(50%);。

• 使用 backdrop-filter 属性来对元素背景进行滤镜处理，比如 backdrop-filter: blur(10px);。

通过以上介绍，相信大家对 CSS 颜色的表示方式有了更深入的了解。

---