十六进制透明度aa是00–ff范围的十六进制值，非小数或百分比直译；0.5对应7f（127/255≈0.498）或80（128/255≈0.502），而非50（80/255≈0.314）。

为什么0.5不能直接对应50？

因为AA是十六进制值，不是小数或百分比的直译。写#ff000050时，50被解析为十六进制 → 十进制是 80，再除以 255 得到实际 alpha ≈ 0.314，远低于预期的 0.5。真正对应 0.5 的是 7F（127 / 255 ≈ 0.498）或更常用且四舍五入后更稳的 80（128 / 255 ≈ 0.502）。

Math.round(alpha * 255)为什么不能省略？

浮点运算误差会让 0.3 * 255 得到 76.49999999999999，parseInt 或直接 toString(16) 若不先取整，可能向下截断成 76（4c），而正确应为 76.5 → 77 → 4d。差一位在浅色背景上就 visibly 偏灰或偏亮。

• 0.3 * 255 === 76.49999999999999 → 错误地转成 "4c"
• 必须用 Math.round(0.3 * 255) === 76 → "4c"（这次碰巧对）
• 但 0.3999 * 255 ≈ 101.9745 → Math.round 得 102 → "66"，这才是 #0b79b966 的来源

为什么设计师给的30%透明度不能直接填30？

“30% 透明度”是业务语言，不是技术输入。它通常指“70% 不透明度”，即 alpha = 0.7；但有些设计系统定义为“透明度 = 30%”，即 alpha = 0.3。必须确认上下文——没有统一映射，30 在十六进制里是 0x30 = 48 → alpha ≈ 0.188，既不是 0.3 也不是 0.7。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• 别信“30% 就填 30”，那是把十进制当十六进制硬套
• 别信“30% 就填 cc”，cc 是 204 / 255 ≈ 0.8，接近 80% 不透明度
• 真实换算链条只能是：alpha（小数）→ Math.round(alpha * 255) → .toString(16).padStart(2, "0")

为什么#RRGGBBAA在预处理器和工具链里总出问题？

PostCSS、Sass、styled-components 等多数 CSS 工具默认只识别 3/6 位 HEX，遇到 8 位会报错或静默忽略。Figma 导出颜色也不带 alpha，补两位全靠手输，大小写（FF vs ff）、漏零（a 而非 0a）、顺序错位（把 BBAA 写成 BBA）都会导致渲染失败，且 DevTools 里常显示为划掉的无效声明，排查成本高。

最易被忽略的是：你看到颜色“好像对了”，其实只是浏览器 fallback 到前面 6 位或继承了父级样式——必须打开 DevTools 的 Computed 面板，看最终生效的 background-color 值是不是你写的那串 8 位，否则所有换算都白做。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！