css的颜色函数
CSS的颜色函数 rgb()、rgba() 用于定义颜色的函数
rgb() 函数 用于定义一个颜色，它由三个参数组成：红色（R）、绿色（G）和蓝色（B）。每个参数的值范围都是 0 到 255，代表颜色的强度。
color: rgb(255, 0, 0); /* 红色 */
background-color: rgb(0, 255, 0); /* 绿色 */rgba() 函数 与 rgb() 类似，但它多了一个参数：透明度（Alpha）。Alpha 参数的范围是 0 到 1，其中 0 表示完全透明，1 表示完全不透明。
color: rgba(255, 0, 0, 0.5); /* 半透明的红色 */
background-color: rgba(0, 255, 0, 0.3); /* 30% 不透明的绿色 */使用 rgba() 可以实现带有透明度的颜色效果，这在设计需要渐变、阴影或其他视觉效果时非常有用。
CSS的颜色函数 hsl()、hsla() 基于色相、饱和度、亮度模型，并可选地包含透明度（Alpha）信息
hsl() 函数 通过三个参数定义颜色：色相（Hue）、饱和度（Saturation）和亮度（Lightness）。
- 色相（Hue）：表示颜色的基本属性，取值范围是 0 到 360 度，代表色轮上的角度。
- 饱和度（Saturation）：表示颜色的纯度，取值范围是 0% 到 100%，其中 0% 表示灰色，100% 表示完全饱和。
- 亮度（Lightness）：表示颜色的明亮程度，取值范围也是 0% 到 100%，其中 0% 表示黑色，100% 表示白色。
color: hsl(0, 100%, 50%); /* 红色 */
background-color: hsl(120, 100%, 25%); /* 深绿色 */hsla() 函数 与 hsl() 类似，但它多了一个参数：透明度（Alpha）。Alpha 参数的范围是 0 到 1，其中 0 表示完全透明，1 表示完全不透明。
color: hsla(0, 100%, 50%, 0.5); /* 半透明的红色 */
background-color: hsla(120, 100%, 25%, 0.7); /* 70% 不透明的深绿色 */使用 hsla() 可以实现带有透明度的 HSL 颜色效果，这在需要创建复杂的视觉效果或渐变时特别有用。
CSS的颜色函数 hwb()
基于 HWB（Hue, Whiteness, Blackness）颜色模型来定义颜色。HWB 模型是 RGB 模型的一个变种，它使用色调（Hue）、白度（Whiteness）和黑度（Blackness）三个参数来定义颜色。
- 色调（Hue）：与 HSL 和 HSV 模型中的色调相同，表示颜色的基本属性，取值范围是 0 到 360 度。
- 白度（Whiteness）：表示颜色中白色的成分，取值范围是 0% 到 100%。增加白度会使颜色变得更亮。
- 黑度（Blackness）：表示颜色中黑色的成分，取值范围也是 0% 到 100%。增加黑度会使颜色变得更暗。
HWB 颜色模型的一个优点是它更符合人类的直观认知，因为可以直接通过调整白度和黑度来控制颜色的亮度和暗度，而不需要像在 RGB 模型中那样同时调整三个分量。
例如，hwb(0, 0%, 30%) 表示红色的色调，没有加入白色成分，但加入了 30% 的黑色成分，因此最终的颜色是偏深一点的红色。
hwb() 函数在 CSS 中的使用类似于其他颜色函数：
color: hwb(0, 0%, 30%); /* 偏深一点的红色 */
background-color: hwb(120, 50%, 10%); /* 一种绿色调，带有一定的白色和黑色成分 */CSS的颜色变量 lab()
基于 CIELAB 色彩空间的颜色函数。CIELAB 是一种颜色空间，旨在更贴近人眼对颜色的感知。LAB 色彩空间由三个分量组成：L（亮度）、a（从绿色到红色的分量）、b（从蓝色到黄色的分量）。
- L（亮度）：表示颜色的亮度，取值范围是 0% 到 100%。0% 代表黑色，100% 代表白色。
- a：表示颜色在绿色和红色之间的位置。正值表示偏向红色，负值表示偏向绿色。
- b：表示颜色在蓝色和黄色之间的位置。正值表示偏向黄色，负值表示偏向蓝色。
lab() 函数在 CSS 中的使用如下：
color: lab(50% -10 20); /* 一个具体的 LAB 颜色值 */
background-color: lab(90% 0 0); /* 高亮度、无 a 和 b 分量的颜色 */与 RGB、HSL 等色彩空间相比，LAB 色彩空间更接近人眼对颜色的视觉感知，因此在某些情况下，使用 LAB 可能会更准确地匹配颜色。然而，lab() 函数在 CSS 中的支持度相对较低，可能不是所有浏览器都支持这个函数。
CSS的颜色函数 lch() 基于 CIELCH 色彩空间的颜色函数
CIELCH 色彩空间是 CIELAB 色彩空间的扩展，其中 L 表示亮度，C 表示色度（即色彩的饱和度），H 表示色调（色相）。LCH 色彩空间提供了与 CIELAB 类似的颜色表示，但使用色度（Chroma）代替 a 和 b 分量，这通常更直观且易于理解。
- L（亮度）：表示颜色的亮度，取值范围是 0% 到 100%。0% 代表黑色，100% 代表白色。
- C（色度）：表示颜色的饱和度，即色彩的鲜艳程度。C 的值越大，颜色越鲜艳；C 的值越小，颜色越接近灰度。
- H（色调）：表示颜色的色相，即色彩在色轮上的角度。H 的取值范围是 0 到 360 度，其中 0 度代表红色，120 度代表绿色，240 度代表蓝色等。
lch() 函数在 CSS 中的使用如下：
color: lch(50% 60 120deg); /* 一个具体的 LCH 颜色值 */
background-color: lch(90% 0 0deg); /* 高亮度、无色度（即灰色）的颜色 */lch() 函数提供了在 CSS 中定义颜色的另一种方式，特别是对于那些需要直接控制亮度和色度而不是红、绿、蓝分量的场景。
CSS的颜色函数 device-cmyk() 用于表示印刷四分色模式（CMYK）的颜色
CMYK 是由青色（Cyan）、品红色（Magenta）、黄色（Yellow）和黑色（Black）四种颜色混合而成的减色混色模型。与 RGB 的加色混色模型不同，CMYK 中颜色混合时，亮度会降低。
在 device-cmyk() 函数中，每个颜色分量的取值范围都是 0 到 1，或者可以表示为百分比形式，从 0% 到 100%。这四个参数分别对应 C（青色）、M（品红色）、Y（黄色）和 K（黑色）。
例如，如果想表示一个由 50% 青色、75% 品红色、25% 黄色和 10% 黑色组成的颜色，可以这样写：
color: device-cmyk(0.5, 0.75, 0.25, 0.1);
//或者这样
color: device-cmyk(50%, 75%, 25%, 10%);CSS的颜色函数 color-mix()
CSS Color Module Level 5 提案中引入的一个实验性功能，用于混合两种颜色。该函数允许指定颜色空间（如 srgb、lch、lab 等）以及每种颜色混合的比例。
color-mix() 的语法如下：
color-mix(in <color-space>, <color-percentage>, <color>);
：指定颜色空间，如 srgb、lch、lab 等。 ：指定第一种颜色的混合比例，范围通常是 0% 到 100%。 ：指定第二种颜色。
例如，如果想要混合红色（red）和蓝色（blue），并且红色占 70%，蓝色占 30%，可以这样写：
div {
background-color: color-mix(in srgb, 70%, blue);
}这将会产生一个偏向于红色的混合色。
CSS的颜色函数 oklab()
CSS Color Module Level 4 中引入的一个实验性颜色函数，用于在 OKLab 色彩空间中定义颜色。OKLab 是一种颜色空间，旨在提供一个更均匀的颜色感知空间，同时保持与 CIELAB 相似的简单性和计算效率。
在 oklab() 函数 中，颜色由三个分量表示：L（亮度）、O（橙色分量）和 K（黄色分量）。这些分量的取值范围通常是 0 到 1，或者可以转换为百分比形式。
oklab() 函数的语法如下：
oklab(<number> <number> <number>)其中，每个
例如，要定义一个 OKLab 颜色值，可以这样：
color: oklab(0.5 0.3 0.2);