静态场景优先用#FF5733：体积最小、解析最快、全浏览器兼容；需透明度时改用rgba()或现代#RRGGBBAA，避免HEX简写偏差和rgb()无效alpha。
什么时候该用 #FF5733 而不是 rgb(255, 87, 51)
静态品牌色、文字、边框等不需动态调整的场景，优先用 6 位 HEX（如 #FF5733）。它体积最小、解析最快，所有浏览器无兼容问题，设计稿里复制即用。
- HEX 不支持透明度——想加半透效果，不能写
#FF573380（旧版浏览器直接忽略），必须切到rgba()或现代#RRGGBBAA（仅 Chrome 93+/Firefox 93+/iOS Safari 15.4+ 稳定支持） - 手动调深浅很反直觉：比如要把
#FF5733变暗 20%，你得先转成 RGB → 计算亮度 → 再转回 HEX，中间一步错就偏色 - 别用 3 位简写（如
#F53）做关键色——它会自动双写为#FF5533，和设计稿可能有细微偏差
rgb() 和 rgba() 的核心区别在哪
rgb() 是纯色三通道函数，只接受红、绿、蓝三个数值（0–255 或百分比），不带透明度；rgba() 是它的扩展，第四个参数 alpha 控制不透明度（0.0–1.0），且这个 alpha 是颜色本身的一部分，不影响子元素。
-
rgb(255, 87, 51, 0.6)是无效语法——浏览器会直接丢弃第四个参数，必须用rgba(255, 87, 51, 0.6) - JS 动态改色时，
rgba()是唯一靠谱选择：直接操作数字数组，不用字符串解析十六进制，避免 parseInt 溢出或精度丢失 - 注意：CSS 自定义属性中写
--main-color: rgba(255, 87, 51, 0.6)，在部分老 Android WebView 中解析不稳定，生产环境建议 fallback 到 HEX + 单独opacity
性能与兼容性的真实差距
HEX 是目前性能最优的颜色写法：V8 引擎对 #RRGGBB 有专门优化路径，实测解析速度比 rgb() 快约 15%（Chromium 128）。而 rgba() 和 hsl() 属于函数式语法，需额外解析括号与逗号，开销略高但可忽略。
- HEX 兼容性最广，连 IE6 都支持；
rgba()从 IE9 开始支持，hsl()同理；#RRGGBBAA（8 位 HEX）则需现代浏览器 - 所有颜色格式最终都会被浏览器转为 sRGB 内部表示——别指望换写法就能“突破色域”，它们只是表达层差异
- 关键词色（如
tomato）语义强但不可控：tomato在标准里固定为#FF6347，但设计师给的可能是#FF6A4D，硬套会导致验收不通过
容易被忽略的细节：alpha 值不是 opacity
rgba(0, 0, 0, 0.5) 表示“半透明黑色”，只作用于该颜色本身；而 opacity: 0.5 会让整个元素（包括子内容、边框、阴影）一起变透明，行为完全不同。
立即学习“前端免费学习笔记（深入）”；
- 用
rgba()做背景遮罩时，文字仍保持 100% 不透明；用opacity就会让文字也发虚 - 动画中频繁修改
opacity可能触发重排，而修改rgba()的 alpha 值属于颜色重绘，性能更优 - HEX 无法表达 alpha，
rgb()也不行——只有rgba()、hsla()或 8 位 HEX 才真正把透明度“绑定”在颜色值里
