color属性支持5类颜色值格式：颜色关键字、十六进制（#rgb/#rrggbb/#rgba/#rrggbbaa）、RGB函数、RGBA函数、HSL/HSLA函数；推荐优先使用十六进制或HSL因其精度高、可计算且易调色。
color 属性支持的颜色值格式有哪些
color 属性只接受合法的颜色值，不支持单位、函数（如 calc()）或无效字符串。它支持 5 类标准格式，全部被所有现代浏览器（包括 IE9+）原生支持：
- 颜色关键字：如
red、darkslategray、transparent（注意大小写不敏感，但currentcolor是特殊动态值，不是颜色名） - 十六进制：
#rgb（3位简写）、#rrggbb（6位）、#rgba（4位）、#rrggbbaa（8位，css Color Module Level 4，chrome 65+/firefox 61+ 支持） - RGB 函数：
rgb(255, 0, 0)或rgb(100%, 0%, 0%)；注意百分比值必须带%符号，否则报错 - RGBA 函数：
rgba(255, 0, 0, 0.5)—— 第四个参数是 alpha（0–1），不是百分比；写成50%会失效 - HSL / HSLA 函数：
hsl(120, 100%, 50%)，色相范围是 0–360（单位省略），饱和度和亮度必须带%；hsla(120, 100%, 50%, 0.3)的 alpha 同样是 0–1 小数
为什么推荐优先用十六进制或 HSL，而不是颜色名
颜色关键字看似方便，但实际开发中容易踩坑：
- 语义模糊：
orange和orangered差异明显，但设计稿给的“主红”可能是#e2361a，用red会严重偏色 - 数量有限：CSS 标准定义了约 147 个关键字，但远不够覆盖品牌色、渐变中间态或可访问性校验所需精度
- 不可计算：
red无法参与color-mix()、oklch()或 js 中的色值运算；而#ff6b35或hsl(16, 100%, 58%)可直接解析为通道值 - HSL 更易调色：想让一个蓝色变浅一点？改
hsl(210, 100%, 70%)的亮度值即可，不用反复试#a0c4ff这类十六进制
常见错误与兼容性陷阱
这些写法看着像对，其实会静默失败或降级：
-
color: rgb(255 0 0);—— 缺少逗号（CSS Color 4 允许空格分隔，但仅限现代浏览器；IE/旧 safari 不认，应写rgb(255, 0, 0)） -
color: hsla(240, 100%, 50%, 50%);—— alpha 写成百分比（正确是0.5），所有浏览器都会忽略整条声明 -
color: #f03a;—— 4位十六进制（#RGBA）在旧版 android Browser 或 ios Safari rgba() 或转成 8位#ff0033aa -
color: currentcolor;虽然合法，但若父元素color是inherit或未设置，结果可能意外（比如父为transparent，子边框也会消失）
如何让 color 值真正生效且可维护
color 是可继承属性，这意味着它的作用链比你想象中更长：
立即学习“前端免费学习笔记（深入）”；
- 别在每个
p、span上重复写color；统一在body或主题容器上设基准色，再局部覆盖 - 链接（
a）默认有color，但 :visited/:hover/:active 状态需单独声明，否则可能被 UA 样式覆盖 - 用
currentcolor复用文本色到其他属性：例如border-color: currentcolor;或fill: currentcolor;（svg 内联时），避免硬编码重复值 - 深色模式适配时，不要只靠
@media (prefers-color-scheme: dark)覆盖color，记得同步检查background-color对比度是否达标（WCAG AA 要求至少 4.5:1）
/* 推荐的最小可行实践示例 */ :root { --text-primary: #333; --text-secondary: #666; } body { color: var(--text-primary); } article p { color: var(--text-secondary); } a { color: #007bff; } a:hover { color: #0056b3; border-bottom: 1px solid currentcolor; /* 复用文字色作下划线 */ }真正难的不是选哪种格式，而是确保同一套颜色值在文本、边框、图标、阴影里保持一致，且在明暗模式、高对比度系统、屏幕阅读器中都不翻车。从 color 开始，就该把它当成设计系统的原子单位来管理。