刚开始接触配色时，许多人都会停在同一道坎上。你能挑出一个自己很喜欢的颜色，却很难再围绕它搭出一整组看起来像同一家族的色卡。与其焦虑自己有没有天赋，不如先做一件踏实的事，亲手生成一组可控的十二色或二十四色 HEX 值。它更像一把刻度清晰的尺子，日后无论是练习配色、设计图表分类色，还是调整渐变，你都可以用同一把尺子来推敲和复盘。

这套方法背后的想法其实很简单。只让色相发生变化，把饱和度和明度稳定下来。你得到的就不再是一堆凭感觉抓来的颜色，而是一组有依据、可重复、彼此可以对照的结果。

1. 准备工作

在动手之前，先要弄清楚自己到底在做一件什么样的事情。所谓 12 色环和 24 色环，本质上就是把整圈色相按一定步长平均切分，只是分得粗一些还是细一些的区别。

一圈是 360 度，如果分成 12 份，每一份是 30 度，相邻两点之间隔着 30 度的色相距离。分成 24 份时，每一份是 15 度，刻度更细，你在色环上每往前走一步，颜色的变化也随之变得更细腻。

整个过程最后得到的东西其实很朴素，只是一串可以直接拿来用的颜色值。它们通常写成 6 位的十六进制形式，也就是在前面加一个#号，再跟上 6 个字符，比如 #E61919，这就是我们平时所说的 HEX 颜色。

2. 选颜色体系

要亲手做一圈可控的色环色卡，最合适的选择其实是使用 HSL。你可以先把它理解成对同一种颜色的三次描述，用三条轴把颜色拆开来看。

• H 是色相，决定你在色环上的停靠位置，是靠近红和橙，还是接近蓝和紫。
• S 是饱和度，描述颜色有多纯，是偏灰、偏柔和，还是鲜艳、很有存在感。
• L 是明度，决定颜色有多亮，是朝白那边靠近，还是更接近黑。

制作这组颜色时，你只需要抓住一个原则。先把 S 和 L 固定在同一组数值上，只调 H 这一项，让色相沿着色环按步长往前走。这样得到的每一个颜色，都是在同一亮度和饱和度下，对不同色相的均匀取样。整圈色卡的气质会非常统一，你在分析和复用时也更容易说清楚自己到底改了什么、改了多少。

3. 选固定参数

在沿着色环取样之前，先把 S 和 L 定住，这是整套方法能不能稳定的关键。你可以把这一层理解成给这组色卡定气质，是更鲜明清晰一些，还是略微柔和一点。对新手来说，一个比较通用的起点，是把 S 设为 80，把 L 设为 50，这样生成的颜色既接近教科书里的标准色轮，又不容易显得刺眼。

如果后面觉得画面太冲，可以慢慢把 S 调低到 70 左右；如果觉得整体偏暗或偏亮，再在 45 到 55 之间轻轻推一推 L。

建议一开始先坚持用同一组参数，不要同时做太多版本，否则很容易把基准搞乱，连自己都说不清哪一套才是这组色卡真正的出发点。

4. 算色相角度

接下来，你要在这一圈色相上做的事情，其实很简单。就是先想清楚要在这一圈上放几个点，然后把这几个点尽量均匀地分布开。

你可以先把色环想成一把长为 360 度的圆形刻度尺。整圈就是 360 度。现在你要在这把尺子上，平均地画上 12 个刻度，或者 24 个刻度。所谓平均，就是每两个刻度之间的间距相同。

如果你想要 12 个颜色，做法是先算出每一步要走多少度。用 360 除以 12，得到 30。这个 30 度就是你在色环上前进的步长。

从 0 度开始，每次加 30 度，就能依次得到 12 个色相角度：0、30、60、90、120、150、180、210、240、270、300、330

最后没有写出 360 度，是因为 360 度和 0 度在色环上是同一个位置，已经被算在第一格里了。

如果你想要 24 个颜色，步骤完全一样，只是刻度更细。用 360 除以 24，得到 15。这个 15 度就是新的步长。

从 0 度开始，每次加 15 度，就能得到 24 个色相角度：0、15、30、45、60、75、90、105、120、135、150、165、180、195、210、225、240、255、270、285、300、315、330、345。这里大家可以作为练习，使用在线配色工具 ColorsFroge 练习生成一下，我们就不再配图了

到这里为止，你已经把要取样的色相位置全部算出来了，相当于先在色环上把 12 个或 24 个点标好。接下来只需要在工具里，把这些角度依次填进 H 这个格子里，再配上前面已经固定好的 S 和 L，软件就会自动把它们转换成对应的 HEX 颜色。你得到的那一串值，就是一圈有规则可查的色环色卡。

5. 用Figma 做色卡

用 Figma 做一圈色卡，其实可以当成一次很简单的手工操作。你只要把第一块颜色调对，后面基本就是复制和改数值。你可以这样做：

先画一个小矩形，比如宽高各 80 像素，当作第一个色块。选中它，打开右侧的颜色面板，把颜色模式切换到可以输入 H、S、L 的那种，然后把数值设成 H 0、S 80、L 50。这个时候，面板里就会显示出对应的 HEX，这个颜色就是整组色卡的起点。

接下来复制这个色块，把它排成一行或者一圈都可以。每复制出一个新的色块，只改 H 这一项。做 12 色环时，每次在上一个数值的基础上加 30；做 24 色环时，每次加 15。比如第一个是 H 0，第二个就是 H 30，第三个是 H 60，一直加到 H 330 为止；或者按 0、15、30、45 这样往上走，直到 345。这样一圈下来，你就得到了 12 个或 24 个均匀分布在色环上的色相，对应的 HEX 也都已经算好了。

最后，把这些色块各自存成颜色样式，会比直接放在那里好管理得多。命名的时候可以把角度写进去，比如 hue 000、hue 030 一直到 hue 330，或者 hue 000、hue 015 一直到 hue 345。带着角度命名有两个好处，一是你随时能在脑子里把它们重新放回色环上，二是你一眼就能看出这组颜色是按规则等分出来的，而不是哪天心情好随手点出来的几种颜色。

6. 两个新手常见问题

1 颜色一定要从红色开始吗

不需要。你可以把整圈色相当成一条环形刻度，把起点挪到任何你想要的位置。如果你更喜欢从蓝色开始，那就把第一个 H 设为 240，后面依旧按照同样的步长往上加。规则还是那条规则，只是整圈顺时针转了一下。

在真实项目中，这种做法反而更常见。很多时候你是围绕既有的品牌主色来做色环色卡，那么第一个色相就应该落在品牌主色附近，而不是机械地从红色起步。色环本身没有“必须从哪儿开始”的要求，重要的是间距均匀、逻辑清晰。

2. 为什么同样是 L 等于50，黄色看起来比蓝色亮

这是 HSL 这个模型本身带来的差异，可以理解为一种“数学上的明度”和“人眼感受到的明度”之间的偏差。

在 HSL 里，L 只是按照公式算出来的亮度值，它并不能完全反映人眼对不同色相的真实感受。对视觉系统来说，黄和黄绿一带通常会显得更亮，蓝和蓝紫一带往往显得更暗一些，即便它们的 L 数值完全相同。

对你现在练习制作 12 色或 24 色环来说，这个现象不用太紧张。此时你在做的是一把“规则均匀的取样尺”，核心是学会按固定步长在色环上取点，让整圈颜色的取样方式一致。等你用这把尺子去构建具体的 UI 色板时，再进入下一步的工作。那时候你会开始根据可读性和层级，在不同色相上微调明度，甚至引入更接近人眼感受的色彩空间模型。

7. 小结

做出一组可控的 12 色或 24 色 HEX，真正的价值不在于手里多了一串颜色，而在于你多了一把尺度清晰的工具。以后每次配色，不再只是凭感觉点来点去，而是能说清楚自己在色环上走了哪一步，为什么这样走，同样的结果还能重新做出来。

有了这一圈颜色，你可以拿它练对比，观察不同色相之间的张力；可以练过渡，看渐变在什么角度区间里最自然；可以练分类，用它为图表和标签挑选既统一又好区分的色彩。久而久之，这一圈不再只是一张练习纸，而会变成你的素材库起点，从中抽出一部分，再结合明度和饱和度的调整，慢慢长成一整套属于自己的色板体系。