深色模式配色转换
Dark Mode Palette
从一个颜色做出 50–950 的色阶，再镜像成一套深色色阶，让每一对变量保持原来的对比度。
通过镜像从浅色色阶推导出深色色阶：50 级变成 950，100 变成 900，依此类推。这是唯一保持 token 名称*契约*的推导，所以在浅色模式下通过 WCAG 的一对，在深色模式下以同样的比值通过，一个针对这个色阶写的组件不需要改动。这和色阶生成是同一个页面，只是打开在深色标签页上。
基准色
它的色相和彩度是色阶的种子；它的明度决定哪一档被标成你挑的那个。
色阶
每一档的明度目标不是在这里定的，是从装好的 Tailwind 包里量出来的各个有彩色系的平均值。
深色模式
50 档变成 950 档，100 变成 900，以此类推。令牌名字的含义没变——500 仍然是中间调——照着这套色阶写的组件一点都不用改。
浅色
50
P3
100
P3
200
P3
300
P3
400
P3
500
P3
600
700
800
900
950
深色
50
100
200
300
400
500
600
700
800
900
950
为什么要翻转: 一对令牌之间的对比度保住了
- 900 上的 50: 浅色 8.93 · 深色 12.73
- 800 上的 100: 浅色 6.68 · 深色 7.19
- 950 上的 200: 浅色 11.16 · 深色 7.19
令牌名字的含义没变，所以照着这套色阶写的组件一点都不用改。
导出
要的不是一个色相的色阶，而是一组色相？配色方案生成会按配色规则给你做一组。想找出跟这些颜色最接近的 Tailwind 令牌，Tailwind 最接近色查找会用 ΔE 量给你看。
怎么用
填入基色
一个颜色。先构建浅色色阶，再从它推导深色的，所以两者出自同一个种子，而不是分开维护。
选策略
镜像是默认值，也是有对比度论据支撑的那个。“整体变深”改为把每一级往下移三个位置，这保持了顺序，所以从浅到深的渐变不会反转，代价是最深的几级。“镜像并压暗”是镜像再把彩度进一步拉低。
为大面积填色压低彩度
深色表面上的饱和色会发光、发颤，面积越大效果越糟。把彩度拉下来是保守的做法；如果这个色阶只用于小的点缀和文字，让它留在 100% 附近。
读验证面板
开着镜像时，它并排打印三对 token 在两种模式下的 WCAG 比值。这是在你面前被检验的主张，而不是被断言的主张。
一次导出两个色阶
CSS 形式把浅色色阶输出在 `:root` 里，深色的放在 `prefers-color-scheme: dark` 块里，所以整个主题一次粘贴。
常见问题
能粘贴我已有的浅色配色吗？
不能整套粘。这个页面取一个颜色并从它构建两条色阶，所以一套手调过各级的现有配色，一次喂一个颜色是撑不过去的——你会得到十一个规则的级，不是你的十一个。现有配色比规则性更要紧时，一个 token 一个 token 地转换，在对比度检测里核对每一对。
镜像精确地保持对比度吗？
接近，不精确。色阶在 OKLCH 明度上对称，而 WCAG 对比度按相对亮度计算，后者不是前者的线性函数——所以比值彼此接近而不相同。验证面板打印两个数字，你能看到对你的颜色差距有多大，而不是凭信任接受这个主张。
该用纯黑做深色背景吗？
通常不。纯黑配浅色文字把对比度推到最大，而在 LCD 上它产生的光晕让小字更难读，不是更容易。这里的深色带预览在很深的灰上，就是这个原因。OLED 手机是真黑确实换来点东西的唯一情况，换来的是省电。
为什么这是和色阶生成分开的页面？
它不是——这是同一个工具，深色标签页已经打开，因为“给我做一套深色配色”和“给我做一条 50-950 色阶”是不同的人以不同的问题问来的。一个页面上的一切在另一个上都有。
可以从这些接进来
接下来
这些工具吃得下当前工具的产出，结果可以直接送过去。
色阶生成
Tint & Shade Scale
从一个颜色生成 50–950 的明度色阶，步进在感知上均匀，可直接当设计变量用。
对比度检测
Contrast Checker
按 WCAG 2 和 APCA 给前景色和背景色这一对打分，并推荐最接近的能通过的颜色。
CSS 变量提取
CSS Token Extractor
从样式表里把颜色、间距、圆角和字体值抽出来，并提议一套自定义属性。
配色方案生成
Palette Generator
从一个基准色出发，按互补、三分和邻近色规则生成协调的配色。
颜色格式转换
Colour Format Converter
在 HEX、RGB、HSL、HWB、LAB、LCH 和 OKLCH 之间换算同一个颜色，并给出最接近的已知色名。
颜色拾取器
Colour Picker
在 OKLCH 色板上选色，也可以用屏幕吸管或从上传的图片里取色，并按任意表示法复制出来。