揭秘 CSS 相对颜色语法：HSL 与 Lab 色彩空间在全局网页设计中的应用

网页设计领域在不断发展，我们用来创造视觉吸引力和无障碍体验的工具与技术也在随之进步。最近 CSS 中最激动人心的新增功能之一是相对颜色语法 (Relative Color Syntax)。这一强大功能允许您直接在 CSS 中操作颜色，从而能更轻松、更灵活地创建动态主题、细微变化和无障碍设计。本文将深入探讨相对颜色语法的复杂性，重点关注 HSL 和 Lab 色彩空间，以及如何将它们应用于您的全球项目中。

什么是 CSS 相对颜色语法？

在相对颜色语法出现之前，操作 CSS 颜色通常需要使用 Sass 或 Less 等预处理器，或者依赖 JavaScript。相对颜色语法改变了这一点，它允许您直接在 CSS 规则中修改现有颜色。它通过引用颜色的各个分量（如 HSL 中的色相、饱和度和亮度）并对其应用数学运算来实现。这意味着您可以根据颜色的当前值来提亮、调暗、增加饱和度、降低饱和度或改变色相，而无需预先定义多种颜色变体。

该语法围绕 color() 函数构建，允许您指定一个色彩空间（如 hsl、lab、lch、rgb 或 oklab）、要修改的基础颜色以及所需的调整。例如：

.element {
 color: color(hsl red calc(h + 30) s l);
}

此代码片段以红色为基础，使用 hsl 色彩空间，并将其色相增加 30 度。h、s 和 l 分别代表现有的色相、饱和度和亮度值。calc() 函数对于执行数学运算至关重要。

为何选择 HSL 和 Lab？

虽然相对颜色语法适用于多种色彩空间，但 HSL 和 Lab 在颜色操作和无障碍性方面具有独特的优势。让我们来探讨一下原因：

HSL (色相, 饱和度, 亮度)

HSL 是一种圆柱形色彩空间，它根据人类的感知直观地表示颜色。它由三个分量定义：

色相 (Hue)：颜色在色轮上的位置（0-360 度）。红色通常在 0 度，绿色在 120 度，蓝色在 240 度。
饱和度 (Saturation)：颜色的强度或纯度（0-100%）。0% 是灰度，100% 是完全饱和。
亮度 (Lightness)：颜色的感知亮度（0-100%）。0% 是黑色，100% 是白色。

HSL 的优势：

直观操作：HSL 使基于感知质量调整颜色变得容易。增加亮度使颜色变亮，降低饱和度使其变暗淡，改变色相则沿着色轮移动颜色。
创建配色方案：HSL 简化了创建和谐配色方案的过程。您可以轻松生成互补色（色相 + 180 度）、邻近色（色相相近）或三色组（色相相隔 120 度）。
动态主题化：HSL 非常适合动态主题化。您可以定义一个基础颜色，然后使用相对颜色语法为亮色和暗色模式生成不同的变体。

示例：创建暗色模式主题

假设您的品牌颜色是 #007bff（一种鲜艳的蓝色）。您可以使用 HSL 创建一个暗色模式主题，在保持品牌精髓的同时，在弱光条件下更易于观看。

:root {
 --brand-color: #007bff;
 --brand-color-hsl: color(oklch #007bff h s l);
 --bg-color: #fff;
 --text-color: #000;
}

@media (prefers-color-scheme: dark) {
 :root {
 --bg-color: #121212; /* 一个深灰色 */
 --text-color: #fff;
 --brand-color: color(hsl var(--brand-color) h calc(s * 0.8) calc(l * 1.2)); /* 轻微降低饱和度并提亮品牌颜色 */
 }
}

body {
 background-color: var(--bg-color);
 color: var(--text-color);
}

.brand-button {
 background-color: var(--brand-color);
 color: #fff;
}

在这个例子中，我们检查用户是否偏好暗色方案。如果是，我们使用相对颜色语法将品牌颜色略微去饱和并提亮，以便在深色背景下获得更好的对比度。这确保了品牌标识在暗色模式下保持一致，同时改善了用户体验。

Lab (亮度, a, b)

Lab（或 CIELAB）是一种旨在实现感知均匀性的色彩空间。这意味着无论起始颜色如何，颜色值的变化都对应于感知颜色差异的相似变化。它由三个分量定义：

L：亮度 (0-100%)。0 是黑色，100 是白色。
a：沿绿-红轴的位置。负值为绿色，正值为红色。
b：沿蓝-黄轴的位置。负值为蓝色，正值为黄色。

Lab 的优势：

感知均匀性：Lab 的感知均匀性使其成为颜色差异精度至关重要的任务的理想选择，例如颜色校正和无障碍性检查。
宽色域：Lab 可以表示比 RGB 或 HSL 更广泛的颜色范围。
无障碍性：Lab 常用于无障碍性计算，以确保文本和背景之间有足够的颜色对比度。WCAG（Web 内容无障碍指南）使用的公式基于相对亮度，这与 Lab 色彩空间密切相关。

示例：为无障碍性改善颜色对比度

确保足够的颜色对比度对于无障碍性至关重要。假设您的文本颜色和背景颜色未能完全满足 WCAG AA 对比度要求（4.5:1）。您可以使用 Lab 调整文本颜色的亮度，直到满足要求。

注意：虽然无法直接在 CSS 中使用相对颜色语法直接操作对比度，但我们可以用它来调整亮度，然后使用对比度检查工具来验证结果。

.text {
 color: var(--text-color);
 background-color: var(--bg-color);
}

:root {
 --text-color: #333;
 --bg-color: #eee;
}

/*示例：这并不会直接计算对比度。*/
/*这是一个调整亮度的概念性示例*/

.accessible-text {
 --current-text-color: var(--text-color);
 color: color(lab var(--current-text-color) calc(l + 10) a b); /* 将文本提亮 10 个单位。如果文本颜色的 L 值接近 100，这只会产生有限的效果。要调暗则需要减去数值*/

}

在这个例子中，我们试图提亮文本颜色以改善对比度。因为我们无法在 CSS 中计算对比度，所以我们需要在修改后检查结果并根据需要进行调整。

Oklab：对 Lab 的改进

Oklab 是一个相对较新的色彩空间，旨在解决 Lab 的一些感知缺陷。它致力于实现更好的感知均匀性，使得预测颜色值的变化将如何影响感知颜色变得更加容易。在许多情况下，与 Lab 相比，Oklab 提供了一种更平滑、更自然的颜色调整方式，尤其是在处理饱和度和亮度时。

使用 Oklab 的相对颜色语法与使用 Lab 类似。您只需将 oklab 指定为色彩空间：

.element {
 color: color(oklab #ff0000 calc(l * 1.1) a b); /*将颜色提亮10%*/
}

实际示例和用例

相对颜色语法与 HSL 和 Lab 的结合为网页设计开辟了广泛的可能性。以下是一些实际示例：

生成调色板：创建一个基础颜色，然后使用 HSL 生成一个包含互补色、邻近色或三色组的调色板。
高亮元素：在悬停或聚焦时提亮或调暗元素的背景颜色，以提供视觉反馈。
创建细微变化：在色相或饱和度上添加轻微变化，以创造深度和视觉趣味。
动态主题化：实现亮色和暗色模式，或允许用户自定义网站的配色方案。
改善无障碍性：调整颜色以确保为有视觉障碍的用户提供足够的对比度。

示例：使用 HSL 生成调色板

:root {
 --base-color: #29abe2; /* 一种浅蓝色 */
 --complementary-color: color(hsl var(--base-color) calc(h + 180) s l);
 --analogous-color-1: color(hsl var(--base-color) calc(h + 30) s l);
 --analogous-color-2: color(hsl var(--base-color) calc(h - 30) s l);
 --triadic-color-1: color(hsl var(--base-color) calc(h + 120) s l);
 --triadic-color-2: color(hsl var(--base-color) calc(h - 120) s l);
}

.base {
 background-color: var(--base-color);
}

.complementary {
 background-color: var(--complementary-color);
}

.analogous-1 {
 background-color: var(--analogous-color-1);
}

.analogous-2 {
 background-color: var(--analogous-color-2);
}

.triadic-1 {
 background-color: var(--triadic-color-1);
}

.triadic-2 {
 background-color: var(--triadic-color-2);
}

这个例子演示了如何使用 HSL 基于单一基础颜色生成一个调色板。您可以轻松地修改此代码以创建不同的色彩和谐，并根据您的特定设计需求进行定制。

示例：使用 Lab 创建悬停效果

.button {
 background-color: #4caf50; /* 一种绿色 */
 color: #fff;
 border: none;
 padding: 10px 20px;
 cursor: pointer;
 transition: background-color 0.3s ease;
}

.button:hover {
 background-color: color(lab #4caf50 l calc(a * 1.1) calc(b * 1.1)); /* 轻微提亮并增加 a 和 b 值 */
}

在这里，我们使用 Lab 在悬停时轻微提亮颜色并将其向红色和黄色偏移，为用户创造一种微妙而显著的视觉反馈。

浏览器兼容性与后备方案

与任何新的 CSS 功能一样，浏览器兼容性是一个重要的考虑因素。相对颜色语法在大多数现代浏览器中都得到支持，包括 Chrome、Firefox、Safari 和 Edge。然而，旧版浏览器可能不支持它。

为确保您的网站在所有浏览器中都能正常工作，为不支持相对颜色语法的浏览器提供后备方案至关重要。您可以使用 CSS 变量和 @supports 规则来实现这一点。

:root {
 --base-color: #29abe2;
 --highlight-color: #33b5e5; /* 后备颜色 */
}

@supports (color: color(hsl var(--base-color) h calc(s * 1.2) l)) {
 :root {
 --highlight-color: color(hsl var(--base-color) h calc(s * 1.2) l); /* 如果支持，则使用相对颜色语法 */
 }
}

.highlight {
 background-color: var(--highlight-color);
}

在这个例子中，我们定义了一个后备颜色（#33b5e5），然后使用 @supports 规则来检查浏览器是否支持相对颜色语法。如果支持，我们就使用相对颜色语法生成的颜色来更新 --highlight-color 变量。这确保了使用旧版浏览器的用户仍然能看到高亮元素，即使其颜色与新版浏览器上不完全相同。

无障碍性注意事项

虽然相对颜色语法是创建视觉吸引力设计的强大工具，但考虑无障碍性至关重要。请确保您创建的颜色组合为有视觉障碍的用户提供了足够的对比度。使用像 WebAIM Contrast Checker 这样的工具来验证您的颜色组合是否满足 WCAG AA 或 AAA 的对比度要求。

请记住，不同个体对颜色的感知可能存在显著差异。考虑让患有不同类型色盲或视觉障碍的用户测试您的设计，以确保他们能够轻松地感知和与您的网站互动。

结论

CSS 相对颜色语法，特别是与 HSL 和 Lab 色彩空间结合使用时，对网页设计师来说是一次革新。它使您能够更轻松、更灵活地创建动态主题、细微变化和无障碍设计。通过理解 HSL 和 Lab 的原理，并为旧版浏览器提供后备方案，您可以利用这一强大功能为全球用户创造视觉上令人惊叹且包容的体验。

拥抱相对颜色语法的力量，将您的网页设计技能提升到一个新的水平。尝试不同的色彩空间、数学运算和无障碍性考虑，创造出既美观又对每个人都包容的网站。

进一步学习

通过理解和利用 CSS 相对颜色语法，您可以创建更具动态性、无障碍性和视觉吸引力的网站，以满足全球受众的需求。在进行颜色设计时，请始终优先考虑无障碍性和用户体验。