配色方案与对比度检测
输入一个主色,马上得到几种常用配色方案和深浅梯度,能导出成 CSS 变量;下面还能按 WCAG 标准检测两个颜色的对比度。只在你的浏览器里计算,不会上传。
使用限制
- 配色只是几何规则(色相旋转)的结果,不代表好看或适合你的品牌;HSL 色相不是人眼感知均匀的,黄色、绿色附近旋转后的“明暗感”可能不一致,请以实际效果为准。
- 对比度按 WCAG 2.x 的相对亮度公式计算(sRGB 线性化,系数 0.2126、0.7152、0.0722,对比度 = (L1+0.05)÷(L2+0.05))。阈值出自 WCAG 2.2:正文 AA 4.5:1、AAA 7:1;大号文字(18pt 及以上,或 14pt 加粗及以上)AA 3:1、AAA 4.5:1;界面组件和图形对象 3:1(成功准则 1.4.11)。
- 对比度显示四舍五入到两位小数,达标与否用未取整的真实值判断;如果显示值恰好够、真实值略低,会标明“实际略低于要求”。
- 只支持不透明的 sRGB 颜色,不处理半透明叠加,也不替代 WCAG 2.2 里其它无障碍要求(例如不能只靠颜色传达信息)。APCA 等新的感知对比度算法不在本工具范围内。
- 输入只支持 3 位或 6 位 HEX。
1. 生成配色方案
深浅梯度
保持色相和饱和度不变,亮度依次取 10%、20% … 90%(HSL)。
导出为 CSS 变量
2. 对比度检测(WCAG 2.2)
| 项目 | 要求 | 结果 |
|---|
大号文字示例 Aa 你好
正文大小的文字示例:The quick brown fox 你好世界 0123456789
正文大小的文字示例:The quick brown fox 你好世界 0123456789
使用方法
- 在“主色”里输入 HEX 色值(3 位或 6 位),或用右边的取色框选择,点“生成配色”。每个色块上写着色值,点一下就复制。
- 配色方案都是把主色的 HSL 色相旋转固定角度得到,饱和度和亮度不变:互补 +180°;邻近 -30°、+30°;三等分 +120°、+240°;分裂互补 +150°、+210°;四等分 +90°、+180°、+270°。
- 最下面是 CSS 变量,点“复制 CSS”粘贴到样式表里。
- 对比度检测:填文字色和背景色,点“检测”,得到对比度和 WCAG 各项是否达标。
常见问题
#777777 在白底上为什么不达标?
它对白色的对比度约为 4.48:1,低于正文 AA 要求的 4.5:1。把灰色略微调深到 #767676,就是 4.54:1,刚好达标。
互补色、三等分有什么区别?
互补是色相环上正对的两个颜色;邻近是左右相邻各 30°;三等分是相隔 120° 的三个颜色;分裂互补是互补色两侧各偏 30° 的两个颜色加主色;四等分是相隔 90° 的四个颜色。
我的颜色会被上传吗?
不会,计算在你的浏览器里完成。