配色设置

支持 HEX、RGB(A)、HSL(A)，例如 #136CE9 或 hsl(215, 85%, 49%)。

配色规则

点击色卡复制色值；锁定的颜色在重新生成时保留。配色使用不透明色，透明输入仅保留 RGB 色值。

调整颜色后即可查看结果。

配色方案

:root {
  --color-1: #136CE9;
  --color-2: #0FABBA;
  --color-3: #40B5EF;
  --color-4: #1131D1;
  --color-5: #6457F1;
}

配色方案生成器

输入种子色，生成邻近色、互补色、三角配色或同色系方案，可锁定保留颜色、复制单色与 CSS 变量，支持 JSON 导出，方便探索网页和品牌配色。

整理：喜爱工具箱 · 更新于 · 示例内容仅供排版参考，请替换为实际信息。

使用说明

三步完成操作

  1. 01 · 设置种子色

    填写颜色代码或选择随机种子。

  2. 02 · 选择配色

    切换配色规则，可锁定需要保留的颜色。

  3. 03 · 导出方案

    点击色卡复制单色，或复制 CSS 变量、下载 JSON。

常见问题

使用前先了解这些

锁定后会发生什么？

锁定色卡会在修改种子、规则或随机生成时保留；恢复默认会解除锁定。

配色是否保证可读性？

配色是基于 HSL 色轮的建议，不能保证任意两色组合均满足对比度要求。正式使用前请用颜色工具检查。