颜色格式转换工具

在线转换 HEX、RGB、HSL 颜色格式,粘贴任意一种即可得到全部三种,并实时预览。全部在浏览器内完成。

所有处理均在你的浏览器内完成,数据不会上传。

  • HEX#2f6df6
  • RGBrgb(47, 109, 246)
  • HSLhsl(221, 92%, 57%)

HSL 按整数存储,因此转回 RGB 时可能有约 1% 的偏差。

使用方法

  1. 粘贴任意一种支持的颜色格式。
  2. HEX、RGB、HSL 三种结果立即更新,上方有色块预览。
  3. 点你需要那一行的复制

三种格式描述的是同一批颜色,只是方式不同

HEX 和 RGB 本质是同一个东西换了身衣服。 两者都给出红、绿、蓝三个通道 0 到 255 的强度: 十六进制把每个通道写成两位,RGB 写成十进制数字。#2f6df6rgb(47, 109, 246) 逐字节完全 相同,所以它们之间的转换是精确且可逆的。

HSL 则是一个真正不同的模型。 它把颜色描述成色环上的位置(色相,0–360°)、有多鲜艳 (饱和度,0–100%)、有多亮(明度,0–100%)。这一点在实际工作中很关键,因为它更接近人 思考颜色的方式。「同一个蓝,但浅一点」在 HSL 里就是改一个数字,在十六进制里则是一道谜题。

这也是为什么做配色方案时 HSL 才是趁手的工具:把色相固定在 220,明度从 95% 逐级降到 20%, 你就得到了同一个蓝色的一整套深浅变化。想靠手改 #2f6df6 凑出这个效果,基本靠猜。

代价是精度。因为 HSL 用整数书写,转回 RGB 时会取整,可能和出发点差约 1%。用于显示这个差别 肉眼不可辨;但如果你需要一个值经得起反复往返,就把它保存成十六进制。

常见问题

可以粘贴哪些格式?

三位缩写(#fff)、六位十六进制(#2f6df6)、八位带透明度(#2f6df680)、rgb()、rgba()、hsl() 和 hsla()。开头的 # 可以省略,空格也不影响。

为什么 HSL 转回 RGB 不完全一样?

HSL 按惯例用整数书写,比如 hsl(221, 92%, 57%)。三个值都取整会丢一点精度,转回来可能偏差约 1%。而 HEX 和 RGB 描述的是同一组字节,往返是精确无损的。

rgba() 里第四个值是什么?

透明度,0 表示完全透明,1 表示完全不透明。八位十六进制的最后两位承载同样的信息(00 到 ff),所以 #ff000080 是不透明度约 50% 的红色。

什么时候该用 HSL 而不是 HEX?

当你需要「推导」颜色而不是「挑选」颜色的时候。HSL 把色相和明度分开,你可以固定色相、只调明度,从而得到一整套协调的配色——这件事靠改十六进制数字几乎做不到。

数据会上传吗?

不会。转换只是浏览器里跑的几行算术。