所有现代浏览器完整支持rgb()、rgba()、hsl()、hsla()和十六进制颜色；IE8及更早版本仅支持十六进制、命名色和无alpha的rgb()，不支持rgba()和hsl()，需提供降级写法；hsl()中hue超限会自动归一化，saturation和lightness必须带%单位；十六进制简写#RGB是#aabbcc缩写，非八进制；八进制rgb()已废弃；预定义颜色名仅16个在IE8可靠，扩展名需转为十六进制确保兼容。
所有现代浏览器（Chrome、Firefox、Safari、Edge、Opera 10+，以及 IE9+）都完整支持 rgb()、rgba()、hsl()、hsla() 和十六进制（#RRGGBB 或简写 #RGB）这五类主流颜色表达方式；但「兼容性问题」真实存在——主要集中在旧版 IE、移动端 WebView、以及某些嵌入式浏览器对 alpha 通道或 HSL 模型的处理差异上。
IE8 及更早版本不支持 rgba() 和 hsl()
这是最常踩的坑：IE8 及以下只认十六进制、命名色（如 red）、rgb()（无 alpha），其他一概忽略或渲染为透明/黑色。
- 若用
background-color: rgba(0, 0, 0, 0.5);，IE8 会直接丢弃该声明，背景变默认色（通常是透明或父容器色） - IE8 不解析
hsl(240, 100%, 50%)，整条规则失效 -
解决方法不是“加前缀”，而是提供降级：用
background-color先写一个十六进制或rgb()值，再覆盖一层rgba()
p {
background-color: #007bff; /* IE8 fallback */
background-color: rgba(0, 123, 255, 0.8);
}
hsl() 的 hue 参数是 0–360，但数值超限不会报错，只是自动归一化
比如 hsl(480, 70%, 60%) 实际等价于 hsl(120, 70%, 60%)（因为 480 % 360 = 120），但开发者容易误以为写错导致颜色不对，排查时却找不到语法错误。
- 饱和度（
saturation）和明度（lightness）必须带%单位，漏写（如hsl(120, 70, 60)）在部分旧 Safari 中会被拒绝解析 - Chrome 和 Firefox 对单位缺失容忍度高，但 iOS 12–13 的 UIWebView 会静默失败
- 建议始终写全：
hsl(120, 70%, 60%)，避免依赖隐式转换
十六进制简写 #RGB 和八进制是不同概念，别混淆
很多人误把 #abc 当作“八进制”，其实它是 #aabbcc 的简写，属于十六进制范畴；真正的八进制颜色值（如 rgb(012, 034, 056)）早已被所有现代浏览器废弃，且从 CSS 规范中移除——任何使用八进制数字（以 0 开头的非零数字）的 rgb() 都是无效语法。
立即学习“前端免费学习笔记（深入）”；
-
color: #f00;✅ 等价于#ff0000，全浏览器支持 -
color: rgb(012, 034, 056);❌ 在 Chrome 120+ 中直接报 CSS 解析错误，Firefox 也已不支持 - 十六进制大小写不敏感（
#FF0000和#ff0000效果一致），但团队协作建议统一小写，避免 Git diff 冗余
预定义颜色名看似安全，实际有兼容风险
虽然 red、blue 这 16 个基础名在所有浏览器中都可靠，但像 AliceBlue、RebeccaPurple 这类扩展名，在 IE8–IE10 和部分国产双核浏览器（如老版 360 安全浏览器）中可能未定义，渲染为黑色或透明。
- CSS 规范定义了 147 个标准颜色名，但 IE9 才开始支持全部；IE8 仅支持最初 16 个
- 用
color: AliceBlue;在 IE8 下等于没写，文本变默认色（通常是黑色） - 如果设计稿明确要求某个命名色，务必查 CanIUse 或用工具转成十六进制再使用，例如
AliceBlue → #F0F8FF
真正影响上线的不是“哪个写法最酷”，而是“哪个写法在用户实际打开页面的设备上不掉链子”——十六进制和 rgb() 是兼容性底线，alpha 和 HSL 是增强层，得按需叠加，而不是默认启用。
