配色与对比度检查 使用方法
- 1
从一个颜色开始
输入或选取基础色，再选择邻近色、三角配色或分裂互补色等配色方案，也可以直接生成随机配色。
- 2
锁定并微调
再次随机前，先锁定喜欢的色块；也可以直接编辑任意色块，或从一张照片中提取五种主色。
- 3
检查可读性
打开“对比度”，按 WCAG 2.2 的 AA 和 AAA 标准测试文字与背景，应用建议的修正方案，并预览调色板在色盲视觉下的效果。
- 4
导出
复制 CSS 变量、Tailwind v4 主题或 v3 配置、SCSS 或 JSON（含 50–950 色阶），也可以下载 PNG 色板。
限制与 Pro
全部免费：5 色调色板、6 种配色方案、不限次数的随机生成和导出、取色图片最大 50 MB、PNG 色板宽 1600 像素。
关于 配色与对比度检查
调色板生成器会生成一组五色方案，并提供设计系统所需的配套内容。配色方案基于 HSL 色轮旋转基础色相：邻近色在两侧各偏移 30°，互补色加入相对的色相，分裂互补色取相对色相两侧的两个色相，三角配色选取相隔 120° 的三个色相，四角配色采用 90° 的正方形分布，单色则保持同一色相并生成五个明度层级。随机模式会保留已锁定的色块，而图片提取会在 OKLab 空间中对照片像素聚类，找出最常见的五种差异明显的颜色。
在“色阶”中，每个颜色都可以生成 OKLCH 下 11 级的 50–950 色阶，最接近你所选颜色的那一级就是原色值；也可以生成 Material 3 HCT 体系的 13 个色调，以及 Material 主题会派生出的五组关键色板。对比度检查采用 WCAG 2.2 的亮度公式，比值从不四舍五入进位，并且只调整明度、保持色相不变，给出最接近且达标的颜色。网格会显示调色板中每一对颜色与白色、黑色的对比度。
色盲模拟采用 Machado 矩阵，涵盖红色盲、绿色盲、蓝色盲和全色盲，并标出会彼此混淆的色块。导出时会按色相为颜色命名，也支持自定义名称。本工具不判断颜色是否适合某个品牌；模拟结果只是对色觉障碍者所见效果的近似，不能代替真实用户测试。
隐私
所有颜色计算、对比度检查和图片分析都在当前标签页中完成：用于取色的照片会从你的磁盘读入一个小画布，不会上传。调色板可以保存在页面地址中，复制链接即可重新打开；服务器上不会保存任何内容。
功能
六种配色方案与图片取色
基于一个基础色生成从邻近色到四角配色的方案，支持带锁定的随机配色，也可提取照片的主色。
WCAG 2.2 对比度与修正建议
覆盖正文、大号文字和界面图形的 AA 与 AAA 标准，一键即可换成最接近的达标颜色。
面向开发的导出
支持 CSS 变量、Tailwind v4 和 v3、SCSS 与 JSON，颜色格式可选 HEX、RGB、HSL 或 OKLCH，另可导出 PNG 色板。