CSS 基础

如何在 HTML 和 CSS 中设置文字颜色

学习使用十六进制、RGB、HSL 和 CSS 变量设置可读文字颜色，并正确处理对比度与回退方案。

发布于 2026年7月5日更新于 2026年7月29日

CSS 通过 color 属性控制文字颜色。最清晰的方式是把颜色应用到有语义的选择器，让子元素自然继承。

body {
  color: #1f2937;
}

.notice {
  color: rgb(185 28 28);
}

十六进制和 RGB 都适合表达精确的 sRGB 数值；需要调整色相、饱和度或明度时，HSL 会更直观。你可以用 RGB 转十六进制工具统一已有设计令牌的格式。

用户搜索“HTML 文字颜色”时，通常是在解决三类任务：设置 CSS color 属性、把品牌 RGB 色值转换成可复制的 HEX，或检查文字颜色在最终背景上是否足够可读。

用 CSS 变量建立系统

到处重复颜色字面值会让全局调整变得困难。建议按照用途命名，而不是按照外观命名：

:root {
  --text-primary: #111827;
  --text-muted: #4b5563;
  --text-danger: #b91c1c;
}

.error-message { color: var(--text-danger); }

text-danger 这类角色名比 dark-red 更能适应改版，也便于在深色主题中覆盖。

颜色不应独自承载重要信息。WCAG AA 要求普通文字至少达到 4.5:1，大号文字至少达到 3:1。不要只凭肉眼判断，应把真实的前景色和背景色放进颜色对比度检查器。

实际项目里要逐一检查正文、标签、辅助文字、禁用文字、链接、悬停、聚焦和错误提示。一个链接颜色在白底上合格，放到浅色卡片或深色模式表面上可能就会失败。

需要沉稳正文色时可以查看海军蓝色值；错误提示则可比较红色色阶，从中选择在目标背景上合格的颜色。

下一步继续了解 CSS 背景颜色如何影响文字可读性。