CSS color属性支持四类写法：关键字（140个，如red、rebeccapurple）、十六进制（#rrggbb、#rgb、#rrggbbaa）、RGB/RGBA、HSL/HSLA；兼容性好但可维护性、透明度控制和精度各异。
color 属性支持的写法其实就四类：关键字、十六进制、RGB/RGBA、HSL/HSLA。浏览器兼容性极好，所有现代浏览器包括 IE9+ 都完全支持，但不同写法在可维护性、透明度控制和色值精度上差异明显。
哪些颜色关键字可以直接用
CSS 保留了 140 个标准颜色关键字，比如 red、blue、rebeccapurple（为纪念 Web 先驱而加入）、transparent（虽是颜色值，但实际等价于 rgba(0,0,0,0)）。注意：orange 有，pink 有，但 coral 和 teal 这类也都有；而像 lightblue 这种带前缀的必须拼写准确，light-blue 或 LightBlue 都无效。
常见误用点：
-
grey和gray都合法，但值不同（grey是#808080，gray是#808080—— 实际相同，但别指望darkgrey能自动变暗，它只是另一个固定关键字 -
currentcolor不是颜色名，而是动态关键字，取当前元素的color值，常用于 SVG 或边框继承文本色
十六进制写法的三种格式及限制
支持 #rrggbb、#rgb、#rrggbbaa（CSS Color Module Level 4，Chrome 65+/Firefox 63+ 支持）。注意：#rgb 是简写，#f0a 等价于 #ff00aa，不是 #f00a；不支持带空格或中间加横线的写法，如 #f0 a 或 #f-0-a 会直接失效。
立即学习“前端免费学习笔记（深入）”；
容易踩的坑：
- 漏写
#符号，ff00aa不是有效值，浏览器会忽略整条声明 - 大小写混用没问题（
#FF00AA和#ff00aa等价），但团队协作建议统一小写，避免 Git diff 误判变更 -
#rrggbbaa中的 alpha 是十六进制（00–ff），不是十进制（0–1），#00000080≈ 半透黑，不是#0000000.5
RGB 与 HSL 的函数写法区别在哪
rgb() 和 hsl() 都支持无单位数值或百分比，但规则不同：
-
rgb(255, 0, 100)：每个通道 0–255 整数；rgb(100%, 0%, 40%)：百分比按 0%→0、100%→255 映射 -
hsl(120, 100%, 50%)：H 是角度（0–360 deg，单位可省略），S/L 是百分比（0%–100%）；hsl(120deg, 100%, 50%)合法，hsl(120, 100, 50)错误（缺 %） -
rgba()和hsla()第四个参数是 alpha，范围是0–1（非百分比！），rgba(0,0,0,0.3)正确，rgba(0,0,0,30%)在旧版浏览器中可能不被识别
性能上无差异，但 HSL 更适合做色调调整（比如按钮悬停时只改 hsl(200, 100%, 60%) → hsl(200, 100%, 50%)），RGB 更适合从设计稿直接取值。
透明色不能只靠 color 实现？
这是关键盲区：color 本身不支持 opacity 层叠，设置 color: rgba(0,0,0,0.5) 只影响文字，不影响其子元素；而 opacity: 0.5 会让整个元素（含背景、边框、子节点）一起变透明。真正需要文字半透又保持子元素不透明时，必须用 rgba() 或 hsla() 直接设 color，不能依赖父级 opacity。
另外：transparent 是一个独立关键字，等价于 rgba(0,0,0,0)，但它不能用于渐变色停止点（background: linear-gradient(to right, red, transparent) 合法，但 color: transparent 就是纯透明文字，不可见。
/* 正确示例 */
.text-primary {
color: #333; /* 十六进制 */
}
.text-accent {
color: hsl(210, 80%, 45%); /* HSL，易调色 */
}
.text-fade {
color: rgba(0, 0, 0, 0.7); /* 半透，不影响后代 */
}
.text-inherit {
color: currentcolor; /* 继承自身 color 值 */
}最常被忽略的是 currentcolor 的链式行为，以及 #rrggbbaa 在低版本 Android WebView 中的兼容性问题——如果要支持 Android 4.4 以下，得回退到 rgba()。
