有人私信问我「颜色转换校验」，我让他先把具体场景说清楚。他回了一长串，我看完了发现：他真正卡住的点，跟他以为的完全不是一回事。
把基础理清
颜色模型：RGB(红绿蓝加色，屏幕用)、CMYK(青品黄黑减色，印刷用)、HEX(RGB的十六进制#RRGGBB)、HSL(色相饱和度亮度)、HSV(色相饱和度明度)。HEX转RGB：#FF8800→(255,136,0)每两位十六进制转十进制。本地运行的工具数据不上传，比那种要注册要登录的安全得多。复杂操作分步做，每步验证，比一口气跑完再排查问题靠谱。
开始正式操作
HSL比RGB直观调色：色相0-360(红0绿120蓝240)、饱和度0-100%、亮度0-100%。明度50%加饱和度100%是纯色，调亮加明度、调暗减明度。WCAG对比度要求文字与背景对比度≥4.5:1(AA)或7:1(AAA)。工具的价值在于省事，但前提是你理解输入输出，否则只是黑盒。工具更新换代快，但底层原理不变，搞懂原理比追新工具重要。
实算一遍
先了解原理。颜色转换校验这类工具，背后都有明确的算法或规则。搞懂原理不是为了自己实现，而是知道输入什么、输出什么、哪些因素影响结果，用起来才心里有底。生成类工具(密码/UUID/随机数)一定用crypto安全随机源，Math.random不安全。工具选型看四点：本地运行、免费无广告、操作简单、结果可复制。
具体怎么做
拆成几步走，照着做就行：
- 第一步：确认源格式：HEX(#RRGGBB)、RGB、HSL、HSV、CMYK
- 第二步：HEX转RGB：每两位十六进制转十进制(#FF8800→255,136,0)
- 第三步：RGB转HEX：三个十进制各÷16转两位十六进制
- 第四步：HSL调色：色相0-360选颜色、饱和度0-100%、亮度0-100%
- 第五步：检测对比度：文字与背景对比度≥4.5:1(AA)或7:1(AAA)
几个要注意的地方
下面这几条比正文还重要，别跳过：
- WCAG正文对比度≥4.5:1(AA级)、大字≥3:1、AAA级≥7:1
- HSL比RGB直观，调色用HSL，CSS支持hsl(0,100%,50%)
- RGBA的A是透明度0-1，0全透明1不透明
- 印刷用CMYK减色，屏幕用RGB加色，转换会有色差
要是觉得这篇有用，转给同样被「颜色转换校验」绕晕的朋友。少一个人踩坑，就值了。
常见问题
【HEX和RGB怎么换算？】HEX是RGB的十六进制表示，#FF8800→FF=255、88=136、00=0→RGB(255,136,0)。每两位十六进制转十进制，反过来十进制÷16转十六进制。
【HSL和RGB哪个调色方便？】HSL直观，色相0-360选颜色、饱和度和亮度调浓淡。RGB调三个通道不直观。设计师常用HSL，CSS支持hsl(0,100%,50%)格式。HSV类似但明度定义略不同。
【颜色转换校验怎么用？】打开对应在线工具，按提示输入数据，点击计算或转换即可出结果。工具在浏览器本地运行，数据不上传，安全免费。具体操作看工具页的使用说明。
【文字和背景对比度多少才合格？】WCAG标准：正文文字对比度≥4.5:1(AA级)、≥7:1(AAA级)、大字(18pt+)≥3:1。对比度低影响可读性和无障碍。在线工具可检测，取色器常集成对比度检测。
