直接在HTML元素的style属性中用color设置文字颜色即可，推荐使用6位十六进制（如#333）、rgb()或CSS变量（需提前定义），注意拼写、分号及对比度合规性。
怎么用 color 改 HTML 文字颜色
直接在元素的 style 属性里写 color，浏览器就认。别碰 —— 这是 html 3.2 的古董，现代浏览器虽没删它，但不保证渲染一致，而且校验器会报错。
常见错误：写成 colour（英式拼写），浏览器直接忽略；或者漏了分号，后面样式可能连锁失效。
-
color: #333;—— 推荐用 6 位十六进制，明确、无歧义 -
color: rgb(51, 51, 51);—— 适合动态计算，但注意括号和逗号不能少 -
color: var(--text-primary);—— 用 CSS 变量时，确保该变量已在 :root 或父级定义好
背景色和文字色一起设，为什么有时看不清
不是代码没生效，而是对比度太低。比如 color: #999; 配 background-color: #eee;，在非专业屏幕上几乎分不出字。
WCAG 最低可读性要求对比度 ≥ 4.5:1（正文）。别靠眼睛估，用浏览器开发者工具的“可访问性”面板实时测——Chrome 和 Edge 都自带。
- 深色背景配浅色字：用
color: #fff;或color: hsl(0, 0%, 90%);，别用#f5f5f5这类灰白 - 浅色背景配深色字：
color: #222;比#000更柔和，也更易读 - 千万别用
background简写覆盖掉background-color却忘了重设color，尤其从组件库复制样式时容易中招
CSS 优先级搞不定颜色？检查这三处
明明写了 color: red;，文字还是黑的，大概率是被更高优先级的规则盖掉了。不用猜，打开开发者工具，看“Computed”标签页里 color 值旁边有没有小箭头——点开就能看到所有参与计算的来源。
- 内联
style="color: blue;"优先级 > 外部 CSS 中的.text { color: red; } - 带
!important的声明能压倒内联样式，但会破坏可维护性，只在调试或覆盖第三方库时临时用 - 继承来的颜色（比如
body { color: green; }）会被子元素显式声明覆盖，但如果子元素用了color: inherit;，那就又绕回去了
移动端字体颜色变淡或发虚
不是 CSS 写错了，是 subpixel rendering（亚像素渲染）在高清屏上对某些颜色组合不友好。典型现象：灰色文字在白色背景上边缘发虚，尤其 iOS Safari。
解决思路不是调色值，而是微调渲染行为。加一行 -webkit-font-smoothing: antialiased; 就能强制走灰度抗锯齿，文字立刻清晰——但注意，这会让字体稍细一点，如果设计稿强调厚重感，得同步调大 font-weight 补偿。
- 只对
color是灰阶（#888、rgb(136,136,136)）且背景纯白/纯黑时明显 - 不要全局加，只加在出问题的容器上，比如
.article-content { -webkit-font-smoothing: antialiased; } - Firefox 和新 Edge 不支持这个属性，所以它只影响 WebKit 内核，不影响兼容性判断
实际改颜色时，最常卡住的地方不是语法，而是没意识到颜色是「叠加结果」：它受父级 color、CSS 变量作用域、浏览器默认样式表、甚至系统深色模式开关共同影响。动手前先看 Computed 面板里的最终值，比反复改代码快得多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
