HTML5如何设置文字颜色_颜色值与透明度调整方法汇总【指南】

必须用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 做不到。