颜色格式转换怎么用:HEX、RGB、HSL 之间怎么换
输入 #2F6FEB 或 rgb(47, 111, 235),会同时得到三种写法和一个亮度值。调样式时不用切到设计软件,也能快速判断按钮上该用白字还是黑字。
什么时候需要转换颜色格式
设计稿给的是 HEX,CSS 里想调透明度或做渐变时更习惯用 rgb();从旧项目里翻出一组 HSL 值,想贴进只认 HEX 的配置。格式不统一时,改一个颜色要在几个工具之间来回换算。
另一个常见需求是判断对比度:拿到品牌色,想知道按钮上用白字还是黑字更清楚。工具会给出相对亮度和建议,虽然只是粗判,但足以排除明显看不清的搭配,省得靠肉眼反复试。
- 设计稿 HEX 转 CSS 的 rgb()
- 旧项目 HSL 值转 HEX
- 判断按钮上该配深色还是浅色文字
怎么用才不出错
支持 #RGB、#RRGGBB 和 rgb(12, 34, 56) 三种输入,#abc 会先展开成 #aabbcc 再换算。rgba() 只取前三个通道,透明度被忽略;8 位十六进制(#RRGGBBAA)会提示格式错误,需要先去掉后两位。
HSL 只能作为输出,不能作为输入。相对亮度按 WCAG 的系数(0.2126R + 0.7152G + 0.0722B)换算后除以 255,超过 0.5 建议用深色文字,否则用浅色。它没有做 sRGB 线性化,所以只是粗判,不等于对比度比值。
- 只支持 HEX 和 rgb(),HSL 只能输出
- rgba 的透明度会被忽略,8 位 HEX 报错
- 亮度超过 0.5 建议深色文字
局限与替代
它不做 WCAG 对比度计算,也不检查是否达到 4.5:1 这类门槛。正式的无障碍验收需要在浏览器开发者工具或专门的对比度检查器里,按前后景色的实际组合计算比值。
也不支持 CMYK、HSV、Lab、P3 等色彩空间,不做色域映射和 gamma 校正。印刷、品牌色管理这类需求,应该用设计软件或色彩管理工具;网页配色用它快速换算足够了。
- 不算 WCAG 对比度比值
- 不支持 CMYK、Lab、P3 等空间
- 印刷和品牌色请用色彩管理工具
常见问题
支持透明色和 HSL 输入吗?
只支持一部分。rgba() 只取前三个通道,透明度会被忽略;8 位十六进制(#RRGGBBAA)会提示格式错误。HSL 只能作为输出,不能作为输入。
相对亮度怎么用?
按 WCAG 的系数(0.2126R + 0.7152G + 0.0722B)换算后除以 255,超过 0.5 就建议用深色文字,否则用浅色。它只是粗判,正式的无障碍检查请核对 WCAG 的对比度比值。
为什么 3 位写法也能算?
#abc 会先展开成 #aabbcc 再换算,和设计软件的行为一致。所以 #f00 和 #ff0000 得到的结果完全相同。