最近在团队内搞Design Token 输出 CSS 或 JavaScript 变量的一些事情，希望使用 Design Tokens 来描述一个组件的可变参数，从而基于一个 UI 设计能动态输出多个 UI 效果。为此从颜色系统这一块着手，希望使用 Design Token 和 CSS 变量能构建一个具有可访问性的颜色系统。在这篇文章中想和大家一起聊聊这方面的话题，希望大家感兴趣。

目标

我们今天的目标是从一个基本的品牌颜色开始，使用 CSS 自定义属性和 calc() 来建立一个具有可访问的颜色系统，以制作一个适应用户偏好的 Web 页面或应用。在此基础上，再一起探讨Design Token如何描述一个色彩方案，并且怎么将Token转换成我们可用的CSS自定义属性！

先从品牌色开始吧！

品牌颜色

通常对于一个 Web 页面或应用而言，他的品牌颜色是已经确定的，并以会以Web开发者熟悉的颜色表达方式交付，比如十六进制或RGB或HSL。

拿其中一个品牌颜色为例，比如上图中的 #7f67be，其对应的是 hsl(257 40% 57%)。我们可以使用三个 CSS 自定义属性来描述 HSL 颜色的每个通道值，比如 hsl(257 40% 57%) 可以像下面这样来描述：

:root {
    --primary-hue: 257;
    --primary-saturation: 40%;
    --primary-lightness: 57%;
}

CSS 可以基于这些颜色属性进行计算，如 calc(var(--primary-lightness) - 20%) 可以将亮度值降低 20%，使品牌颜色变深或变浅。按这样的方式可以构建一个色彩方案的基础，因为 CSS 可以通过调整 HSL 的饱和度和亮度来使所有的颜色保持在同一个色系中。

场景中的颜色体系

在实际开发的过程中，可能会为不同的场景提供不同的颜色体系，如下图所示：

特别是因为 macOS系统提出DarkMode模式之后，这种类似换肤的模式越来越流行：

为此，我们可以为每种颜色的变体添加相应的标记来匹配相应的方案。比如：

• 亮色模式下添加 -light后缀
• 暗色模式下添加 -dark 后缀
• 昏暗模式（介于亮色和暗色模式之间）下添加 -dim后缀

比如：

:root {
    --primary-hue: 257;
    --primary-saturation: 40%;
    --primary-lightness: 57%;
    --primary-light: hsl(var(--primary-hue) var(--primary-saturation) var(--primary-lightness));
    --primary-dark: hsl(var(--primary-hue)  calc(var(--primary-saturation) / 2)  calc(var(--primary-lightness) / 1.5));
    --primary-dim: hsl(var(--primary-hue)  calc(var(--primary-saturation) / 1.25)  calc(var(--primary-lightness) / 1.25));
}

接下来，我们就分别来看看亮色（-light）、暗色（-dark）和昏暗（-dim）下颜色体系的建立。

亮色系主题

先从品牌色 primary 开始（#D4CCFF），即使用hsl()颜色模式，包括--primary-hue（色相）、--primary-saturation（饱和度）和 --primary-lightness（亮度）来描述--primary-light颜色，在这个过程中不会涉及任何calc()的计算：

:root {
    --primary-hue: 250;
    --primary-saturation: 100%;
    --primary-lightness: 90%;
    --primary-light: hsl(
        var(--primary-hue) var(--primary-saturation) var(--primary-lightness)
    );
}

接下来，给配色方案中的文本元素添加颜色。在亮色主题中，文本颜色应该是暗色的，即调整颜色中的亮度（即 hsl中的L），建议低于50%。比如：

* {
    --primary-hue: 250;
    --primary-saturation: 100%;
    --primary-lightness: 90%;
    --primary-light: hsl(
        var(--primary-hue) var(--primary-saturation) var(--primary-lightness)
    );
    --on-primary-light: hsl(var(--primary-hue) var(--primary-saturation) 10%)
}

div {
    background-color: var(--primary-light);
    color: var(--on-primary-light);
}

有关于颜色对比度和Web可访问性更多的介绍，可以阅读《颜色对比度和Web可访问性》一文！

再来看表面颜色（Surface），就是文本所处的背景、边框和其他装饰性的表面，而且文本放在其中。在一个亮色的主题中，表面颜色是一个亮色，而文本的颜色则是深色。如果使用 hsl() 来创建亮色的话，只需要将亮度（L）调高，越接近100%，颜色越亮。同时还可以降低颜色的饱和度（S），让整个颜色看起来不会太大的色差：

:root {
    --primary-hue: 250;
    --primary-saturation: 100%;
    --primary-lightness: 90%;

    --surface1-light: hsl(var(--primary-hue) 40% 90%);
    --surface2-light: hsl(var(--primary-hue) 30% 99%);
    --surface3-light: hsl(var(--primary-hue) 30% 92%);
    --surface4-light: hsl(var(--primary-hue) 30% 85%);
}

这些颜色（surface*）是因为装饰性的颜色往往需要更多的变体，它们可以被用于一些控制的状态中，比如悬浮状态（hover）或焦点状态（focus）。将--surface2-light用于悬浮状态，--surface3-light用于焦点状态。

最后再来看一个色彩方案中的阴影部分。阴影主要作用就是能增加UI表现的层次性。色彩方案中的阴影颜色一般使用色调的自定义属性，略带饱和的色调，而且偏暗。就我们示例而言，就是建立一个非常暗的略带浅紫色的阴影。

:root {
    --primary-hue: 250;
    --primary-saturation: 100%;
    --primary-lightness: 90%;

    --surface-shadow-light: var(--primary-hue) 40% 10%;
    --shadow-strength-light: 0.02;
}

注意，示例中的阴影颜色--surface-shadow-light 并没有放到 hsl() 函数中。这是因为阴影颜色常会带有透明能道，比如示例中的--shadow-strength-light值。即：

div {
    box-shadow: 0 2.8px 2.2px
        hsl(
            var(--surface-shadow-light) / calc(var(--shadow-strength-light) + 0.03)
        ),
        0 6.7px 5.3px
        hsl(
            var(--surface-shadow-light) / calc(var(--shadow-strength-light) + 0.01)
        ),
        0 12.5px 10px
        hsl(
            var(--surface-shadow-light) / calc(var(--shadow-strength-light) + 0.02)
        ),
        0 22.3px 17.9px
        hsl(
            var(--surface-shadow-light) / calc(var(--shadow-strength-light) + 0.02)
        ),
        0 41.8px 33.4px
        hsl(
            var(--surface-shadow-light) / calc(var(--shadow-strength-light) + 0.03)
        ),
        0 100px 80px hsl(var(--surface-shadow-light) / var(--shadow-strength-light));
}

示例中使用了多阴影，如果我手撸不出一个效果较好的阴影，还可以借助相应的工具来完成，比如@Philipp Brumm的《smooth box shadow generator inspired by this article》和@JoshWComeau的《Shadow Palette Generator》：

把他们放到一起：

:root {
    --primary-hue: 250;
    --primary-saturation: 100%;
    --primary-lightness: 90%;
    --primary-light: hsl(
        var(--primary-hue) var(--primary-saturation) var(--primary-lightness)
    );
    --on-primary-light: hsl(var(--primary-hue) var(--primary-saturation) 10%);

    --sur