颜色格式转换

颜色格式转换工具接收一个颜色值，把它在 HEX、RGB、HSL 三种写法之间互相换算，并同步给出一个色块预览。日常写 CSS、对照设计稿、和设计师沟通时，同一种颜色常以不同格式出现：设计稿标注 #3498db，旧代码或接口里写成 rgb(52,152,219)，而调明暗又更适合用 HSL。手动做 hex转rgb 或 rgb转hex 既容易算错，又打断思路。把颜色粘进来，三种表示一次性算齐，随取随用。

从原理上看，HEX 本质就是 RGB 的十六进制写法：#3498db 拆成 34、98、db 三段，分别是红、绿、蓝三个通道的取值，对应十进制的 52、152、219，前者只是把每个 0-255 的通道用两位十六进制表示而已，所以 hex 转 rgb 只是一次进制换算。RGB 到 HSL 则复杂一些：先把三个通道归一化到 0 到 1，用最大值和最小值算出明度 L 与饱和度 S，再根据哪个通道最大确定色相 H 落在哪个区间，最终得到 hsl(204, 70%, 53%) 这种以角度和百分比描述的写法。三种格式描述的是同一个颜色点，只是坐标系不同，颜色格式转换是纯数学映射，不存在信息损失，HSL 的百分比只会有四舍五入的取整。

举个常见例子：拿到设计稿上一个 #2ecc71 的主题色，想让 hover 状态更亮一点，先用 hsl转换 看到它是 hsl(145, 63%, 49%)，把明度 L 从 49% 提到 60% 就得到一个协调的浅色，比在 RGB 里同时瞎调三个数字靠谱得多。再比如排查线上样式，浏览器计算样式里显示 rgb(52, 152, 219)，而设计规范用 HEX 记录，直接做 rgb转hex 立刻得到 #3498db，一眼就能核对是不是同一个色。写页面主色、边框、阴影时，也可以先定好一个 HEX，再一键拿到 RGB 值填进 box-shadow 或 gradient。

使用时有几个边界要留意：十六进制支持 3 位缩写（#abc 等价于 #aabbcc）和 6 位两种写法，开头的 # 可写可不写、字母不区分大小写；但带透明度的 8 位 HEX 以及 rgba、hsla 里的 alpha 通道不在换算范围内，本工具只处理不含透明度的纯色。RGB 输入按 0-255 取值，超出会被当作无效；HSL 的色相是 0-360 度、饱和度和明度是百分比，别和 RGB 的 0-255 数值搞混。此外屏幕上的色块预览只用于肉眼比对，受显示器色彩配置影响，不能替代取色器或色差仪做精确校色。

颜色格式转换是一个免费的在线工具，打开网页就能用，不用下载也不用注册。平时大家搜的“颜色转换”、“hex转rgb”、“rgb转hex”，说的都是这个。