💡 在线取色器
HSL 色环 · 屏幕取色 · WCAG 对比度检测
#3F51B5
WCAG 对比度检测
检测文字色与背景色的对比度，判断是否符合无障碍标准。
示例文字 The quick brown fox jumps over the lazy dog. 1234567890
HSL 色环 · 屏幕取色 · WCAG 对比度检测
检测文字色与背景色的对比度，判断是否符合无障碍标准。
点击"屏幕取色"按钮（需Chrome 95+或Edge浏览器），浏览器会进入取色模式，鼠标移到屏幕任意位置点击即可采集该像素颜色。Firefox/Safari暂不支持，可用下方色相环+SV方块选色。
WCAG（Web内容无障碍指南）要求文字与背景色对比度达标：AA级正文≥4.5:1，大字≥3:1；AAA级正文≥7:1。本工具检测所选颜色作为文字/背景时的对比度等级，帮助设计无障碍页面。
先拖动色相环选择色调（H），再在方块中横向拖动选饱和度（S）、纵向拖动选明度（V）。方块右上角为最纯色，左下角为黑色，左上角为白色。
用EyeDropper屏幕取色可以采集屏幕上任意位置的像素颜色，包括网页、图片、软件界面。但部分应用窗口可能因系统权限无法取色，建议在浏览器页面内取色。
对比度不是越高越好，要看用途。正文建议至少4.5:1（AA），大字或图表3:1即可。高对比并不等于好看，但文字与背景对比不足会造成阅读困难，尤其对视障用户。
可以。复制HEX或RGB值粘到CSS即可。本工具还会同步给出HSL/HSV，方便在CSS里做渐变、透明度等设置。所有取色都在本地完成，不会上传。
浏览器安全限制导致部分系统下EyeDropper无法采集桌面或其他应用窗口，只能取浏览器页面内颜色。这是浏览器层面的限制，非工具问题，可改用色相环方块选色。
取色器本质是把屏幕上的颜色映射成数值。色相环选H、方块选S和V，本质是HSV色彩空间的人机交互，比直接输RGB直观。
| 分量 | 含义 | 取值范围 |
|---|---|---|
| H色相 | 颜色种类 | 0-360° |
| S饱和度 | 鲜艳程度 | 0-100% |
| V明度 | 明暗程度 | 0-100% |
对比度是文字与背景亮度的比值，数字越大越容易辨认。WCAG要求网页文字满足最低对比度，尤其照顾低视力和色弱用户。
| 标准 | 正文 | 大字/UI |
|---|---|---|
| AA(最低) | ≥4.5:1 | ≥3:1 |
| AAA(更高) | ≥7:1 | ≥4.5:1 |
对比度不是简单的"深浅差"，而是按人眼对三色的感知加权计算相对亮度(L)，再取比值：对比度=(较亮L+0.05)/(较暗L+0.05)。
| 文字色 | 背景色 | 对比度 | 等级 |
|---|---|---|---|
| #FFFFFF(白) | #000000(黑) | 21:1 | AAA |
| #FFFFFF(白) | #3F51B5(靛蓝) | 约8.6:1 | AAA |
| #333333(深灰) | #FFFFFF(白) | 约12.6:1 | AAA |
| #999999(浅灰) | #FFFFFF(白) | 约2.8:1 | 仅AA大字 |
| #FFFFFF(白) | #FFC107(琥珀) | 约1.9:1 | 不通过 |
| 格式 | 示例 | 说明 |
|---|---|---|
| HEX | #3F51B5 | 16进制网页色 |
| RGB | 63, 81, 181 | 红绿蓝0-255 |
| HSL | 232, 48%, 48% | 色相饱和度亮度 |
| HSV | 232, 65%, 71% | 色相饱和度明度 |
1. 拖动色相环选择色调，在方块中点击/拖动选择饱和度与明度。
2. 或点击"屏幕取色"采集屏幕任意像素（Chrome/Edge）。
3. 下方实时显示HEX/RGB/HSL值，点击复制。
4. 在对比度检测区设置文字色与背景色，查看WCAG等级。