选HEX、RGB还是HSL取决于使用场景：HEX适合静态品牌色与设计师协作；RGB/RGBA适合js动态控制与透明度；HSL/HSLA适合系统化调色与批量变体生成——三者分工而非替代。
选 HEX 还是 RGB 或 HSL？关键看你要不要调、怎么调、跟谁协作——不是“哪个更好”，而是“哪个更不费劲”。
什么时候必须用 HEX：复制即用，不改不碰
设计师甩你一个 #4A90E2，你贴进 css 里就完事，这是最省心的场景。HEX 兼容性拉满（IE6 都认），压缩后体积小，figma / Sketch / adobe XD 导出默认就是它。
- 适合静态品牌色：
color: #2C3E50;、border-color: #E0E0E0; - 不适合改亮度或透明度——想让
#4A90E2变浅？得开取色器算，手动改成#7CAFE8，一错就偏色 - 别用简写
#49E去配深色主题：它等价于#4499EE，和你脑补的#4A90E2差两个数值位，肉眼可辨
RGB/RGBA 是 JS 动态改色的唯一自然接口
javaScript 拿到颜色，基本只能拿到 rgb(74, 144, 226) 或 rgba(74, 144, 226, 0.8) 这种格式；CSS 自定义属性（--main-color）传值也推荐用 RGB 分量，方便后续 calc 计算。
- 改透明度直接加第四个参数：
background-color: rgba(74, 144, 226, 0.15);，比 HEX 的#4A90E226（需支持 #RRGGBBAA）更通用 - 做渐变叠加时，RGBA 叠加逻辑清晰：
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); - 注意：百分比写法如
rgb(100%, 60%, 20%)虽合法，但 JS 获取 computedStyle 会转成 0–255 整数，别混用
HSL/HSLA 是系统化调色的底层语言
当你需要批量生成一组协调色（比如主色 + 亮版 + 暗版 + 灰阶），HSL 是唯一不用查表、靠直觉就能写的方案。
立即学习“前端免费学习笔记（深入）”；
- 同一色相不同亮度：
hsl(210, 70%, 60%)（主蓝）、hsl(210, 70%, 85%)（浅蓝）、hsl(210, 70%, 35%)（深蓝）——改一个数字，效果可预测 - 降饱和度=降视觉冲击：
hsl(210, 20%, 60%)比rgb(140, 160, 200)更容易理解“为什么这个蓝显得发灰” - 坑点：HSL 的
lightness不是明度（Luminance），纯黑hsl(0, 0%, 0%)和纯白hsl(0, 0%, 100%)没问题，但中间值对灰阶控制不如 LAB 精准（不过日常够用）
别踩的三个隐形坑
实际项目里，真正卡住人的往往不是“不会写”，而是“写了但行为反直觉”：
- HEX 带 alpha（
#RRGGBBAA）虽已广泛支持（chrome 62+/firefox 49+），但 IE 完全不认，且 vs code 插件、部分 CSS 压缩工具仍可能误删或报错 - RGB 百分比和整数不能混写：
rgb(100%, 128, 0)是非法语法，浏览器会整个声明丢弃 - HSL 的色相（
hue）支持超出 0–360 的值（如hsl(480, 100%, 50%)等价于hsl(120, 100%, 50%)），但团队协作时建议始终归一化，避免 git diff 里出现“明明没改色却显示 hue 从 120 → 480”
真实项目里，HEX 用于定稿色值，RGB/RGBA 用于 JS 交互与透明需求，HSL/HSLA 用于设计系统变量和批量变体生成——三者不是替代关系，而是分工关系。最容易被忽略的是：别在同一个组件里混用三种写法，比如 border: 1px solid #4A90E2; 和 background: hsla(210, 70%, 60%, 0.1); 并存，后期维护时连“这是不是同一个蓝”都要打开取色器确认。