rrggbbaa 仅 chrome 119+/edge 119+/opera 95+ 原生支持，firefox/safari 完全不识别；a 为十六进制字节值（非百分比），需换算为 alpha（如 78→120/255≈0.47）；预处理器默认报错，须字符串拼接绕过；静态样式优先用，动态场景仍需 rgba()。
Chrome 119+ 才支持 #RRGGBBAA 写法
不是所有浏览器都能直接写 #1a2b3c4d 当透明色用。目前只有 Chrome 119 及以上、Edge 119+、Opera 95+ 原生支持这种新语法；Firefox 和 Safari 完全不识别，会当无效值丢弃。
常见错误现象：color: #ff000080 在 Firefox 里变成黑色或继承父级颜色，DevTools 里该声明直接被划掉。
- 别在生产环境全局替换旧写法，尤其涉及兼容老版本桌面端或 ios Safari 时
- 可以用
color: rgba(255, 0, 0, 0.5)或color: #ff000080并存，但注意 css 解析顺序：后写的有效，前写的会被忽略（如果浏览器不支持） - postcss 插件如
postcss-color-functional-notation不处理#RRGGBBAA，它只管rgb()/hsl()函数式写法
#RRGGBBAA 的 A 是字节值，不是百分比或小数
很多人下意识把最后两位当成“50% 透明度”，其实不是。#12345678 中的 78 是十六进制字节，对应十进制 120，换算成 alpha 是 120 / 255 ≈ 0.47，不是 0.78。
使用场景：需要精确复用设计稿中给出的 ARGB 值（比如 Sketch 或 figma 导出的颜色），直接粘贴就能用，不用手动换算。
立即学习“前端免费学习笔记（深入）”；
-
#00000000= 完全透明，#000000FF= 完全不透明黑 - 别写
#00000050以为是 50% 透明——实际是80 / 255 ≈ 31% - 想快速估算：
80≈ 50%，CC≈ 80%，FF= 100%
和 rgba() 比，#RRGGBBAA 更紧凑但不可动态计算
纯 CSS 里写 background: #1a2b3c4d 比 background: rgba(26, 43, 60, 0.3) 少打十几个字符，也避免了数值精度问题（比如 rgba(0,0,0,0.3) 渲染可能略偏灰）。
但一旦需要 js 动态生成颜色，或者 sass/less 里做透明度叠加，#RRGGBBAA 就没法直接参与运算——你得先拆成字节再合并，而 rgba() 天然支持变量传入。
- 静态样式表、图标色、品牌色定义等场景，优先用
#RRGGBBAA - 组件库中需支持主题透明度调节？继续用
rgba($color, $alpha)或 CSS 自定义属性 +color-mix() - 构建工具不会自动帮你把
rgba()转成#RRGGBBAA，也没必要转
CSS 预处理器和构建工具目前基本不识别 #RRGGBBAA
Sass、Less、stylus 默认把 #12345678 当作非法颜色字面量报错，因为它们的词法解析器还卡在“六位或三位”老规则里。
错误信息示例（Sass）：Error: Invalid CSS after "#12345678": expected "{", was ";" —— 实际不是语法错，是解析器根本没认出这是个颜色。
- 临时绕过：用字符串拼接，如
#{'"#12345678"'}（Sass）或@{color: ~"#12345678"}（Less），但失去颜色函数支持（比如不能darken()） - PostCSS 插件如
postcss-preset-env目前也不处理该语法，它只降级color-mix()和hwb() - 最稳做法：在预处理器里保持
rgba()，仅在最终 CSS 输出层手写或脚本注入#RRGGBBAA
CSS 里加透明度这件事，从来就不是换个写法那么简单——浏览器支持断层、工具链滞后、人脑对十六进制 alpha 的直觉偏差，三者叠在一起，#RRGGBBAA 看似简洁，实则是个需要上下文判断的开关，不是默认开启的选项。