配色方案生成
Palette Generator
从一个基准色出发，按互补、三分和邻近色规则生成协调的配色。
取一个颜色，按和谐规则旋转它的色相，同时保持 OKLCH 的明度和彩度，这样三等分配色回来时不会有一个成员明显比其他的暗。同一条规则在下面用 HSL 画一遍，这是看清为什么这很要紧最快的办法。导出之前，它会检查有没有任何两个色块在色觉缺陷下坍缩成一个，以及每一个能否承载文字。
基准色
任何 CSS 写法都行。配色会保住这个颜色在 OKLCH 里的明度和彩度，只转动色相。
配色规则
左右各 30° 的邻居。读起来是同一个色族，所以层级得靠明暗差来撑，色相撑不住。
OKLCH
#0094c3L 62.3 C 0.188 H 230
#3b82f6L 62.3 C 0.188 H 260
#886ceeL 62.3 C 0.188 H 290
同一条规则用 HSL 画一遍，作对比
#3be0f6L 83.3 C 0.132 H 209
#3b82f6L 62.3 C 0.188 H 260
#523bf6L 51.4 C 0.260 H 278
两条色带都按同样的角度转动色相。OKLCH 那行让感知上的明度保持不变，跨度是 0.0000；HSL 那行的跨度却是 0.3191，因为 HSL 说的“明度”跟感知无关：纯黄和纯蓝都自称 50%，在 L* 上却差了 65分以上。这不是渲染出来的假象，而是一道谁也没要过的明度斜坡，焊死在每一组 HSL 配色里。
明度跨度
0.0000
在 sRGB 之外
3个里有 1个
有 1个色块没能把基准彩度保持在 sRGB 之内，放弃了 0.064。十六进制给的是映射之后的值；导出里的 oklch() 值才是广色域屏幕真正显示出来的颜色。
实际用起来撑得住吗？
每种模拟色觉下最接近的一对，用 ΔE OKLab 表示
- 红色盲0.026—— 这两个会并到一起
- 绿色盲0.021—— 这两个会并到一起
- 蓝色盲0.012—— 这两个会并到一起
- 全色盲0.013—— 这两个会并到一起
在白底和黑底上的 WCAG 对比度
- 白底 3.49·黑底 6.02至少在其中一种底色上能当正文
- 白底 3.68·黑底 5.71至少在其中一种底色上能当正文
- 白底 3.87·黑底 5.43至少在其中一种底色上能当正文
在模拟里会并到一起的两个颜色，不能成为区分两样东西的唯一线索——再加上形状、标签或者一级明度差。对比度检测会给出某一对颜色完整的 APCA 判定。
导出
CSS 和 Tailwind 两种形式导出的是 oklch()，十六进制作为注释附在后面——在导出这一步把精度丢掉，等于把在 OKLCH 里计算的理由一笔勾销；而拿到 oklch() 的浏览器，在画得出来的地方就会把广色域的颜色如实画出来。
要的不是一组色相，而是从其中一个生成完整的 50–950 色阶？色阶生成会按实测的明度曲线给你做一条。
怎么用
填入你已有的颜色
通常是品牌色，任何 CSS 记法。其他一切都从它的色相、明度和彩度推导，所以这是塑造整套配色的那一个决定。
选规则，再调它的展开程度
互补是一个相对的色相；类似是相邻色；三等分是 120° 的三个；分裂互补把一对互补色缓和一下。展开滑块缩放这些偏移——1 是教科书的间距，低于它整套读起来像一个色系。单色和明暗改为要求一个级数，因为它们变化的是明度而不是色相。
比较两条色带
OKLCH 那一行下面的明度差距从构造上就接近零。HSL 那一行按同样的角度旋转，它的差距却不是零，因为 HSL 明度不是感知性的——纯黄和纯蓝都自称 50%。如果对你这个特定的基色来说两条色带看起来一样，那它们就是一样的，用哪条都行。
导出之前读“撑不撑得住”面板
它报告每种模拟视觉类型下最接近的一对（ΔE OKLab），以及每个色块对白和对黑的 WCAG 对比度。一对标为会坍缩的，绝不能是区分两种状态的唯一东西——加一个形状、一个标签，或者一级明度。
按你代码用的前缀导出
CSS 变量、Tailwind `@theme` 块、SCSS、JSON token 或 SVG 色板。CSS 形式输出 `oklch()`，十六进制作为注释放在旁边。
常见问题
导出里的十六进制和 oklch() 是不同的颜色。哪个对？
都对，对应不同的显示器。保持基色彩度会把一个色块推到 sRGB 之外时，十六进制是色域映射后的版本——放弃彩度以放进去——而 `oklch()` 值是实际计算出的颜色，广色域屏幕会显示它。面板会说明每个被裁切的色块丢了多少彩度。
和谐规则意味着配色会好看吗？
不意味着。这些是色相环上的角度，而几何不是品味。一条规则给你的是一套站得住脚的起始集，每个色相背后有理由，这比一次挑一个的三个颜色值钱。关于比例的判断——哪个是大面积、哪个是 5% 的点缀——完全不在这里。
能粘贴一套我已有的配色来检查吗？
这里不能——这个页面从一个颜色出发，推导其余的。对于某一对颜色，对比度检测接受两个颜色并给出完整结论。要从这里某个色块生成色阶，色阶生成工具能做。
什么算“这两个坍缩了”？
模拟之后 ΔE OKLab 低于 0.06，大致是两块填色一眼看上去不再能分开的地方。模拟本身是 Brettel 式的矩阵方法：一个关于常见缺陷的模型，不是对任何特定个人的测量，对更罕见的类型或后天视力损失也不做任何说明。
可以从这些接进来
接下来
这些工具吃得下当前工具的产出，结果可以直接送过去。
色阶生成
Tint & Shade Scale
从一个颜色生成 50–950 的明度色阶，步进在感知上均匀，可直接当设计变量用。
对比度检测
Contrast Checker
按 WCAG 2 和 APCA 给前景色和背景色这一对打分，并推荐最接近的能通过的颜色。
CSS 变量提取
CSS Token Extractor
从样式表里把颜色、间距、圆角和字体值抽出来，并提议一套自定义属性。
图片配色提取
Palette Extractor
从图片里提取 N 种代表色，导出为 HEX、CSS 变量或 ASE 色板。
颜色格式转换
Colour Format Converter
在 HEX、RGB、HSL、HWB、LAB、LCH 和 OKLCH 之间换算同一个颜色，并给出最接近的已知色名。
颜色拾取器
Colour Picker
在 OKLCH 色板上选色，也可以用屏幕吸管或从上传的图片里取色，并按任意表示法复制出来。