轻工具

配色方案生成器

基于一个主色自动生成和谐配色方案，涵盖单色、近似、互补、三色与明暗阶梯，点击色块一键复制色值。

在取色器中选择颜色，或直接在文本框中输入 #RRGGBB / #RGB，下方色板会实时更新。

主色
单色配色
近似色
互补色
三色
明暗阶梯

点击任意色块即可复制该颜色的 HEX 值；所有配色基于主色在 HSL 色环上旋转或明度调整自动生成。

使用说明

  1. 在颜色选择器中点选一个主色，或在右侧文本框中直接输入十六进制值（如 #4f46e5 或 #345）。
  2. 页面会围绕主色自动生成五组色板：单色、近似色、互补色、三色，以及加白加黑的明暗阶梯。
  3. 鼠标点击任意色块即可把该颜色的 HEX 值复制到剪贴板，色块中央显示的就是对应的色值。
  4. 需要整体带走全部颜色时，点击「复制全部 HEX」，每行一个色值，可直接粘贴到设计文档或代码中。
  5. 单色与明暗阶梯都基于主色，但算法不同：单色保持色相与饱和度只调明度，明暗阶梯则向纯白与纯黑混合。

常见问题

五种配色方案分别是什么意思？
单色配色只改变主色的明暗深浅；近似色取色环上相邻 30° 内的颜色，柔和协调；互补色取主色对面的颜色，对比强烈；三色是在色环上相隔 120° 的三个颜色；明暗阶梯则是把主色逐步混入白色与黑色。
生成的颜色是怎么计算的？
工具先把 HEX 转为 HSL（色相、饱和度、明度）模型：近似与互补通过旋转色相角度得到，单色调整明度，明暗阶梯则把颜色向白色或黑色方向线性混合，最后统一转回 HEX 显示。
为什么我输入的颜色提示无法识别？
请使用 3 位或 6 位十六进制格式，例如 #4f46e5、#fff 或直接输入 4f46e5；支持 # 开头的写法。带 8 位透明度（如 #RRGGBBAA）暂不支持。
复制的色值可以用在哪里？
HEX 是网页与设计软件通用的颜色表示，可直接用于 CSS（color、background）、Figma、Photoshop 的取色器中，无需任何转换。

使用步骤

  1. 选定主色或输入 HEX 值

    在取色器中挑选主色，或直接在文本框输入 HEX 值，井号可省略。支持 #4f46e5 这类 6 位与 #345 这类 3 位写法。五组色板实时重算。

  2. 浏览五组自动配色方案

    工具围绕主色生成单色配色、近似色、互补色、三色与明暗阶梯五组色板。五组分别对应统一、柔和、强烈、活泼与层次五种观感。

  3. 点击色块复制对应 HEX 值

    每个色块内直接显示对应 HEX 值，点击任意色块即可复制该颜色。色值可用于 CSS、Figma 或其他设计软件的调色板。

  4. 一键复制全部色值

    需要整组使用时点击「复制全部 HEX」，所有颜色按每行一个复制，可直接粘贴进设计文档或代码里的颜色变量表。

工具详细介绍

配色方案生成器从你给定的一个主色出发，自动推导五组和谐色板。单色配色只改明度，保持色相统一。近似色在色轮上偏移约 30 度。互补色取正对面的颜色，对比最强。三色相隔 120 度。明暗阶梯把主色向纯白与纯黑线性混合。计算先把 HEX 转为 HSL，旋转色相或调整亮度后再转回 HEX。

适合搭建网页或 App 的 UI 配色：用主色生成按钮、悬停、边框与背景的整套色值。做海报、演示文稿时也能快速确定辅助色。结果只是色轮上的机械推导。定稿前建议把文字与底色的关键组合放进对比度检查工具验证可读性，再把最终色值交给团队。

原理与背景

五组色板来自色轮上的固定几何：近似色偏移约 30 度，互补 180 度，三色 120 度。这套角度关系沿自二十世纪初伊顿的配色体系，至今仍是界面配色的默认起点。五组分别对应统一、柔和、强烈、活泼与层次五种观感。文本框只接受 3 位或 6 位 HEX，井号可以省略。工具把 HEX 转成 HSL 后只旋转色相分量，饱和度与亮度保持不动，所以每组结果与主色的浓淡一致。想要更克制的界面，整体降低饱和度后再微调。

明暗阶梯的算法是与纯白、纯黑做线性插值：tint 把每个通道向 255 推进，shade 按 (1-t) 的比例缩小。线性插值的结果在人眼里偏灰，因为人眼的亮度感知近似伽马曲线而非直线。专业设计系统常改用感知均匀的 OKLCH 空间生成阶梯。本工具的线性结果用于快速分层已经够用，精修主题时再手动微调。

典型使用场景

  1. 只凭 Logo 反推配色

    手上只有 Logo、没有规范手册时，取主色生成五组色板。互补组给行动按钮，明暗阶梯给背景与分隔线，几分钟得到可用的第一版配色。

  2. 演示文稿快速定调

    演示文稿只需要一个主色加两级浅色背景。从明暗阶梯取最浅的两档做章节页与内容页，全稿风格统一，不必逐页重新配色。

  3. 主题变量初版草稿

    把复制出来的 HEX 改名成 primary、surface、border 一类变量贴进代码，作为主题文件的骨架。命名可以按项目习惯调整，后续在其上迭代，不用从零开始。

使用技巧

  • 文本框只接受 3 位或 6 位 HEX，不支持 #RRGGBBAA 这种带透明通道的 8 位写法。
  • 互补色组适合做主按钮与强调色，明暗阶梯适合划分背景、卡片与分隔线的层级。
  • 生成的浅色未必满足 WCAG 对比度要求，用作正文底色前先用对比度检查器验证一遍。

注意事项

  • 角度是固定推导不是答案

    近似色固定偏 30 度，三色固定 120 度，遇到与品牌辅助色冲突时，应以人工调整为准。工具给的是几何起点，不是唯一的标准答案。

  • 互补色大面积用会刺眼

    互补对比适合按钮与小面积强调，直接铺成大背景会让两色互相打架。需要大面积使用时先降饱和度，或改用更柔和的近似色方案。

  • 深主色 shade 组不可用

    主色本身很深时，向黑色插值的 shade 组几乎全黑，拉不开层次。这类配色只用 tint 组做层级，深色留给描边与阴影，按钮文字仍可读。

相关工具