截至上个月，Firefox 128 对 相对颜色语法 的支持意味着我们现在已经有了全面的支持。我对此感到非常兴奋，因为这是一种在CSS中操作颜色的极其强大的方式。此外，它还是今年 Interop 的一部分，这进一步证明了它正在顺利推进。

通用名称的语法看起来像这样：

color-function(from 原始颜色 channel1 channel2 channel3 / alpha)

这是我脑海中的工作原理：

给已有的颜色添加透明度

在项目中为颜色设置CSS自定义属性是很常见的。

html {
  --color-yellow: oklch(80% 0.15 94);
  --color-green:  oklch(70% 0.25 140);

  ...
}

现在你想要使用那种黄色，但透明度大约为50%。你该怎么做呢？实际上有几种方法给现有颜色添加透明度，但在我看来，相对颜色语法是最优雅的。

过去，我这样拆分颜色值：

html {
  --color-yellow-lch: 80% 0.15 94;
  --color-yellow: oklch(var(--color-yellow-lch));

  ...
}

这样我既可以使用完整的颜色，也可以使用拆分后的值来应用透明度：

.box {
  background: var(--color-yellow);
  border-color: oklch(var(--color-yellow-lch) / 50%);
}

但这可能会变得难以控制！你也可以将每种颜色拆分为L、C和H，然后组合它们，这样每种颜色就有 五个 变量。太多了。

有了相对颜色语法，就不需要拆分颜色了。你可以根据需要即时应用alpha（和其他转换），保留原始单一颜色作为唯一需要的变量（token）。

.box {
  background: var(--color-yellow);
  border-color: oklch(from var(--color-yellow) l c h / 50%); 
}

我更喜欢将主要颜色作为自定义属性进行标记，然后根据需要即时调整它们的想法。

使已有的颜色变暗

在上面的例子中，我们有了 --color-yellow，我最后说我喜欢按需进行一次性调整，而不是创建一个全新的变量。如果你有很多使用颜色的稍微变暗的版本，那么，创建一个新的变量并保持一致性是没问题的。但如果它更多的是一次性的，相对颜色语法非常棒：

.box {
  background: var(--gray-5);

  h2 {
    color: var(--color-yellow);
    /* 黄色的变暗版本 */
    border-bottom: 2px solid oklch(from var(--color-yellow) calc(l - 0.4) c h);
  }
}

使已有的颜色变亮

同样的，我 使用 OKLCH 是因为我喜欢它，特别是它的“均匀亮度”特性。这意味着在不同颜色之间进行这种变暗和变亮时，它感觉像是以相同的量变亮/变暗。写起来感觉很奇怪，但这是事实。其他颜色空间不会一致地变亮和变暗。

.box {
  background: var(--gray-5);

  h2 {
    color: var(--color-orange);
    /* 橙色的变暗版本 */
    border-bottom: 2px solid oklch(from var(--color-orange) calc(l + 0.4) c h);
  }
}

避免创建太多变量是相对颜色语法的一个好处，但你仍然可以使用相对颜色语法来创建变量，如果这样做有用的话。

我喜欢从基础颜色开始，可能是稍微带点色调的灰色，然后使用相对颜色语法制作官方变体。

html {
  --base-gray: oklch(12.94% 0.02 159);

  --gray-1: var(--base-gray);
  --gray-2: oklch(from var(--base-gray) calc(l + 0.1) c h);
  --gray-3: oklch(from var(--base-gray) calc(l + 0.2) c h);
  --gray-4: oklch(from var(--base-gray) calc(l + 0.3) c h);
  --gray-5: oklch(from var(--base-gray) calc(l + 0.4) c h);
  --gray-6: oklch(from var(--base-gray) calc(l + 0.5) c h);
  --gray-7: oklch(from var(--base-gray) calc(l + 0.6) c h);
  --gray-8: oklch(from var(--base-gray) calc(l + 0.7) c h);
}

你可以从任何颜色 开始，使用 任何颜色函数，并操作颜色的 任何部分，这是非常强大的。上述用例相当基础。我相信更有才华的设计师或深入了解颜色的开发者能够做出更有趣的事情！