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 颜色的表示方式有了更深入的了解。
