CSS颜色属性支持多种写法，包括：1.**关键字**：如`red`、`blue`、`green`等。2.**十六进制代码**：如`#FF5733`、`#000`（简写）。3.**RGB格式**：如`rgb(255,87,51)`。4.**RGBA格式**：如`rgba(255,87,51,0.5)`（带透明度）。5.**HSL格式**：如`hsl(12,100%,50%)`。6.**HSB/HSV

CSS的color属性虽看似简单，实则暗藏丰富细节：它支持关键字（140个，含rebeccapurple等冷知识）、十六进制（#rrggbb/#rgb/#rrggbbaa，注意alpha是00–ff而非0–1）、RGB/RGBA与HSL/HSLA四大写法，兼容性极佳（IE9+全支持），但在可维护性、透明度控制精度和动态继承（如currentcolor）上差异显著——比如rgba()能精准控制文字透明而不影响子元素，而opacity会全局生效；HSL更利于色调微调，十六进制简写易出错，颜色关键字拼写必须严格准确。掌握这些细微差别，才能写出既健壮又灵活的CSS色彩代码。

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()。

好了，本文到此结束，带大家了解了《CSS颜色属性支持多种写法，包括：1.**关键字**：如`red`、`blue`、`green`等。2.**十六进制代码**：如`#FF5733`、`#000`（简写）。3.**RGB格式**：如`rgb(255,87,51)`。4.**RGBA格式**：如`rgba(255,87,51,0.5)`（带透明度）。5.**HSL格式**：如`hsl(12,100%,50%)`。6.**HSB/HSV格式**：如`hsv(12,100%,100%)`（部分浏览器支持）。7.**预定义颜色名称**：如`aliceblue`、`antiquewhite`等。这些写法可根据需要选择，灵活控制颜色表现。》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！