配色生成器。

从你手上的颜色（或随机一个）出发，得到五个搭配和谐的颜色：primary、secondary、tertiary、neutral 和 surface。锁定喜欢的颜色，再生成一次，只换其余的。全程在浏览器里运行，你选的颜色不会上传。

从一个颜色开始配色方式

按空格键生成一组新配色。

primary#A8401Foklch(0.51 0.145 37.449)
secondary#008FAAoklch(0.6 0.145 217.449)
tertiary#E5A155oklch(0.76 0.123 67.449)
neutral#62514Boklch(0.45 0.025 37.449)
surface#FFF4F1oklch(0.975 0.012 37.449)

#A8401F
#008FAA
#E5A155
#62514B
#FFF4F1

在你的浏览器里运行，放进来的内容不会上传，也不会保存。

怎么生成配色方案

选一个起始颜色。 点色块选色，或者直接输入 HEX、rgb()、hsl()、oklch() 格式的颜色，它会成为 primary。也可以直接点「生成」，从一个随机颜色开始，这个颜色不会太浑浊，也不会太刺眼。
选一种配色方式：类似色、互补色、三角配色、分裂互补或单色。它决定 secondary 和 tertiary 用哪些色相。
再生成一次：点「生成」，或者在没有选中输入框时按空格键，就会得到新的变化。没锁定的颜色会换。如果 primary 没锁定，起始颜色也会随机换一个，想保留你选的颜色就把它锁上。
锁定喜欢的颜色。 每个色块上的锁，会让这个颜色在之后每次生成时都保持不变，所以你可以一个颜色一个颜色地把配色搭出来。
复制结果。 每个色块上都标出角色名、HEX 色值和 OKLCH 值，HEX 旁边有复制按钮。色块下面的三个导出标签，把整套配色写成你需要的格式。

这五个颜色

primary 是你的起始颜色。
secondary 和 tertiary 是点缀色，色相由你选的配色方式决定。secondary 是中等明度，tertiary 更浅。选「单色」时，它们是你的颜色的一个更深和一个更浅的版本。
neutral 是带一点你的颜色色调的深灰色，用于次要文字和说明。
surface 是同样带一点色调的近白色，用于背景。

能复制什么

HEX：五个色值，一行一个，顺序同上。
Tailwind v4 @theme：一个 @theme 代码块，把 --color-primary、--color-secondary、--color-tertiary、--color-neutral 和 --color-surface 定义成 oklch() 值。粘贴进你的 CSS 文件，就能用 bg-primary、text-neutral 这样的类名。如果项目用的是 shadcn/ui（它已经定义了其中几个同名变量），请改用 shadcn 主题生成器。
DESIGN.md 颜色：一个 colors: 代码块，五个角色都用 HEX 色值，可以放进 DESIGN.md 的 front matter。

在 Codex 里使用

光有配色不够，要写在 Codex 会读的地方才有用。DESIGN.md 有七种颜色角色，比这个工具多两个：on-primary（primary 上的文字色）和 on-surface（正文主色）。补全它们的做法：

把「DESIGN.md 颜色」复制到你的 DESIGN.md 里，或者把五个 HEX 色值填进 DESIGN.md 生成器。生成器会一并让你设置 on-primary 和 on-surface，并指出对比度低于 4.5:1 的颜色组合。
用对比度检测检查要放文字的颜色搭配。
在 AGENTS.md 里指向这个文件，写法见 DESIGN.md 指南。

如果想让 Codex 把这一套补全，把色值贴进提示词：

从配色生成 DESIGN.md

这是我选好的颜色：primary [HEX]、secondary [HEX]、tertiary [HEX]、neutral [HEX] 和 surface [HEX]。把它们写进仓库根目录 DESIGN.md 的 colors 部分。再补上 on-primary 和 on-surface，各选白色或接近黑色，让 on-primary 在 primary 上、on-surface 在 surface 上的对比度至少达到 4.5:1。如果某一组做不到，不要改我的颜色，告诉我是哪一组，以及最小的修改办法。然后只用这些颜色设计 [首页]，并列出你额外用到的东西。

常见问题

免费吗？

免费，不用注册，想生成多少套配色都可以。

我选的颜色会上传吗？

不会。配色在你的浏览器里生成，不会发送，也不会保存，所以想留下的配色记得离开页面前先复制。网站只统计工具被用过，不会记录你选的颜色。

它是怎么生成配色的？

它在 OKLCH 色彩空间里计算，在这个空间里，明度每变化相同的幅度，看起来的差别也大致相同。你的起始颜色成为 primary，配色方式决定 secondary 和 tertiary 的色相偏离它多远：类似色是左右各 30°，互补色是 180° 和 30°，三角配色是 120° 和 240°，分裂互补是 150° 和 210°，单色则不偏移色相。点缀色的色度（鲜艳程度）和你的颜色大致相当，只是限制在一定范围内，所以偏灰的起始色会得到偏灰的点缀色。其余四个颜色每次的明度和色度也会略有变化，所以同一个起始色、同一种配色方式，每次生成都是一个新的变化。

它会检查对比度吗？

不会。它不会检查某个颜色放在另一个颜色上是否看得清，所以放文字的搭配，请先用对比度检测测一下再定下来。