调色板生成器

这是调色板生成器。选一颗底色 HEX、一种配色关系（互补、邻近、分裂互补、三角、四方、单色）和风格。锁定色块后再生成：#3B82F6 的互补色会留下这颗蓝，其余重配。

锁定后生成会留下该色。2–8 颗。箭头换序。色块上的 HEX 可改。

色带预览（色盲模式只改这里的显示）。

点一下即可复制

每对颜色的对比度。≥4.5 标 AA，适合正文。 · 要看正文对比度？用 颜色转换

示例，点色块填入

调色板生成器

这是调色板生成器：从一颗 HEX 按色轮关系配出一组色，思路接近 Adobe Color 和 Figma 的生成器。互补是对面（H + 180°）。邻近是 ±20°、±40°。分裂互补是 ±150°。三角是 120° / 240°。四方是 90° / 180° / 270°。单色保住 H、S，只改 L。#3B82F6 的互补会带上这颗蓝和它的对面。粉彩 / 鲜艳 / 低饱和 / 大地色改饱和度和明度，不改色相规则。HEX 转 Tailwind 是找默认类名；加白加黑是一颗色往白或黑混。本页是多色方案。

如何使用

  1. 填底色 HEX（或取色 / 色盘）。选配色关系和风格，再点生成。随机会先换一颗底色。
  2. 锁定色块后，下次生成会留下它、重配其余。2–8 颗。加入颜色把当前 HEX 追加到末尾。× 删除（不能少于 2）。箭头换序。
  3. 色块上的 HEX 可改。撤销 / 重做走最近 40 步。色相 / 饱和度 / 明度滑块同时挪未锁定的颜色。
  4. 芯片和复制结果复制 HEX 列表。另有 CSS 变量和 JSON。下载 PDF 用 HEX 标注色块。
  5. 对比度表是每对的 WCAG 比值，≥4.5 标 AA。正文叠在背景上的完整检查在颜色转换。色盲预览只改色带显示（Protanopia、Deuteranopia、Tritanopia）。

配色、风格和边界

色相按 HSL 算。#3B82F6 的 H 约 217°，互补大约 37°。粉彩降低 S、提高 L；鲜艳提高 S；低饱和降低 S；大地色中等 S、偏低 L。空着生成用 #3B82F6。超过 8 颗会提示。PDF 标注保持 HEX，内置字体盖不住所有文字。数据不上传，没有账号，也没有 AI 输入框。

用在哪里

  • 品牌或界面 token：主色、强调、底、字色。
  • 先看两颗色过不过 AA，再决定正文色。
  • 把 PDF 或 :root 变量交给同事。

常见问题

和加白 / 加黑一样吗？

不一样。加白加黑是一颗 HEX 往白或黑混。本页是在色轮上放几颗不同色相。

随机还会保留锁定吗？

会。锁定留下，未锁定的被换掉。

色盲预览能当诊断吗？

不能。只是粗略的 RGB 矩阵预览，不是医学模拟。

相关工具

加白加黑：加白 / 加黑。对比度：颜色转换。216 色表：Web 安全色。