颜色工具在线工具
颜色工具支持 HEX、RGB、HSL 色值互转，提供系统取色面板、屏幕取色和明暗梯度，并按 WCAG 2.1 标准检查文字与背景的对比度是否达到 AA、AAA 要求。
功能介绍
颜色工具把 HEX、RGB、HSL 三种常用色值格式的互转、系统取色面板、屏幕取色和 WCAG 对比度检查集中在同一页面。任意一种格式输入后其余格式即时同步，页面同时按当前色相生成明暗梯度，方便快速找到同色系的深浅变化。
常见任务包括把设计稿中的 HEX 色值转换为 RGB 或 HSL 写法、用屏幕取色快速获取页面上任意元素的颜色、检查文字颜色与背景色是否满足 WCAG 无障碍对比度、基于品牌色生成同色系的明暗梯度。这些场景看似相近，但输入格式、处理边界和目标系统要求可能不同，使用前应先确认数据来源与期望输出，再根据页面结果做实际验证。
通过色块、屏幕取色或直接输入任一格式选定颜色，三个输入框会实时互转并可单独复制。对比度检查区选择前景色和背景色后，页面按 WCAG 2.1 相对亮度公式计算对比度，并对照 AA 与 AAA 在正常文本和大号文本下的门槛给出通过与否的结论。页面现有说明还回答了以下常见疑问：“HEX、RGB、HSL 应该用哪种格式？”三种格式表示同一种颜色。HEX 在设计稿和配置中最常见，RGB 便于按通道理解和程序处理，HSL 通过色相、饱和度、亮度调整更直观，可按使用场景选择。 “对比度多少才算达标？”按 WCAG 2.1，正常文本 AA 级要求对比度不低于 4.5:1，AAA 级不低于 7:1；不小于 18pt（或 14pt 加粗）的大号文本，AA 级放宽到 3:1，AAA 级为 4.5:1。
使用方法
- 点击色块打开系统取色面板、使用屏幕取色，或在 HEX、RGB、HSL 任一输入框中粘贴色值；
- 查看其余格式的同步结果，复制需要的写法到样式表、设计稿或配置文件；
- 需要同色系变化时，在明暗梯度中点击更浅或更深的色块继续调整；
- 把文字色和背景色填入对比度检查区，确认目标场景满足 AA 或 AAA 要求后再投入使用。
注意事项
- 屏幕取色依赖浏览器的 EyeDropper API，目前主要在 Chrome、Edge 等浏览器可用，不支持时仍可使用系统取色面板。
- 对比度结论针对纯色文字与纯色背景；文字叠加在图片或渐变上时，应按最不利区域另行评估。
- 所有转换和计算都在浏览器本地完成，色值不会上传服务器；HSL 取整可能带来 1 个色阶内的微小偏差。
常见使用场景
- 把设计稿中的 HEX 色值转换为 RGB 或 HSL 写法
- 用屏幕取色快速获取页面上任意元素的颜色
- 检查文字颜色与背景色是否满足 WCAG 无障碍对比度
- 基于品牌色生成同色系的明暗梯度
常见问题
HEX、RGB、HSL 应该用哪种格式？
三种格式表示同一种颜色。HEX 在设计稿和配置中最常见，RGB 便于按通道理解和程序处理，HSL 通过色相、饱和度、亮度调整更直观，可按使用场景选择。
对比度多少才算达标？
按 WCAG 2.1，正常文本 AA 级要求对比度不低于 4.5:1，AAA 级不低于 7:1；不小于 18pt（或 14pt 加粗）的大号文本，AA 级放宽到 3:1，AAA 级为 4.5:1。