文本颜色属性
最后更新：2026-09-13
color 文本颜色属性
color 属性用于设置元素中文本的前景色，是 CSS 中最常用的样式之一。它可以接受颜色关键字、十六进制、RGB、HSL 等多种颜色格式。该属性会被子元素继承，因此通常在父元素上设置以统一整段文本的颜色。
| 分类 | |
|---|---|
| 初始值 | canvastext |
| 继承 | 是 |
| 适用于 | all |
| 可动画 | color |
| CSS 版本 | CSS1 |
| 状态 | 标准 |
📝 语法
color: <color>;⚙️ 取值
| 值 | 类型 | 描述 |
|---|---|---|
<color> | 类型 | 文本前景颜色 |
▶ 示例
编辑下方代码，在 playground 中查看实时效果：
🌐 浏览器支持
| 浏览器 |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| color | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| 所有主流浏览器均支持 | |||||
提示： color 属性会被子元素继承，在 body 上设置可统一全站默认文本色。
注意： 不要仅靠颜色传达信息，色盲用户可能无法分辨，应配合文字或图标。
❓ 常见问题
Qcolor 支持哪些颜色格式？
A支持颜色关键字（red、transparent）、十六进制（#ff0000、#f00）、rgb()/rgba()、hsl()/hsla()，CSS Color 4 还支持 lch()、oklch() 与空格语法 rgb(255 0 0 / 50%)。日常开发十六进制、rgb() 最常用，hsl() 便于调整色相明度。
Qcolor 和 background-color 有什么区别？
Acolor 设置文本（前景色）颜色且会被子元素继承，同时作为 currentcolor 决定未显式指定颜色的边框、下划线等元素的默认色；background-color 设置元素背景色，不继承。两者共同决定文本可读性，需保证足够对比度，WCAG AA 要求普通文本对比度不低于 4.5:1。
Q十六进制颜色 #f00 和 #ff0000 有区别吗？
A没有区别。#f00 是 #ff0000 的简写，当红、绿、蓝三个通道的两个十六进制位相同（如 00、ff、aa）时可以压缩为一位。另外 4 位/8 位写法包含透明度通道，例如 #ff000080 表示 50% 透明度的红色，前三位或前六位是颜色，后一位或后两位是 alpha。
Q如何用 CSS 变量管理站点的颜色主题？
A在 :root 中定义变量，如 --primary: #2c7be5; --text: #333;，再通过 color: var(--primary); 引用。集中管理便于换肤，配合 color-mix() 函数（现代浏览器支持）还能基于变量生成深浅变体。注意旧浏览器不支持 color-mix() 时需提供回退值。
🏷️ 相关属性
💡 相关案例
📚 相关教程
