CSS color属性支持6类原生格式：颜色关键字、HEX（含#RRGGBBAA）、RGB/RGBA、HSL/HSLA、transparent和currentColor；现代浏览器全支持，IE对HSLA/RGBA/#RGBA不兼容。
CSS color 属性支持 6 类原生格式：颜色关键字、HEX（含带 alpha 的 #RRGGBBAA）、RGB/RGBA、HSL/HSLA、transparent 和 currentColor。现代浏览器（Chrome 100+、Firefox 110+、Safari 16+）全部支持，但旧版 IE 对 HSLA/RGBA/#RGBA 有明确兼容断层。
HEX 格式：最稳，但调色不直观
标准写法是 #RRGGBB（如 #2a9d8f），简写为 #RGB（如 #298 对应 #229988）。2016 年起 CSS Color Module Level 4 增加了 4 位和 8 位扩展：#RGBA（如 #298a = rgba(34, 153, 136, 0.66)）和 #RRGGBBAA（如 #2a9d8f80）。注意：
- IE 仅支持到
#RRGGBB，#RGBA和#RRGGBBAA在 IE 中完全无效 - 简写
#RGB不能混用位数（#298a不是简写，是 4 位 HEX，必须全写） - Figma / Sketch 导出默认给 HEX，但复制时容易漏掉
#，导致样式静默失效
RGB/RGBA：JS 动态控制首选
rgb() 接收三通道整数（0–255）或百分比（0%–100%），rgba() 第四参数是 alpha（0–1）。关键点：
-
rgb(255, 0, 0)和rgb(100%, 0%, 0%)效果一致，但后者在 CSS 自定义属性中更易做数学运算（如calc()） - alpha 值不是百分比——
rgba(0,0,0,50%)是非法语法，必须写0.5 - JS 中用
getComputedStyle(el).color读取时，几乎所有浏览器都返回rgb()或rgba()字符串，而非原始 HEX
HSL/HSLA：调色逻辑最接近人眼，但设计师常忽略色相偏移
hsl(hue, saturation%, lightness%) 中 hue 是角度值（0deg 红 → 120deg 绿 → 240deg 蓝），saturation 和 lightness 都是百分比。常见误区：
立即学习“前端免费学习笔记（深入）”；
- 不是所有“亮色”都适合设
lightness: 90%：比如hsl(0, 100%, 90%)（浅粉红）视觉上比hsl(120, 100%, 90%)（浅绿）更刺眼，因人眼对不同色相的亮度感知不均 - 想从品牌色生成禁用态？别只改
lightness，建议同步降saturation（如主色hsl(200, 80%, 50%)→ 禁用hsl(200, 30%, 70%)） - HSLA 的 alpha 行为和 RGBA 完全一致，但 HSL 更易做“同色系深浅梯度”，比如按钮 hover 可直接
lightness: calc(50% - 10%)
其他必须知道的冷门但实用格式
除了主流三类，还有两个常被忽略但高频使用的值：
-
transparent：等价于rgba(0,0,0,0)，但更短、语义更强，且在 IE8+ 全支持；用于清空背景又不想写 rgba 时首选 -
currentColor：取当前元素的color值，常用于 SVG 图标、边框、伪元素，避免颜色值硬编码重复；注意它继承的是计算后的颜色值，不是原始声明值
.icon {
color: #3498db;
border: 1px solid currentColor; /* 边框自动随文字色变 */
fill: currentColor; /* SVG 内部填充也同步 */
}真正复杂的不是“支持哪些格式”，而是混合使用时的隐式转换风险——比如用 JS 修改 style.color = '#ff0000' 后再读取，得到的可能是 rgb(255, 0, 0)，再设回去就丢失原始格式信息。如果项目需要颜色可逆操作（如主题编辑器），建议统一用 HSLA 或自建颜色对象管理，而不是依赖字符串解析。
