配色生成器

七种配色的定义

除单色配色外，每种配色都保持基色的饱和度和亮度（OKLCH 色环下是明度和彩度），只旋转色相。矩形配色是两组互补色，正方形配色单独列出。下面以 Ant Design 的默认品牌色 #1677FF 为例，它是 定制主题文档 里 Seed Token colorPrimary 的默认值：

单色配色用五个固定亮度档，离基色最近的一档（这里基色亮度 54.3%，替换的是 50%）由基色本身占用，所以基色总是出现且只出现一次。HSL 换算按 CSS Color 4 第 7 节，恰好落在 .5 的通道值按 CSS 规则向上取整。需要同一颜色的 50–950 共 11 级深浅时，用 颜色色阶生成器。

Ant Design 项目里怎么用

Ant Design 会从 colorPrimary 自动派生悬停、激活、浅色背景等一整套主色梯度，这部分不需要配色工具。配色工具解决的是另一件事：图表系列、标签、状态色之外的强调色要和主色搭配。常见做法是在三角或矩形配色里取一两个颜色作强调色，用 JSON 或 CSS 变量导出后放进自己的主题文件。

选 HSL 还是 OKLCH，差别在明度。HSL 色环上 #1677FF 的补色 #FF9E16 比基色亮很多，白字在上面只有 2.07:1；OKLCH 色环保持明度，补色变成 #AD7300，白字为 4.02:1，和基色的 4.10:1 接近。按 WCAG 2.2 的 1.4.3，正文需要 4.5:1，大字号需要 3:1，所以这两个颜色上的白字都只适合大字号或按钮图标，正文对比度要再用 颜色对比度检测器 确认。

OKLCH 色环的颜色常常超出 sRGB。上例的补色在基色彩度下无法显示，工具按 CSS Color 4 的色域映射 降低彩度，并在色块上标 ◆。三角配色是 #1677FF、#E52848、#1C9B00，其中绿色也经过了映射。以 #1677FF 为基色时，OKLCH 色环的 24 个色块里有 13 个被映射。色块文字按 WCAG 2.2 相对亮度在黑色和近白色之间选对比度更高的一个。

导出成代码

「代码」菜单决定卡片「复制」按钮和底部面板的输出：色值列表、:root 里的 CSS 变量、SCSS 变量、Tailwind v4 的 @theme、Tailwind v3 配置文件和 JSON。变量名是配色名加序号，例如三角配色、HEX 格式、JSON 输出：

{
  "triadic": [
    "#1677FF",
    "#FF1677",
    "#77FF16"
  ]
}

HSL 和 OKLCH 值保留足够的小数，保证换回 HEX 时不变。整数 HSL 会丢颜色：#1677FF 取整写成 hsl(215, 100%, 54%) 后换回来是 #1476FF，本工具写作 hsl(215, 100%, 54.3%)。

和同类工具的差别

2026-10-01 实测在线配色生成器 color5.com：在输入框粘贴 rgb(59, 130, 246) 或不带 # 的 3b82f6 后点「生成配色方案」，页面仍显示上一次的基色，没有任何提示；先输入灰色 #808080 时，类似色和互补色卡片全是同一个灰色，也没有说明。基色信息里的 HSL 写成整数 hsl(217, 91%, 60%)，这个值换回 HEX 是 #3C83F6，与输入的 #3B82F6 不同。本工具接受这两种写法，读取结果写在状态栏。输入有误时指出原因，同时清掉上一个颜色的配色和代码并停用复制，不会把旧结果当成新结果复制走。

Adobe Color 用的是另一种色环：同一个 #3B82F6，它的三角配色给出 #C5F53B 和 #F5533B，HSL 色环给出 #F63B82 和 #82F63B。两者没有对错，本工具写明用的是哪种色环。Adobe Color 和 Coolors 能锁定颜色后随机换其余颜色、从图片取色、把配色存进账号，本工具不做这些；从图片取色请用 图像配色提取。