必须用CSS的color属性设置文字颜色,禁用已废弃的font标签;支持#RRGGBB、rgb()、hsl()和预定义颜色名四种写法,仅rgba()和hsla()支持透明度;透明度过低会严重损害可读性,需确保对比度≥4.5:1;推荐使用CSS变量统一管理主题色。

直接用 color 属性改文字颜色,别碰 font 标签
HTML5 已废弃 标签,所有文字颜色必须通过 CSS 控制。最常用的是内联样式里的 color 属性,写在 style 里即可生效:
这段文字是深蓝
注意:不要写成 font-color(不存在)、text-color(无效),唯一合法属性名就是 color。
color 支持的四种颜色值写法及透明度处理
CSS 的 color 接受多种格式,但只有部分支持原生透明度:
-
#RRGGBB(如#ff6b35):不支持透明度,想加透明需转为rgb()或hsla() -
rgb(R, G, B)(如rgb(255, 107, 53)):不透明;要透明必须用rgba(R, G, B, A),其中A是 0–1 的小数 -
hsl(H, S%, L%):不透明;对应透明版本是hsla(H, S%, L%, A) - 预定义颜色名(如
tomato、rebeccapurple):不支持透明度,必须换写法
例如让文字半透红色:
立即学习“前端免费学习笔记(深入)”;
半透明红字
透明度对文字可读性的影响比你想象中更严重
设置 rgba() 或 hsla() 的 alpha 值时,浏览器不会自动调整对比度。哪怕背景是纯白,rgba(0,0,0,0.1) 也会导致文字几乎看不见。
- WCAG 推荐文字与背景的对比度 ≥ 4.5:1(普通文本),低于这个值可能无法通过无障碍检测
- 用
opacity作用于整个元素(比如)会连同子元素一起变透明,且不可被子元素覆盖 —— 这和color: rgba()行为完全不同 - 如果需要“带透明的文字色”,又不确定背景色,优先考虑用
hsla()调整亮度(L%)+ 饱和度(S%),比硬调 alpha 更可控
避免在内联样式里重复写颜色值,该抽 CSS 变量了
项目里若多处用到同一套主题色(比如品牌蓝 #2a5dc2),硬编码在每个 style 里极易出错且难维护。HTML5 + CSS3 支持自定义属性(CSS 变量),推荐这样组织:
:root { --brand-blue: #2a5dc2; }
.text-brand { color: var(--brand-blue); }
.text-brand-faded { color: rgba(42, 93, 194, 0.7); }
然后在 HTML 中复用类名:
主标题
辅助说明
真正复杂的颜色系统(比如暗色模式适配),得靠媒体查询配合 prefers-color-scheme 切换变量值 —— 单靠内联 style 做不到。











