颜色无物理单位，rgb()、#FF5733、hsl()等是表示法而非单位；现代CSS推荐rgb(255 0 0 / 0.5)替代rgba()；%仅用于hsl及部分新色彩空间，非布局单位；px与alpha无关；#RRGGBB性能优于函数式写法；alpha需兼顾可访问性。
颜色没有“单位”，但有多种表示法——别被“单位”二字误导
CSS 中的颜色值本身不带物理单位（比如 px 或 %），所谓“颜色单位”其实是误称，准确说是“颜色表示法”。你看到的 rgb()、#FF5733、hsl(0 100% 50%) 都是语法格式，不是带量纲的单位。真正带单位的是长度（如 px、rem）、角度（如 deg）、透明度（/0.5）等——而透明度在现代 CSS 中已脱离 rgba() 独立成通道，写法也变了。
rgb() 和 rgba() 已过时？现代写法是 rgb(255 0 0 / 0.5)
老项目里常见 rgba(255, 0, 0, 0.5)，但现在主流浏览器（Chrome 93+、Firefox 93+、Safari 15.4+）支持更简洁、更语义清晰的新语法：
-
rgb(255 0 0)表示不透明红色（空格分隔，无逗号） -
rgb(255 0 0 / 0.5)表示半透明红色（斜杠后跟 alpha 值） - 逗号语法已被视为“遗留模式”，VS Code 等编辑器对新语法有更好高亮和预览支持
- 不支持 IE —— 如果还要兼容 IE11，必须降级回
rgba()，且不能混用新旧写法
百分比在颜色中只用于 HSL/SRGB，不是“相对于父元素”的尺寸单位
别把颜色里的 % 和布局中的 % 混为一谈。它只出现在两类地方：
-
hsl(0 100% 50%)：第二个值（饱和度）和第三个值（亮度）是百分比，表示色轮模型中的相对强度 -
color(srgb 0.8 0.2 0.1)或lab(50% 20 10)：部分新颜色空间用百分比表达通道范围（但实际极少手写） - 十六进制或
rgb()里写%是无效的，比如rgb(100% 0% 0%)不合法 - VS Code 只对带
%的hsl()显示颜色小 preview，所以即使可省略（hsl(0 100 50)合法），也建议保留百分号
像素（px）和透明度（alpha）完全无关——但常被新手强行关联
有人以为 opacity: 0.5 或 rgb(255 0 0 / 0.5) 是“把像素变半透明”，这是概念混淆。像素是渲染最小单位，不可分割；透明度是图层混合参数，影响的是最终合成结果。
立即学习“前端免费学习笔记（深入）”；
-
opacity作用于整个元素及其子树，会模糊子元素、影响 z-index 层叠，慎用 -
rgb(… / alpha)或hsl(… / alpha)只改变该颜色自身的透出程度，不影响布局和子元素 - 性能上，纯色值（如
#FF5733）比rgb()解析快约 15%，V8 引擎有专门优化路径；但加了 alpha 就得走更重的 color parser，所以静态色优先用#RRGGBB，动态色才用函数式 - HEX 不支持透明度（
#RRGGBBAA是扩展，iOS Safari 15.4 才稳定，老安卓 WebView 常解析失败）
真正容易被忽略的，是 alpha 通道和系统配色模式的叠加风险：比如你在 prefers-color-scheme: dark 下写了 color: rgb(255 255 255 / 0.6)，白字半透在深色背景上可能对比度跌破 4.5:1，用户根本看不清——颜色写法要配合可访问性检测，不能只看“它看起来还行”。
