调色板生成器
从一个基准 HEX 颜色生成阴影、浅色和协调配色，每个颜色都带可复制的 HEX 值。
正在加载工具…
调色板生成器 — 输入一个 HEX 基准色，立即得到围绕它的完整调色板——更浅的色调、更深的阴影、互补色，以及邻近色与三元色组合。每个色块都显示其 HEX 值，并附带一键复制按钮。全部在浏览器中完成，颜色绝不会发送到服务器。
调色板生成器 是什么？
配色方案生成器是一款免费的在线调色工具，专为需要围绕单个基准色构建完整配色的设计师和前端开发者打造。只需输入一个 HEX 颜色，它就能基于 HSL 色彩运算瞬间推导出更浅的色调、更深的色调、互补色，以及邻近色和三角色等和谐配色——每个色块都标注 HEX 值并配有一键复制按钮。你可以用它挑选 UI 配色、构建明暗色阶，或为品牌寻找搭配的强调色。它集 HEX 配色生成器、明暗色阶生成器和互补色查找器于一身。
如何使用 调色板生成器
- 在“基准色 (HEX)”输入框中以 #rrggbb 或 #rgb 格式输入基准色，或点击大号取色色块进行可视化选取。
- 将“每侧色阶数”设为 2、3 或 4，以控制在基准色两侧各生成多少个浅色调和深色调。
- 查看“明暗色调”区域：浅色调显示在基准色上方，深色调显示在下方，每个都带有标签（Lighter N / Base / Darker N）并标注 HEX 值。
- 查看“和谐配色”区域，了解互补色、邻近色（+30度 / -30度）和三角色（+120度 / -120度）。
- 点击任意色块旁（或基准色输入框旁）的复制按钮，即可将该 HEX 值复制到剪贴板。
示例
由纯红得到的互补色
输入
#ff0000
输出
#00ffff
由纯红得到的三角色
输入
#ff0000
输出
#00ff00
构建品牌明暗色阶
输入你的品牌蓝（例如 #4f86f7），并将“每侧色阶数”设为 4，即可在基准色上方得到四个浅色调、下方得到四个深色调，组成一个 9 级色阶，你可以逐个把颜色复制到设计令牌中。
常见问题
- 可以输入哪些颜色格式？
- 基准色以 HEX 值输入，支持 #rrggbb（六位）或 #rgb（三位）简写两种格式。如果输入的值不是有效的 HEX 颜色，会显示“Invalid HEX color”提示且不生成配色。所有输出色块均以 #rrggbb HEX 形式显示。
- 它会生成多少个深浅色调？
- 你可以选择每侧 2、3 或 4 个色阶。工具会生成相应数量的浅色调（向白色插值）和同样数量的深色调（向黑色插值），加上位于中间的基准色。
- 包含哪些和谐配色？
- 它会输出互补色（色相旋转 180 度）、两个邻近色（+30 度和 -30 度）以及两个三角色（+120 度和 -120 度），全部通过在 HSL 中旋转基准色的色相计算得出。
- 可以可视化选色而不用手动输入 HEX 吗？
- 可以。点击内置取色器的大色块即可选取颜色；HEX 输入框会自动更新，配色也会随你的更改即时重新计算。
- 我的颜色数据会被上传到任何地方吗？
- 不会。一切都完全在你的浏览器中通过本地色彩运算完成——任何颜色值都不会被发送到服务器，因此它可离线使用，并能为你的配色保密。