HEXA 读透明度
适合把设计稿里的 8 位 HEX 还原成 RGBA。
输入
HEX / HEXA 输入
#FF6347CC
输出
RGBA 输出
rgba(255, 99, 71, 0.8)
8 位 HEXA
#FF6347CC
颜色转换
透明度颜色转换器（HEX / RGBA）
输入 6 位 / 8 位 HEXA 或直接调节 RGBA 与透明度，系统会实时输出 HEX、8 位 HEXA、RGBA 和 CSS 写法，适合网页蒙层、半透明标签和设计交付场景。
双向转换
既可以输入带透明度的 HEXA，也可以直接调节 RGBA 与透明度滑杆，结果会实时同步到多种前端常用颜色格式。
支持 3 位、4 位、6 位和 8 位 HEX，例如 #F63、#F638、#FF6633、#FF6633CC。
RGBA 里的透明度 `A` 最终会同步成 8 位 HEXA 中的 `AA` 通道，适合网页蒙层、标签底色和半透明品牌色场景。
- HEX
- #FF6347
- 8 位 HEXA
- #FF6347B8
- RGBA
- rgba(255, 99, 71, 0.72)
- 透明度
- 72%
- CSS 背景色
- background-color: rgba(255, 99, 71, 0.72);
转换规则
透明度颜色最常见的两种前端表达形式是 `rgba()` 和 8 位 `HEXA`。
- `HEX` 是不带透明度的纯颜色值，格式通常为 `#RRGGBB`。
- `HEXA` 会在末尾增加 `AA` 通道，格式为 `#RRGGBBAA`，其中 `00` 表示完全透明，`FF` 表示完全不透明。
- `RGBA` 中的 `A` 是 0 到 1 的透明度值，适合直接写进 CSS、阴影和半透明背景。
适合哪些场景
透明度颜色转换最常见于设计交付、前端样式开发和状态层叠效果制作。
- 把设计稿中的半透明色块转成网页可直接使用的 `rgba()` 或 8 位 `HEXA`。
- 制作卡片蒙层、按钮 hover 态、提示标签底色和玻璃拟态背景。
- 把品牌主色快速扩展成不同透明度层级，用于描边、阴影和状态反馈。
常见透明度颜色参考
下面这组预设可以帮助你快速核对 HEX、HEXA、RGBA 和透明度百分比之间的对应关系。
名称HEX8 位 HEXARGBA透明度
番茄红 72%#FF6347#FF6347B8rgba(255, 99, 71, 0.72)72%
海盐蓝 90%#1E88E5#1E88E5E6rgba(30, 136, 229, 0.9)90%
森林绿 65%#2E7D32#2E7D32A6rgba(46, 125, 50, 0.65)65%
墨夜蓝 40%#1F2937#1F293766rgba(31, 41, 55, 0.4)40%
使用建议
如果你的颜色最终要用于真实页面，不要只看透明度数值，还要结合实际背景一起验证视觉效果。
- 静态设计 token 更适合沉淀成 8 位 `HEXA`，样式拼接和兼容旧代码时则更适合 `rgba()`。
- 半透明文字、标签和蒙层会受背景影响很大，建议最终再配合对比度检测工具一起验证可读性。
- 如果还要继续调明度或饱和度，可以先转回纯色值，再配合 HSL、HSV 工具做主题扩展。
示例输入输出
示例同时覆盖从 HEXA 读透明度和从 RGBA 反推 8 位 HEXA 两个方向。
RGBA 生成 HEXA
适合把半透明品牌蓝转换成统一交付格式。
输入
RGBA 输入
rgba(30, 136, 229, 0.4)
输出
8 位 HEXA
#1E88E566
展示用 HEX
#1E88E566
常见问题
透明度颜色转换常见问题集中在 8 位 HEXA 和 RGBA 之间的换算关系。
8 位 HEXA 和 RGBA 表达的是同一件事吗？
本质上是的。两者都在描述颜色和透明度，只是一个用十六进制写法，一个用十进制加小数写法。
RGBA 里的透明度和 HEXA 里的最后两位是什么关系？
RGBA 的透明度通常是 `0-1`，而 HEXA 最后两位是 `00-FF`。它们都表示透明度强弱，只是进制不同。
什么时候更适合用 RGBA，什么时候更适合用 8 位 HEXA？
如果你要频繁调透明度，RGBA 会更直观；如果项目大量使用 HEX 变量，8 位 HEXA 会更统一。
相关工具
你还可以继续使用其他已经可用的颜色转换和配色工具。