三角色颜色方案生成器

使用方法

1. 「基准色相 H」默认 210，单位度，范围 0 到 360，可用方向键按 0.1 度微调。改动任意一栏、或光标停在输入框里按回车，都会立刻重算。
2. 「饱和度 S」默认 65、「明度 L」默认 50，都是百分比。三色共用同一组 S 与 L，只改 H，这是三角色与「随便挑三个色」的区别。
3. 「亮度小数位」默认 4，只影响感知亮度与相对亮度的显示位数，不影响色值输出。
4. 「批量取色」默认写好五行，每行一个六位十六进制色值。工具先把色值反解成 HSL，取出 H，再按同一个 120 度规则展开；按 Ctrl+Enter（Mac 上 Cmd+Enter）一次算完。
5. 结果区先给基色与三个色相角度，再逐行列出三色的十六进制、RGB、感知亮度与相对亮度，最后一行是亮度极差——它告诉你这三个色里最亮和最暗差多少。
6. 色块条把三色并排显示，方便直接比较明暗。三色按「主色 + 两个辅色」排列，第一个是基准色。
7. 下方是二十行色相速查表，默认显示 12 行，点「加载更多」展开余下 8 行；「导出 CSV」把全部二十行存成带字节序标记的文件。
8. 色相、饱和度、明度留空或不是数字、超出各自范围，小数位不是 0 到 4 的整数，批量行不是六位十六进制（三位缩写、缺井号以外的字符、位数不对），都会给出写明行号与原因的具体提示。

这个三角色颜色方案生成器能解决什么

配色最省事的一类方案就是三角色：在色环上均匀取三个点，彼此相隔 120 度。它比互补色多一个色，比随便挑三色多一层秩序，因此既够跳、又不至于失控。这一页做的就是把「选一个基色」这一步直接折成完整三色，并把每色的亮度一起摆出来。

第一类是给品牌或活动定主视觉。手头只有一个品牌色，比如 #3498DB，输入后立刻得到 #3498DB、#DB3498、#98DB34 三色，可以直接拿去做主色、强调色与辅助色。三色的 HSL 明度完全一致，所以放在一起不会有某一色特别突兀。

第二类是数据可视化取色。三个系列要保证彼此可区分，三角色天然满足：色相相距 120 度，人眼基本不会混淆。这一页顺带给出每色的感知亮度，三色分别是 135.5774、94.7242、192.6984，差距明显，即使转成灰度图也能靠明度区分。

第三类是排查「配色看着别扭」的原因。三角色最典型的毛病是三色亮度差太大：默认 H=210 这组，最亮 180.7886、最暗 85.8470，极差接近一倍。等面积平铺会显得吵，正确做法是保留一色为主、另两色降饱和或缩小面积点缀。

还有一类边界要说清：三角色只解决色相关系，不解决可读性。文字与背景的对比要按 WCAG 的相对亮度与对比度单独核算，那需要线性化而不是直接读 HSL 的 L；本页给出的相对亮度可以直接用于这类核算。

计算原理与变量说明

三角色的定义只有一句话：三个色相在色环上均匀三分，即 H、(H+120)%360、(H+240)%360。三组共用同一对 S 与 L，所以三色在 HSL 空间里只差一个坐标。这里的取模是真正的取模运算，H=280 时第三色是 (280+240)%360=160，而不是 520。

HSL 转 RGB 走标准分段式。先算 q = L < 0.5 ? L×(1+S) : L+S−L×S 与 p = 2L − q，再对每个通道按 t 落在 [0,1/6)、[1/2,2/3)、[2/3,1) 等区间分段求值，其中 t 分别取 H/360+1/3、H/360、H/360−1/3。最后把 0~1 的值乘 255 并四舍五入，拼成六位十六进制。先转 RGB 再转十六进制是必须的，反过来无法保证位深一致。

同样的 L，感知亮度可以差一倍。这是本页真正的技术内核。HSL 的 L 只是 (max+min)/2，与人的明度感受无关；真正贴近视觉的是 Rec.709 加权 Y = 0.2126R + 0.7152G + 0.0722B，绿色权重是蓝色的近十倍。所以 L 同为 50% 时，黄绿色 #80D22D 的 Y 是 180.7886，而品红 #D22D80 只有 85.8470——在色环上转 120 度，亮度就翻了一倍多。这也解释了为什么三角色直接等面积平铺会显得吵。

相对亮度必须先线性化。WCAG 的相对亮度不能直接用 0~255 的数值加权，因为 sRGB 是 gamma 约 2.2 的非线性编码。先把通道归一化到 0~1，再按 c ≤ 0.04045 取 c/12.92，否则取 ((c+0.055)/1.055)^2.4 还原成线性光，最后加权。中灰 (128,128,128) 归一化是 0.502，线性化后只有 0.2158605001，差了一半多——这个落差就是 gamma 的体现。

反向取色只取 H。给一个色值反解 HSL 时，S 与 L 沿用色值自身的取值，不套用上方滑块。这样 #3498DB 反解出的 H=204.1、S=69.87%、L=53.14%，展开后第一个色必然回到 #3498DB 本身，可以当作自检。

色相是圆周量。H=0 与 H=360 是同一个色，所以取模后不需要再归一化；但浮点数取模可能给出 359.99999 这样的值，本页在显示时统一保留一位小数，避免出现 360.0 与 0.0 两个写法。

完整示例（数值仅作演示）

默认一组：H=210、S=65%、L=50%，三个色相是 210.0°、330.0°、90.0°，输出 #2D7FD2 #D22D80 #80D22D。对应的 RGB 依次是 (45,127,210)、(210,45,128)、(128,210,45)，感知亮度 115.8643、85.8470、180.7886，极差 94.9416。

H=210, S=0.65, L=0.50
q = 0.50 + 0.65 − 0.50×0.65 = 0.8250
p = 2×0.50 − 0.8250 = 0.1750
R 通道 t = 210/360 + 1/3 = 0.9167 → 落在 [2/3,1) → 取 p = 0.1750 → 45
G 通道 t = 210/360 = 0.5833 → 落在 [1/2,2/3) → p+(q−p)(2/3−t)×6 = 0.5000 → 127
B 通道 t = 210/360 − 1/3 = 0.2500 → 落在 [1/6,1/2) → 取 q = 0.8250 → 210
⇒ #2D7FD2

批量五行：#3498DB 反解 H=204.1 得 #3498DB #DB3498 #98DB34；#E74C3C 反解 H=5.6 得 #E74C3C #3CE74C #4C3CE7；#2ECC71 反解 H=145.4 得 #2ECC71 #712ECC #CC712E；#2D7FD2 反解 H=210.2 得 #2D7FD2 #D22D7F #7FD22D；#9B2DD2 反解 H=280.0 得 #9B2DD2 #D29B2D #2DD29B。每行的 S 与 L 都取自该色值自身。

极端值有两个：S=0 时三色全部退化成同一个灰，因为没有色度可转；L=0 或 L=100 时三色也全部退化成纯黑或纯白。这两组输入不算错误，但输出没有配色意义。

三角色相速查表

下表固定取 S=65%、L=50%，每 18 度取一个基准色相，共二十行。后三列由本页同一套公式算出：三色的感知亮度取最大值、最小值与两者之差。整行扫下来可以看出亮度极差随基色相起伏，最小的一组是 H=216 附近。

第二张表把三角色与几类相邻方案摆在一起，便于确认自己要的到底是哪一个。它们的差别全部落在第二个与第三个色相的偏移角上。

结果边界、舍入与适用说明

• 色相留空时提示「色相这一栏是空的，请填 0 到 360 之间的数」；填入 360 也会按取模归到 0，不会报错。
• 饱和度与明度必须是 0 到 100 的数，超出会分别提示「饱和度 120 超出 0 到 100 的范围」这类具体原因，不自动夹到边界。
• 批量行必须是六位十六进制：允许带井号，字母大小写不敏感；三位缩写、五位、含空格或井号以外的符号都会被拦下并指出行号。
• 亮度小数位只接受 0 到 4 的整数，仅作用于感知亮度与相对亮度的显示；十六进制色值始终输出六位。
• 感知亮度用 Rec.709 系数直接对 0~255 的 sRGB 数值加权，相对亮度则先线性化再加权，两者不可互换，页面并列给出。
• RGB 四舍五入取最近整数，因此从 hex 反解 HSL 再转回来可能与原值相差 1，这是 8 位量化的正常结果。
• S=0、L=0、L=100 这三组输入会输出三个完全相同的色，属正常退化而非故障。
• 页面不联网、不写本地存储；导出的 CSV 带字节序标记，Excel 打开不乱码。

常见问题

相关工具

• 颜色选择器：先定一个基色，再回来展开三角色。
• HSL转RGB转换器：本页取色用的就是这套分段公式，可以逐通道核对。
• RGB转十六进制：把三色的 RGB 值转成可直接写进 CSS 的色值。
• 渐变色生成器：三色确定后做渐变过渡。
• 颜色对比度检测：三色之间的可读性与 WCAG 对比度核算。
• 颜色工具：查看全部颜色工具。