html中设置文字颜色最直接的方式是使用css的color属性，支持关键字、十六进制、rgb、hsl等多种写法，应避免使用已废弃的标签，并注意可访问性对比度要求。
用 color CSS 属性最直接
HTML 本身没有“给文字设颜色”的标签，得靠 CSS。最常用、最稳妥的方式就是在 style 属性里写 color，作用对象是文本内容（比如 <p></p>、<span></span>、<div> 里的字）。
<p>常见错误是误用过时的 <code><font color="red"></font> —— 这个标签在 HTML5 中已被废弃，现代浏览器虽可能渲染，但不保证兼容，还会被校验工具报错。
-
color接受多种写法：red（关键字）、#ff0000（十六进制）、rgb(255, 0, 0)、hsl(0, 100%, 50%) - 别对块级元素（如
<div>）只设 <code>color就以为整个背景变色了——它只影响文字，背景还是透明的 - 如果文字嵌套在多个有样式的容器里，注意继承和层叠：子元素没显式设
color，就会继承父级的值
<p style="color: #2c3e50;">这段话会显示为深灰</p> <span style="color: rgb(44, 62, 80);">这个 span 也一样</span>
用 class 复用样式更可靠
内联 style 写多了难维护，尤其颜色要统一换的时候。把颜色抽成 class 是更工程化的做法。
容易踩的坑是忘了在 里加 <style></style> 或外链 CSS 文件，导致 class 完全不生效；或者 class 名起得太泛（比如叫 red），后期改需求时发现“红色”其实要改成橙红，结果满代码搜 red 改到崩溃。
立即学习“前端免费学习笔记（深入）”；
- 推荐按语义命名：
text-primary、text-error、text-muted，而不是red-text或darkblue - 如果项目用了 CSS 预处理器（如 Sass），可以用变量统一管理颜色值，改一处，全局生效
- 注意浏览器默认样式干扰：某些标签（如
<a></a>）有自带的color和:visited状态，单独设color可能只改了未访问状态
<style>
.text-success { color: #27ae60; }
</style>
<p class="text-success">操作成功</p>
避免用 <font></font> 或 document.write 动态拼颜色
老代码里常见 <font color="blue"></font> 或 JS 里用 document.write('<font color="...">，这两种方式现在都该淘汰。</font>
前者语义缺失、无法响应式、跟现代 CSS 工具链（如 PostCSS、CSS-in-JS）完全不兼容；后者在 DOM 加载完成后调用会清空整个页面，且无法做样式隔离和复用。
- JS 动态改颜色，请用
element.style.color = "#e74c3c"或element.classList.add("text-warning") - 如果必须服务端输出不同颜色，也应由模板引擎（如 EJS、Jinja）注入 class 或 style，而不是拼 HTML 标签
- 移动端要注意：部分安卓 WebView 对旧标签解析不稳定，
<font></font>在某些版本里直接被忽略
颜色可访问性常被忽略
设完颜色不是就完了。如果文字和背景对比度太低（比如浅灰字配白底），屏幕阅读器用户或视力障碍者可能根本看不见。WCAG 2.1 要求正文至少达到 4.5:1 的对比度。
这不是“锦上添花”，而是实际影响可用性的问题。很多团队上线后才被无障碍审计打回来重改，比一开始用工具检查成本高得多。
- 开发阶段就能用浏览器插件（如 axe DevTools）或在线工具（WebAIM Contrast Checker）实时测对比度
- 别只测“理想状态”：按钮悬停、禁用、暗色模式下都要分别验证
- 灰色系最容易翻车——
#999在白底上对比度只有 4.1:1，不达标；换成#767676就 OK
真正麻烦的不是怎么设颜色，而是设完之后没人去验证它在真实场景里是否真的能被看见。
