必须用CSS的color属性设置文字颜色，禁用已废弃的font标签；支持#RRGGBB、rgb()、hsl()和预定义颜色名四种写法，仅rgba()和hsla()支持透明度；透明度过低会严重损害可读性，需确保对比度≥4.5:1；推荐使用CSS变量统一管理主题色。
直接用 color 属性改文字颜色，别碰 font 标签
HTML5 已废弃 <font></font> 标签，所有文字颜色必须通过 CSS 控制。最常用的是内联样式里的 color 属性，写在 style 里即可生效：
<p style="color: #336699;">这段文字是深蓝</p>
注意：不要写成 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）：不支持透明度，必须换写法
例如让文字半透红色：
立即学习“前端免费学习笔记（深入）”；
<span style="color: rgba(255, 0, 0, 0.5);">半透明红字</span>
透明度对文字可读性的影响比你想象中更严重
设置 rgba() 或 hsla() 的 alpha 值时，浏览器不会自动调整对比度。哪怕背景是纯白，rgba(0,0,0,0.1) 也会导致文字几乎看不见。
- WCAG 推荐文字与背景的对比度 ≥ 4.5:1（普通文本），低于这个值可能无法通过无障碍检测
- 用
opacity作用于整个元素（比如<p style="opacity:0.5"></p>）会连同子元素一起变透明，且不可被子元素覆盖 —— 这和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 中复用类名：
<p class="text-brand">主标题</p> <p class="text-brand-faded">辅助说明</p>
真正复杂的颜色系统（比如暗色模式适配），得靠媒体查询配合 prefers-color-scheme 切换变量值 —— 单靠内联 style 做不到。
