rgb()和rgba()适合透明度控制，rgba()在rgb()基础上增加alpha参数（0–1）；十六进制颜色常用#rrggbb或#rgb简写，不支持八位；hsl()更易微调颜色，推荐结合css自定义属性实现主题系统。
rgb() 和 rgba() 适合需要透明度控制的场景
当你要给元素加半透明背景或文字时，rgba() 是最直接的选择。它在 rgb() 基础上多一个 alpha 参数（0–1），比如 rgba(255, 99, 71, 0.5) 表示半透的番茄红。
-
rgb()的三个参数必须是 0–255 的整数，不接受百分比（rgb(100%, 0%, 0%)虽然合法但容易误写成小数） - alpha 值为
0时完全透明，1时完全不透明；中间值注意别写成0.5%或50这类错误形式 - 和
hex不同，rgb()不支持简写，也不能用在currentColor等动态色上下文中做计算
#RRGGBB 和 #RGB 十六进制写法要注意大小写与位数
十六进制颜色最常用，但容易因格式不规范导致解析失败或意外效果。
-
#RRGGBB是标准六位写法，如#ff6347；#RGB是三位简写，等价于双写每位，#f64→#ff6644 - 浏览器对大小写不敏感，但团队协作中建议统一小写，避免 Git 提交时因大小写变化触发无意义 diff
- 不存在
#RRGGBBAA形式的八位 hex（那是 CSS Color Level 4 的新语法，目前仅部分浏览器支持，不要在生产环境依赖）
hsl() 更适合做颜色微调和主题系统
如果你要批量调整一组颜色的亮度或饱和度（比如深色模式切换、hover 变暗），hsl() 比换算成 hex 或 rgb 更直观。
- H（色相）是 0–360 的角度值，
0和360都代表红色；S（饱和度）和 L（亮度）都是百分比，不是 0–1 小数 -
hsl(0, 100%, 50%)是纯红，hsl(0, 100%, 75%)就是更浅的粉红——改一个数字就能变亮，不用反复试 hex - 注意：IE 仅支持到
hsl()，不支持hsla()（IE9+ 才支持），若需兼容老版本，得 fallback 到rgb()
现代项目建议优先用自定义属性 + hsl() 组合
真正复杂的颜色管理，靠硬编码各种 rgb 或 hex 很难维护。用 CSS 自定义属性配合 hsl() 是更可持续的方式。
立即学习“前端免费学习笔记（深入）”；
:root {
--primary-h: 200;
--primary-s: 80%;
--primary-l: 50%;
}
.btn {
background: hsl(var(--primary-h), var(--primary-s), var(--primary-l));
}
.btn:hover {
background: hsl(var(--primary-h), var(--primary-s), calc(var(--primary-l) - 10%));
}- 把色相、饱和度、亮度拆成变量后，主题切换只需改几个数值，不用遍历所有颜色值
- 注意
calc()中的单位一致性：L 是百分比，所以calc(50% - 10%)合法，但calc(50 - 10%)会报错 - 别在
hsl()里混用不同单位（比如hsl(200, 80, 50%)），S 和 L 必须带%符号
实际开发中最容易被忽略的是：颜色函数之间不能直接运算（比如 hsl(200, 80%, 50%) + 10% 无效），所有动态调整都得靠 CSS 变量 + calc() 或 JS 计算。这点在写深色模式或可配置主题时，常常卡住半天。
