颜色配色生成器

选定一个基色，按 HSL 色轮上的互补、三角、类比、单色四条规则一步算出整套调色板，HEX、RGB、HSL 三种格式随取随用。

示例展示（演示值，点「生成调色板」重新计算）：
#3C83F6  rgb(60, 131, 246)  hsl(217, 91%, 60%)
#F63C83  rgb(246, 60, 131)  hsl(337, 91%, 60%)
#83F63C  rgb(131, 246, 60)  hsl(97, 91%, 60%)

使用方法

  1. 在「基色」取色器里选定主色。示例值 #3b82f6（一种常用蓝色），也可以先在别处取好色再粘贴进取色器。
  2. 在「饱和度 S」填 91（示例值），「亮度 L」填 60（示例值），两者都只收 0～100 的整数。取色器不带 S/L 时，这两个数就是微调口。
  3. 在「配色规则」里选一条：三角 · 相差 120°（示例值）、互补 180°、类比 30° 或单色明暗。
  4. 点「生成调色板」（或在饱和度、亮度输入框里按 Enter），色块和三格式文本会立即刷新。
  5. 要写进样式表就点「复制 CSS 变量」，得到 :root 开头的自定义属性；要进表格就点「导出 CSV」。

这个颜色配色生成器能解决什么问题

「主色定了、配色靠猜」是很多非设计岗的真实痛点，颜色配色生成器把这件事压缩成可计算的三个字：角度差。具体场景：

一是给非设计岗兜底：写 PPT、做海报、搭落地页时最怕主色定了不知道配什么。色轮规则是百年平面设计沉淀下来的少数可量化共识，互补造冲突、三角造丰富、类比造安静，按角度差取色不会出现「凭感觉调脏了」的结果。

二是给前端交付规范格式：输出的每一条都同时给 HEX、rgb()、hsl() 三种写法，CSS 变量按钮直接拼出 :root 块，省掉手动逐个转格式的环节。

三是做明暗两档延伸：按钮的 hover 态、卡片的浅底、页脚的深底，本质都是同一色相的明度变化，「单色」规则一次给出五档明度，直接对应 60-30-10 配色比例里的层次位。

本页不做这些事：不做单个颜色的挑选与收藏，那是「颜色选择器」的事；不做线性渐变的预览与代码，请用「渐变色生成器」；也不做文字与背景的可读性判定，选完配色后要不要在浅底上放灰字，交给「颜色对比度检测」按 WCAG 阈值判断。

配色原理：HSL 色轮与四条规则

先说换算链。颜色配色生成器收到的输入是取色器给出的 HEX，按 W3C CSS Color Module 定义的 HSL 模型做两次换算：先把 HEX 拆成 R、G、B 三个 0～255 分量，再按 max/min 法转成 H（色相 0～360°）、S（饱和度 0～100%）、L（亮度 0～100%）。反向生成时用公式 c = (1 − |2L − 1|) × S 求色度 c，再按色相所在 60° 区间插值出 RGB，最后打包成 HEX。全部是标准公式，没有经验系数。

四条规则只在色相这一个维度上做旋转。互补 = 基色 ±180°，三角 = ±120° 和 ±240° 各取一点，类比 = ±30°，单色 = 角度差 0、只改明度。色相是环形变量，所以所有加减都要对 360 取模：示例基色 H=217，217+180=397，397 mod 360 = 37，互补点落在 37°（暖橙位）。这个取模不是实现细节而是色轮定义本身——397° 和 37° 在色轮上是同一个点。

为什么用 HSL 而不是直接在 RGB 上找搭配。RGB 三个通道各自独立，旋转其中两个通道得到的颜色人眼看起来毫无规律；HSL 把「是什么颜色（H）」「多鲜艳（S）」「多亮（L）」拆开，规则旋转 H、锁死 S 和 L，整板颜色鲜艳度和明暗感天然一致。

输入会被规范化。#3b82f6 拆出的精确值是 H 217.2°、S 91.2%、L 59.8%，工具四舍五入成整数 217/91/60 再反向输出，所以基色一栏显示 #3C83F6 而不是输入的 #3b82f6——两者换算回 HSL 只差 0.1°～0.2°，属于取整误差，不是算错。做这个取整是为了让正文、对照表和页面输出能逐位对上。

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

示例条件与页面打开时的默认值完全一致：基色 #3b82f6、S=91、L=60、规则=三角，即围绕 H=217 每隔 120° 取一点：

复制 CSS 变量按钮在同样条件下输出：

:root{ --c1: #3C83F6; --c2: #F63C83; --c3: #83F63C; }

换成互补规则则是 217° 与 37° 两点：#3C83F6 与 #F6AF3C（rgb(246, 175, 60)），一冷一暖正好对撞。

输入范围与对照表

先看四条规则本身的档位，基色变化时角度差不变：

规则角度差颜色数观感典型用途
互补180°2冲突感最强促销页主按钮与强调贴纸
三角120°3丰富且互相制衡数据可视化分类色
类比±30°3安静、过渡自然页面主视觉与背景层次
单色0°（只动 L）5统一、有纵深同一色相的明暗两档延伸

下表把示例基色 H=217、S=91、L=60 代入四条规则，逐位实测（单色规则给出五档明度）：

槽位HSLRGBHEX
基色hsl(217, 91%, 60%)rgb(60, 131, 246)#3C83F6
互补hsl(37, 91%, 60%)rgb(246, 175, 60)#F6AF3C
三角 · 第二点hsl(337, 91%, 60%)rgb(246, 60, 131)#F63C83
三角 · 第三点hsl(97, 91%, 60%)rgb(131, 246, 60)#83F63C
类比 · 左邻hsl(187, 91%, 60%)rgb(60, 224, 246)#3CE0F6
类比 · 右邻hsl(247, 91%, 60%)rgb(82, 60, 246)#523CF6
单色 · L=90hsl(217, 91%, 90%)rgb(206, 224, 253)#CEE0FD
单色 · L=75hsl(217, 91%, 75%)rgb(133, 178, 249)#85B2F9
单色 · L=45hsl(217, 91%, 45%)rgb(10, 90, 219)#0A5ADB
单色 · L=30hsl(217, 91%, 30%)rgb(7, 60, 146)#073C92

输入范围、边界与精度说明

常见问题

为什么输出的 HEX 和我选的基色不一样？

工具把 #3b82f6 换算成 HSL 后取整为 217/91/60，再反向换算输出 #3C83F6，两者在 HSL 上只差零点几度。取整是为了让正文、表格与工具输出逐位一致；如果你需要逐位保留原值，基色本身直接用即可，它的 HEX 本来就在你手里。

四条规则到底怎么选？

想要强调与冲突选互补；一个画面里要区分三四个类别选三角；做主视觉与背景的和谐过渡选类比；只想要同一颜色的深浅两档（hover 态、浅色底）选单色。拿不准就先让颜色配色生成器出一套类比，它最不容易出错。

类比色为什么是 ±30°，不是 ±15° 或 ±60°？

±15° 以内两个颜色在多数屏幕上几乎无法区分，起不到配色作用；±60° 已经跨入下一个色相家族，和谐感断裂。±30° 是传统色轮教程通用的「相邻色」定义，本页与主流设计教材保持同一口径。

单色调色板会不会太闷？

单色板本来就是做层次而不是做对比的。常见用法是 L=90 做卡片底、L=60 做主题色、L=30 做正文标题或深色页脚，三档拉开的明度差本身就有层次感。若嫌闷，把规则切到类比即可。

互补色一比一铺在页面上为什么刺眼？

两条互补色明度、饱和度相同时视觉振动最强。实践里用 60-30-10 比例：主色占六成、中性色占三成、互补色只给一成做点睛，本页输出的互补点适合当那个「一成」。

能一次生成多套方案对比吗？

本页一次只算一个基色的一套规则。想对比就换基色再点一次生成，或者把几套的 CSS 变量分别复制出来并排放。批量出几十个随机单色的需求属于「随机颜色生成器」的范围。

导出的 CSV 用 Excel 打开会乱码吗？

不会。CSV 以 UTF-8 编码并在文件头写入了 BOM 标记，Excel 依赖这个标记识别 UTF-8；表头为槽位、HEX、RGB、HSL 四列，可直接进设计交接表。

选的颜色会上传到服务器吗？

不会。取色、换算、导出全部在当前页面的 JavaScript 里完成，不发任何网络请求。可以在开发者工具的 Network 面板里点几次「生成调色板」自查，看不到新请求。

相关工具