无需登录 数据私有 本地保存

HEX转RGBA工具 - 透明度叠加快速转换

17
0
0
0

HEX ↔ RGBA 转换 & 透明度叠加计算器

支持8位HEX解析、透明度叠加混合计算,前端开发与设计必备

HEX ↔ RGBA 转换
#
支持 3位 #RGB、6位 #RRGGBB、8位 #RRGGBBAA
R: 99 G: 102 B: 241 α: 1.00
透明度叠加计算器

计算半透明颜色叠加在背景色上的最终视觉效果

#
快捷前景:
#
快捷背景:
前景
#6366F1
+
背景
#FFFFFF
=
叠加结果
#6366F1
常见问题与知识点
8位HEX格式在标准6位HEX(#RRGGBB)基础上增加了2位Alpha通道,格式为 #RRGGBBAA。AA取值范围00-FF(对应十进制0-255),表示透明度:00为完全透明,FF为完全不透明。例如 #FF000080 表示红色在约50%透明度。现代浏览器(Chrome 62+、Firefox 49+、Safari 10+)均支持此格式。
透明度叠加采用线性插值(Alpha Blending)公式:
结果 = 前景色 × α + 背景色 × (1 - α)
对R、G、B每个通道分别计算。例如红色rgba(255,0,0,0.5)叠加在白色(255,255,255)上:
R = 255×0.5 + 255×0.5 = 255
G = 0×0.5 + 255×0.5 ≈ 128
B = 0×0.5 + 255×0.5 ≈ 128
结果 ≈ rgb(255,128,128),即浅红色。
常见场景包括:① UI设计中使用了半透明覆盖层,需要导出不含透明度的纯色资源;② 前端开发中需要在固定背景上模拟半透明效果以优化性能;③ 将设计工具(Figma/Sketch)中的半透明颜色转换为CSS兼容格式;④ 计算元素在不同背景上的视觉一致性;⑤ 颜色主题系统中处理叠加色彩。
HEX:简洁紧凑,适合纯色场景,兼容性极佳;8位HEX可表达透明度但旧浏览器不支持。RGBA:直观易读,透明度控制精确(0-1小数),所有现代浏览器完美支持。前端开发中推荐:纯色优先使用HEX,需要透明度时使用RGBA或8位HEX(需注意兼容性)。
3位HEX(#RGB)每个字符重复一次即可扩展为6位:
#F80 → #FF8800(F→FF, 8→88, 0→00)
#A3C → #AA33CC
这种方式保持了颜色的色相和大致亮度,是CSS规范定义的标准扩展方式。本工具自动识别并转换3位HEX格式。
Alpha通道有两种常见表示:
0-1小数(RGBA格式):0=完全透明,1=完全不透明,如rgba(255,0,0,0.5)
00-FF十六进制(8位HEX):00=完全透明,FF=完全不透明,如#FF000080
转换公式:HEX_Alpha = round(小数Alpha × 255),反之为 小数Alpha = HEX_Alpha / 255。例如0.5×255≈128=0x80。