输入主色，实时生成互补/三角/类似等方案，并查看色阶、渐变、WCAG与色差
互补色
h, h+180
类似色
h-30, h, h+30
三角配色
h, h+120, h+240
分裂互补
h, h+150, h+210
四方配色
h, h+90, h+180, h+270
矩形配色
h, h+60, h+180, h+240
单色色阶
single hue lightness steps
单色色阶
Lab插值，近似Tailwind50–950
双色渐变
在Lab空间在主色与终点色之间插值
WCAG对比度
白字、黑字分别叠在当前主色上的对比度与AA/AAA等级
白字 · 3.7:1
- AA 普通文本： 未通过
- AAA 普通文本： 未通过
- AA 大号文本： 通过
- AAA 大号文本： 未通过
黑字 · 5.1:1
- AA 普通文本： 通过
- AAA 普通文本： 未通过
- AA 大号文本： 通过
- AAA 大号文本： 通过
色差ΔE00
CIEDE2000色差，数值越小越接近
颜色A
颜色B
45.42
显著差异
图片主色提取
纯前端处理，图片不上传；单文件≤5MB
图片仅在本地浏览器处理，不会上传到服务器
尚未提取主色
使用说明
- 每次进入页面会随机生成一个主色，也可手动输入HEX、用颜色选择器或屏幕取色。
- 互补色相隔180°；类似色在主色两侧约±30°；三角配色相隔120°；分裂互补在互补色两侧；四方/矩形在色相环上均匀分布。
- 色阶ramp用Lab插值从浅到深生成品牌色阶；渐变在两色之间做Lab插值，适合做背景或按钮过渡。
- WCAG2.1：普通文本AA需≥4.5:1、AAA需≥7:1；大号文本AA≥3:1、AAA≥4.5:1。本页展示白字与黑字分别在当前主色上的对比。
- ΔE00（CIEDE2000）衡量两色感知差：一般≤1几乎不可辨，1–2需专业观察，>3较易察觉，>6差异明显。
- 图片主色提取会缩小采样后在本地聚类，并用ΔE去重；点击色块可设为主色。请使用≤5MB的PNG/JPEG/WebP/GIF等常见格式。
- 点击任意色块可复制HEX。