RRGGBB 最稳妥，全浏览器兼容且无歧义；rgb()/rgba() 适合动态计算与透明控制；hsl()/hsla() 便于调色逻辑；color()/lab() 兼容性差，仅限实验。
#RRGGBB 十六进制写法最常见、最稳妥的选型，浏览器兼容性从 IE6 到现代浏览器全支持，压缩工具也认得清。适合需要明确色值、避免歧义的场景，比如设计系统中定义主色、品牌色。
注意 #RGB（简写）和 #RRGGBB（完整写法）本质一样，但前者只支持每位数字重复一次（如 #f00 等价于 #ff0000），一旦想表达 #fb3 这种非重复值，就得写成 #ffbb33，否则会被解析错。
#fff 安全，#fb3 也安全——但别误以为它等于 #ffbb33，它就是 #ffbb33，浏览器自动扩展opacity 或换用其他格式rgb() 和 rgba() 在动态场景更实用函数式写法天然适配 JS 计算，比如根据数据强度生成渐变背景、按状态调整透明度。比起拼字符串 "#"+r.toString(16)+g.toString(16)+b.toString(16)，rgb(255, 187, 51) 更可读、更少出错。
rgba() 是唯一能在单个颜色值里带 alpha 的传统方式（IE9+ 支持），比 opacity 更精准：它只影响颜色本身，不影响子元素。
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 三通道靠谱得多h 是角度（0–360），不是百分比；s 和 l 是百分比，缺一不可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-color-function）能编译部分新语法，但无法模拟 display-p3 渲染效果，真机测试不可跳过