HEX适合直接使用且兼容性好，RGB/RGBA便于JS动态操作和透明控制，HSL/HSLA利于主题色系直观调整；三者应按场景混用而非单选。
HEX 是设计师甩过来就直接贴的“成品色号”
你拿到 Figma 标注里的 #4A90E2，复制进 CSS 就能用，不用换算、不挑浏览器、连 IE6 都认——这就是 HEX 的核心价值。它本质是 RGB 的十六进制压缩写法：#RRGGBB，前两位红、中间两位绿、后两位蓝。#f63 是简写，等价于 #ff6633，手写快、体积小、协作零摩擦。
但别指望它调色：想让 #4A90E2 变浅？得开取色器重算成 #7CAFE8，一错就偏；想加透明？原生不支持，硬上 #4A90E226（即 #RRGGBBAA）虽现代浏览器基本可用，但 VS Code 插件可能报错、CSS 压缩工具可能误删，IE 更是完全无视。
RGB/RGBA 是 JS 动态改色的唯一自然接口
JavaScript 读取元素颜色，getComputedStyle 返回的永远是 rgb(74, 144, 226) 或 rgba(74, 144, 226, 0.8) 这种格式；CSS 自定义属性传色值，也推荐拆成 --r: 74; --g: 144; --b: 226;，后续用 calc() 算亮度或混合才不绕弯。
- 透明度直接加第四个参数：
background-color: rgba(74, 144, 226, 0.15);，比 HEX 的 alpha 形式更通用 - 百分比写法合法（如
rgb(100%, 60%, 20%)），但注意：JS 获取时会转成整数，rgb(100%, 128, 0)这种混写是非法语法，整条声明会被浏览器丢弃 - 适合按钮悬停变色、渐变叠加、模态框遮罩——所有需要脚本介入或透明度控制的场景
HSL/HSLA 是主题色批量微调的底层语言
当你需要一套协调的深浅色系（比如主蓝 + 浅蓝 + 深蓝 + 灰阶），HSL 是唯一靠直觉就能写的方案：hsl(210, 70%, 60%)（主蓝）、hsl(210, 70%, 85%)（浅蓝）、hsl(210, 70%, 35%)（深蓝）——只改一个 L 值，效果可预测。
立即学习“前端免费学习笔记（深入）”；
