我注意到了一种关于颜色和 CSS 自定义属性的情况，我在分解 HSL 颜色值时“走得太远”了。将每一种颜色分解成 H、S 和 L 部分可能有点过头了。

但是您可能确实想像这样拆分它：

html {
  --color-1-hsl: 200deg 15% 73%;
  --color-1: hsl(var(--color-1-hsl));
}

因此，您的颜色系统中每种颜色有两个自定义属性。为什么？因为现在您有了一种非常简单的方法来使用它，并且如果您愿意，您还可以将 alpha 应用于颜色。

.card {
  background: var(--color-1);
}
.card-with-alpha {
  background: hsl(var(--color-1-hsl) / 0.5);
}

没有任何其他方法可以在 CSS 中采用现有颜色并对其应用 alpha 透明度。好吧，我是这么说的，​​但实际上​​……

/* Future CSS! (works in Safari TP right now) */
.card-with-alpha {
  background: hsl(from var(--color-1) h s l / 0.5);
}

这很好，但我不完全确定我们何时能够在生产中依赖它。

你知道还有什么我们不能用于生产中非常重要的东西吗？​​Houdini 绘画作品​​​。​​目前还​​没有 Firefox 或 Safari 。

真可惜，因为​​戴夫差点把这东西弄坏了！​​​这里的见解是，Houdini 绘制工作集基本上返回您使用​​<canvas>​​​API绘制的图像。您可以使用任何颜色格式在 Canvas 中绘制一个矩形，然后设置​​globalAlpha​​，将其作为图像返回，这样基本上可以解锁任何颜色格式的 alpha！