CSS里hex、rgb、hsl该如何选

静态品牌色用HEX（如#FF5733），字符少、解析快、压缩友好；JS动态操作必须用RGB（如rgb(255,87,51)）；主题与渐变推荐HSL（如hsl(210,100%,60%)），便于语义化调色；透明度务必用rgba()或hsla()，HEX不支持alpha通道。

没有“哪个更好”，只有“在哪种场景下更合适”——选错不是语法错误，而是后期维护成本飙升、主题切换卡住、透明度失效的隐形炸弹。

静态品牌色用 HEX，别犹豫

品牌主色、图标填充、文字默认色这类几乎不变更的值，#FF5733 比 rgb(255, 87, 51) 少 10 个字符，V8 和 Chromium 对它有专用解析路径，实测快约 15%。它不触发函数调用开销，也不依赖括号/逗号分隔，压缩工具友好，Git diff 干净。

容易踩的坑：

1. #F53 是 #FF5533，但设计稿给的是 #FF5733，差两位就偏色，关键色别图省事
2. 团队协作时统一小写，#ff6347 和 #FF6347 效果一样，但大小写混用会让 Git 无意义标变更
3. #RRGGBBAA（如 #FF573380）在 Safari 16.4+ 才稳定，旧版 iOS Safari 直接忽略后两位，回退成不透明黑/白

JS 动态操作必须用 RGB

所有浏览器通过 getComputedStyle(el).color 返回的都是 rgb(255, 87, 51) 或 rgba(255, 87, 51, 0.6)，不是 HEX。你想在运行时调亮 20%、叠加遮罩、做暗黑模式切换，直接对数组操作最自然。

实操建议：

1. 别手写 parseInt(hex.slice(1,3), 16) 解析 HEX——溢出、大小写、简写补位都容易出错
2. 把颜色拆成 CSS 变量：--r: 255; --g: 87; --b: 51;，再用 rgb(var(--r), var(--g), var(--b)) 组合，脚本改一个变量就行
3. rgb(255, 87, 51, 0.6) 合法，但 rgb(255, 87, 51, 60%) 会失效；第四个 alpha 参数必须是 0–1 的小数

主题系统和渐变用 HSL，否则调色像盲人摸象

想让按钮悬停变深？hsl(210, 100%, 60%) → hsl(210, 100%, 45%)，只动第三个参数。想整套冷色调？hsl(210, 20%, 15%) → hsl(240, 20%, 15%)，只改色相。HSL 天然支持语义化调色，心算就能出配色方案。

注意兼容性雷区：

1. hsla(0, 0%, 0%, 0.5) 在 Android 4.4 内置 WebView 里解析异常，有兼容要求时优先用 rgba()
2. 别从 Figma/Sketch 导出的 HEX 强行转 HSL——工具算法和浏览器不一致，用 Chrome DevTools 颜色面板点一下自动转更准
3. hsl(0, 100%, 50%) 是纯红，hsl(0, 0%, 0%) 是黑，hsl(0, 0%, 100%) 是白，别把 l: 50% 当默认值忽略

透明度别碰 HEX，用 rgba() 或 hsla() 才稳

HEX 本身不带 alpha 通道。#FF573380 看着简洁，但在 IE9、旧版 Android WebView、某些 CSS 压缩工具里会被直接忽略后两位，颜色回退为不透明黑/白/默认色。

真正跨浏览器稳定的方案只有两个：

1. rgba(255, 87, 51, 0.6)：IE9+ 支持，事实标准
2. hsla(210, 100%, 60%, 0.6)：语义清晰，但旧 WebView 兼容性略差

如果必须兼容 IE8 及更老环境，只能用 opacity 控制整个元素——但它会影响子元素，不是颜色本身的透明。