RRGGBB 最稳妥，全浏览器兼容且无歧义；rgb()/rgba() 适合动态计算与透明控制；hsl()/hsla() 便于调色逻辑；color()/lab() 兼容性差，仅限实验。
什么时候该用 #RRGGBB 十六进制写法
最常见、最稳妥的选型，浏览器兼容性从 IE6 到现代浏览器全支持，压缩工具也认得清。适合需要明确色值、避免歧义的场景，比如设计系统中定义主色、品牌色。
注意 #RGB（简写）和 #RRGGBB（完整写法）本质一样，但前者只支持每位数字重复一次（如 #f00 等价于 #ff0000），一旦想表达 #fb3 这种非重复值，就得写成 #ffbb33，否则会被解析错。
-
#fff安全，#fb3也安全——但别误以为它等于#ffbb33，它就是#ffbb33，浏览器自动扩展 - 构建工具（如 PostCSS）默认保留简写，但某些 CSS-in-JS 库（如 Emotion）可能规范化为六位，导致 diff 不稳定
- 不支持 alpha 通道，要透明必须额外写
opacity或换用其他格式
为什么 rgb() 和 rgba() 在动态场景更实用
函数式写法天然适配 JS 计算，比如根据数据强度生成渐变背景、按状态调整透明度。比起拼字符串 "#"+r.toString(16)+g.toString(16)+b.toString(16)，rgb(255, 187, 51) 更可读、更少出错。
rgba() 是唯一能在单个颜色值里带 alpha 的传统方式（IE9+ 支持），比 opacity 更精准：它只影响颜色本身，不影响子元素。
立即学习“前端免费学习笔记（深入）”；
- 数值范围固定为 0–255 或 0–100%，超出会被截断（
rgb(300, 0, 0)→rgb(255, 0, 0)） - 百分比写法（
rgb(100%, 73%, 20%)）语义更强，适合与设计系统中的色调比例联动 - 不要混用单位：
rgb(255, 73%, 0)是无效语法，会整个声明失效
hsl() 和 hsla() 适合调色逻辑而非精确取色
如果你要“把当前蓝色变浅一点”或“让警告色更饱和”，hsl() 是唯一能直观操作的格式。色相（h）、饱和度（s）、明度（l）三个维度彼此解耦，JS 里加减数值就能出效果，不用查色轮。
但要注意：HSL 色域比 RGB 小，某些亮青、荧光色用 HSL 很难逼近；而且不同浏览器对同一组 hsl() 值的渲染仍有细微差异（尤其在低饱和区域）。
-
hsl(24, 100%, 50%)是纯橙，hsl(24, 100%, 70%)就是浅橙——明度调高，饱和度不变，比手动调 RGB 三通道靠谱得多 - HSL 中的
h是角度（0–360），不是百分比；s和l是百分比，缺一不可 - CSS 自定义属性 +
hsl()是主题切换最轻量的方案，例如--primary-h: 203; --primary-s: 100%; --primary-l: 40%;，然后color: hsl(var(--primary-h), var(--primary-s), var(--primary-l));
color() 和 lab() 现在还不能当主力用
CSS Color Level 4 引入的 color(display-p3 ...)、lab()、lch() 理论上更接近人眼感知，支持广色域屏幕，但实际落地卡在兼容性上：Chrome 118+ 和 Safari 16.4+ 才开始支持，Firefox 仍无计划。目前仅建议在小范围实验性项目中试水。
比如 color(display-p3 0.9 0.2 0.1) 能在支持设备上显示比 sRGB 更艳的红色，但降级时若没写 fallback，就会回退到继承色或透明——这点极易被忽略。
- 必须提供降级：例如
background-color: #fb3; background-color: color(display-p3 0.98 0.71 0.19); -
lab()的数值不直观，lab(70 20 40)比hsl(24 100% 50%)难调试，没有设计工具直接导出 lab 值 - PostCSS 插件（如
postcss-color-function）能编译部分新语法，但无法模拟 display-p3 渲染效果，真机测试不可跳过
