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() 函数公式来混和2个色调，例如 color: mix(red, yellow, 50%);。

• 应用 contrast() 函数公式进行计算色彩和背景颜色的饱和度，例如 background-color: #333; color: contrast(#333, white, black);。

• 应用 filter 特性来调节色调，例如 filter: grayscale(50%);。

• 应用 backdrop-filter 特性来对原素环境开展ps滤镜解决，例如 backdrop-filter: blur(10px);。

通过上述详细介绍，想必大家 CSS 色调的表明方法拥有全面的了解。

OK，以上就是此次共享，希望所有喜爱~ 热烈欢迎关注点赞、个人收藏、评价