rgba(255,99,71,0.6)转#rrggbbaa需先计算alpha:Math.round(0.6*255)=153→"99",R/G/B分别转两位十六进制得"ff"、"63"、"47",拼接为"#ff634799";#0b79b966的alpha为parseInt("66",16)/255≈0.3999。

rgba 的 alpha 小数和 8 位 hex 的后两位不是线性直译关系,必须用 Math.round(alpha * 255) 转换,否则 0.3 → 76(4c)会错成 76.5 → 77(4d),差一位就偏色。
rgba(255, 99, 71, 0.6) 怎么转成 #rrggbbaa?
核心是把小数 alpha 拉到 0–255 整数域再转十六进制:
-
0.6 * 255 = 153,四舍五入得153 -
153.toString(16)→"99"(注意补零逻辑:10→"0a",不是"a") - R、G、B 分别转两位十六进制:
255→"ff"、99→"63"、71→"47" - 拼接为
"#ff634799",全部小写、无空格、严格 8 位
#0b79b966 的 alpha 值到底是多少?
后两位 66 是十六进制,不是百分比或小数:
parseInt("66", 16) === 102-
102 / 255 ≈ 0.3999,即约 39.99% 不透明度(≈40%) - 别误读成“66% 透明”或“alpha=0.66”——那是错的
- 常见值:
80≈ 0.502,7f≈ 0.498,cc≈ 0.804
为什么不能直接用 Math.floor 或 parseInt(alpha + "00", 16)?
这两种写法在边界值上会系统性出错:
立即学习“前端免费学习笔记(深入)”;
-
Math.floor(0.00393 * 255) === 0,但正确应为Math.round(0.00393 * 255) === 1→"01" -
parseInt("0.3" + "00", 16)会解析成parseInt("0.300", 16)→NaN,直接崩 - alpha = 0.001 时,
0.001 * 255 = 0.255→ 四舍五入为0,对应"00";截断就永远得不到"01" - 所有 JS 实现必须用
Math.round(alpha * 255),且结果强制.toString(16).padStart(2, "0")
浏览器不报错,但样式静默失效的坑在哪?
8 位 hex 对格式零容忍,错一位就整条声明被丢弃,控制台无提示:
-
#ff00008(7 位)、#FF000080(大写)、#ff0000 80(空格)、"#ff000080"(引号)全无效 - Safari 12 及更早、IE 全系完全忽略,且不会 fallback 到前一条 rgba()——除非你显式写两遍,且 rgba() 在前
- PostCSS、styled-components、Figma 导出等工具对
#rrggbbaa支持不一,有些会直接删掉后两位 - 最易被忽略的是不可见字符:复制颜色值时可能带 Unicode 零宽空格,
.trim()无法清除,要用正则/[\u200B-\u200D\uFEFF]/g清洗


















