静态品牌色用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 也会更干净利落。
容易踩的坑：
#F53是#FF5533，但设计稿给的是#FF5733，差两位就偏色，关键色别图省事- 团队协作时统一小写，
#ff6347和#FF6347效果一样，但大小写混用会让 Git 无意义标变更 #RRGGBBAA（如#FF573380）在 Safari 16.4+ 才稳定，旧版 iOS Safari 直接忽略后两位，回退成不透明黑/白
JS 动态操作必须用 RGB
所有浏览器通过 getComputedStyle(el).color 返回的都是 rgb(255, 87, 51) 或 rgba(255, 87, 51, 0.6)，不是 HEX。你想在运行时调亮 20%、叠加遮罩、做暗黑模式切换，直接对数组操作最自然。
实操建议：
- 别手写
parseInt(hex.slice(1,3), 16)解析 HEX——溢出、大小写、简写补位都容易出错 - 把颜色拆成 CSS 变量：
--r: 255; --g: 87; --b: 51;，再用rgb(var(--r), var(--g), var(--b))组合，脚本改一个变量就行 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这种表示法呀，天然就支持语义化调色，有时候我们甚至心算一下就能得出配色方案，是不是很神奇呢？
注意兼容性雷区：
hsla(0, 0%, 0%, 0.5)在 Android 4.4 内置 WebView 里解析异常，有兼容要求时优先用rgba()- 别从 Figma/Sketch 导出的 HEX 强行转 HSL——工具算法和浏览器不一致，用 Chrome DevTools 颜色面板点一下自动转更准
hsl(0, 100%, 50%)是纯红，hsl(0, 0%, 0%)是黑，hsl(0, 0%, 100%)是白，别把l: 50%当默认值忽略
透明度别碰 HEX，用 rgba() 或 hsla() 才稳
HEX 本身不带 alpha 通道。#FF573380 看着简洁，但在 IE9、旧版 Android WebView、某些 CSS 压缩工具里会被直接忽略后两位，颜色回退为不透明黑/白/默认色。
真正跨浏览器稳定的方案只有两个：
rgba(255, 87, 51, 0.6)：IE9+ 支持，事实标准hsla(210, 100%, 60%, 0.6)：语义清晰，但旧 WebView 兼容性略差
如果必须兼容 IE8 及更老环境，只能用 opacity 控制整个元素——但它会影响子元素，不是颜色本身的透明。
