工具介绍
颜色代码转换器可以实现HEX、RGB、HSL三种常用颜色格式的互相转换,支持透明度Alpha通道设置,实时预览颜色,支持一键复制结果。
使用方法
- 可以通过颜色拾取器直接选择颜色,自动转换为所有格式
- 输入HEX代码,支持带#和不带#,支持8位HEX(带透明度)
- 分别输入RGB三通道数值(0-255)和Alpha透明度(0-1),自动转换为其他格式
- 分别输入HSL色相(0-360)、饱和度(0-100%)、亮度(0-100%)和透明度,自动转换为其他格式
- 点击任意结果后的「复制」按钮复制单个值,点击「复制CSS代码」复制完整CSS背景属性代码
转换原理
- HEX转RGB:HEX的每两位16进制数对应一个通道的十进制数值,例如#FF0000中FF对应R=255,G=0,B=0
- RGB转HSL:通过归一化RGB分量,计算最大最小值,然后根据公式转换为色相H、饱和度S、亮度L
- HSL转RGB:根据HSL分量重新计算出对应的RGB分量值
- 带Alpha透明度的颜色会转换为RGBA或HSLA格式,8位HEX格式最后两位对应Alpha值(00-FF对应0-1)
注意事项
- 所有输入范围请严格遵守:RGB 0-255,H 0-360,S/L 0-100,Alpha 0-1
- 转换结果仅供前端开发使用,不同设备显示颜色可能存在差异