主色色阶与深色模式映射器
仿照 Tailwind / Radix 的做法：给一个主色，向白、向黑派生出 50–900 十档色阶，每档标注黑白文字的 WCAG 对比度是否达标，并生成深色模式 token 映射（50↔900 互换）与含深色方案的 CSS 变量。全部本地计算，不上传。
1主色
输入合法 HEX（作为 500 档），或点色块快捷试色。
2深色模式映射
浅色档位与深色档位按明度对称互换，组件代码只引用语义 token。
| Light token | Dark 取值 | 说明 |
|---|
3十档色阶
✓ AA = 对比度 ≥ 4.5，AA 大字 = ≥ 3。点击色块复制 HEX。
4导出 CSS 变量
包含 :root 十档变量与深色模式覆盖块，可直接粘贴使用。
8 组品牌色预设 × 十档对照与深色审计
点选一组品牌色即把主色换过去；下方 SVG 板把 8 组配色的 50–900 十档一次排开，一眼比较冷暖与明度节奏。深色审计表逐项核对浅色与深色语义 token 在真实底色上的 WCAG 对比度。
| 语义 token | 色值 | 对比度 | 结论 |
|---|---|---|---|
| 请输入合法主色后显示深色审计 | |||
方案管理 · 数值对比 · 导出
调好的参数可存成方案随时载入，也能生成可分享链接；结果里的数值列会自动画成对比图，并支持导出 CSV / JSON。
还没有留言，来抢沙发吧！