HEX 转 RGBA

这是 HEX 转 RGBA 转换器。把设计稿里的 HEX 转成 CSS 用的 rgb() / rgba()。透明度可以是 0–1、0–255 或百分比。#FF573380 就是 rgba(255, 87, 51, 0.5)。

示例，点色块填入

点一下即可复制

一次转多颗颜色。每行一个，也可以写成 #3B82F6, #FF573380。点填入示例会填三行，下面出现对照表。

HEX 转 RGBA

这是 HEX 转 RGBA 转换器：把设计稿里的 HEX 转成 CSS 用的 rgb() / rgba()。支持 3 位 #F53、6 位 #FF5733、带透明的 8 位 #FF573380。#FF573380 就是 rgba(255, 87, 51, 0.5)。旁边的 HEX 转 RGB 没有透明通道；HSL 和对比度请用颜色转换。

如何使用

  1. 粘贴 HEX、HEX8、rgb()、rgba()，或 255，87，51 这种中文逗号列表。短写 #F53 会展开成 #FF5533。
  2. 拖 R、G、B、A 滑条，或改数字框。透明度可选 0–1、0–255 或百分比。
  3. 点通道芯片只复制那一项。rgb() / rgba() / CSS 变量旁的复制复制该行。复制结果复制 rgba()。
  4. 显示示例填入 #FF573380。下面示例色块是 #FF5733、#F53、#FF573380、#3B82F6、#00000080 和全透明白。
  5. 从屏幕取色在浏览器支持 EyeDropper 时出现。批量一行一个或逗号分隔。全部清除会清空。

注意事项

8 位 HEX 最后两位是透明度：十六进制 80 是 128，128/255 ≈ 0.502，不是整的 0.5。透明度为 1 时 CSS 变量用 6 位 HEX，否则用 HEX8。也接受 rgba(255 87 51 / 50%) 这种写法，以及全角逗号。非法 HEX 会提示，不会把异常抛到页面上。相关：HEX 转 RGB、透明度叠底、颜色转换。

用在哪里

  • 把 Figma 的 HEX 写成 CSS 遮罩用的 rgba()。
  • 核对短写 #RGB 展开后的通道。
  • 复制单个通道，或 --color 变量，贴进样式表。

常见问题

短写 #F53 能用吗？

可以。每位加倍：#F53 变成 #FF5533，再转成 rgb(255, 85, 51)。

HEX 的 80 为什么不是透明度 0.5？

0x80 是 128。128 ÷ 255 ≈ 0.502。按字节或百分比想，就把透明度切到 0–255 或 %。

这和十六进制转十进制一样吗？

不一样。颜色 HEX 是三个或四个通道。任意整数请用 HEX 转十进制。