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

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

body {
  color: #1f2937;
}

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

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

用 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 背景颜色 如何影响文字可读性。