CSS 相对颜色：简化你的调色板

1. 传统颜色管理的痛点

在大型项目中，单纯使用 CSS 变量来管理颜色会遇到以下问题：

• 变量泛滥：为了实现不同色调，需要定义大量辅助变量，例如：
  • --accent-color
  • --accent-color-light
  • --accent-color-dark
  • --accent-color-overlay
• 维护困难：当需要更换主色（--accent-color）时，必须手动修改所有相关的派生颜色变量，过程繁琐且容易出错。
• 变通方案笨重：过去的解决方案，如将颜色的 HSL 或 RGB 值拆分到多个变量中，虽然可行，但使用起来代码冗长，不够直观。

/* 传统方式：修改透明度 */
:root {
  --accent-r: 255;
  --accent-g: 0;
  --accent-b: 0;
}

.element {
  /* 调用时需要写很长一串 */
  background-color: rgba(var(--accent-r), var(--accent-g), var(--accent-b), 0.5);
}

2. HSL 颜色模式简介

为了更好地理解相对颜色，首先需要熟悉 HSL 颜色模式。

• HSL 代表 色相 (Hue)、饱和度 (Saturation) 和 亮度 (Lightness)。
  • H (色相): 决定是什么颜色，取值范围是 0 到 360 的角度（色轮上的位置）。
  • S (饱和度): 颜色的鲜艳程度。0% 是灰色，100% 是最鲜艳的颜色。
  • L (亮度): 颜色的明暗程度。0% 是黑色，50% 是正常亮度，100% 是白色。
• Alpha (透明度): HSL 函数还可以接受第四个可选参数（用 / 分隔），表示颜色的透明度。

HSL 的优势在于可以直观地通过调整 亮度（L） 来创建同一颜色的不同深浅变体。

3. 核心概念：from 关键字

CSS 相对颜色语法引入了 from 关键字，它允许你从一个已有的颜色变量中提取其颜色通道（如 H, S, L），并在此基础上进行修改，而无需硬编码任何值。

基本语法:

.element {
  /* * 'from var(--base-color)' 表示从 --base-color 变量派生。
   * h, s, l 是占位符，代表源颜色对应的色相、饱和度和亮度值。
   * 你可以替换或计算这些值。
   */
  color: hsl(from var(--base-color) h s l);
}

4. 实践应用

4.1. 修改透明度

只需使用 from 关键字，就可以在保持原色 HSL 值不变的情况下，轻松添加或修改透明度。

:root {
  --brand-color: hsl(220 100% 50%);
}

.element-transparent {
  /* 从 --brand-color 获取 h, s, l，然后将透明度设置为 80% */
  background-color: hsl(from var(--brand-color) h s l / 0.8);
}

当你改变 --brand-color 时，.element-transparent 的颜色会自动更新，并保持 80% 的透明度。

4.2. 创建亮色与暗色变体

结合 calc() 函数，可以动态计算新的亮度值，生成更亮或更暗的颜色版本。

:root {
  --base-bg: hsl(210 15% 15%); /* 一个深色背景 */
}

/* 创建一个比基础背景亮 10% 的容器背景 */
.container {
  background-color: hsl(from var(--base-bg) h s calc(l + 10%));
}

/* 创建一个比基础背景暗 5% 的边框颜色 */
.element-border {
  border-color: hsl(from var(--base-bg) h s calc(l - 5%));
}

现在，只需要修改 --base-bg 这一个变量，所有相关的亮色和暗色版本都会自动同步更新。

4.3. 构建动态调色板

利用相对颜色，我们可以仅基于少数几个核心变量，构建一个完整的、可维护的调色板。

虽然可以直接在使用时动态生成颜色，但更合理的做法是预先定义好这些派生颜色变量，方便复用。

:root {
  /* 只需要定义这两个核心颜色 */
  --base-color: hsl(210 15% 95%); /* 基础颜色，用于背景等 */
  --brand-color: hsl(340 90% 55%); /* 品牌色，用于强调 */

  /* --- 派生调色板 --- */
  
  /* 基于 base-color 的变体 */
  --surface-1: hsl(from var(--base-color) h s calc(l - 5%));
  --surface-2: hsl(from var(--base-color) h s calc(l - 10%));
  --text-color: hsl(from var(--base-color) h s calc(l - 70%));

  /* 基于 brand-color 的变体 */
  --brand-light: hsl(from var(--brand-color) h s calc(l + 15%));
  --brand-dark: hsl(from var(--brand-color) h s calc(l - 15%));
  --brand-translucent: hsl(from var(--brand-color) h s l / 0.1);
}

5. 优势总结

1. 极简变量：将庞大的颜色变量列表缩减为几个核心基础变量，如 --base-color 和 --brand-color。
2. 维护高效：只需更改基础颜色，整个网站的色调（亮色、暗色、透明版本）都会自动、按比例地更新。
3. 主题化友好：对于需要用户自定义主题的应用（如 Dashboard），此功能极其强大。只需允许用户更改基础颜色，整个 UI 就会完美适配，无需复杂的 JavaScript 逻辑。
4. 代码清晰：颜色的派生关系一目了然，代码更具可读性和可维护性。