CSS 可运行文档：文字颜色

Q: 如何在 HTML 中修改字体颜色？

使用 CSS 的 color 属性，写在样式表里或 style 属性中： Blue text 。旧的 标签已经废弃。

Q: 如何修改一个词的颜色？

用 把这个词包起来并给它设置颜色：This is red .。如果这个词同时也很重要或需要强调，就用 或 代替 。

Q: 为什么给父元素设置了颜色，链接却不变色？

链接的颜色来自浏览器自带的样式表，所以它们不会继承父元素的颜色。直接在链接上设置（a { color: #2563eb; }），或者使用 a { color: inherit; } 让它跟随父元素。

Q: CSS 中是 font-color 还是 color？

是 color。CSS 中没有 font-color 或 text-color 属性；浏览器会忽略它们。

HTML 字体颜色：如何用 CSS 修改文字颜色

标签已经废弃；HTML 中的文字颜色要用 CSS 的 color 属性来设置。本文讲解如何给整个页面、一个词、一个链接或一个标题设置颜色，如何使用颜色名称、十六进制和 rgb，以及如何保证文字清晰可读。

本页包含可运行的编辑器。编辑、运行，立即查看输出。

作者：Kevin Spektor，联合创始人兼 CTO

发布于 Sep 24, 2026

如何在 HTML 中修改文字颜色

使用 CSS 的 color 属性。它设置元素文字的颜色，元素内部的每个子元素都会继承同样的颜色，除非它们设置了自己的颜色。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Text color</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 18px; }
    .blue { color: #2563eb; }
    .green { color: rgb(22 163 74); }
  </style>
</head>
<body>
  <p class="blue">Blue text from a class in a stylesheet.</p>
  <p class="green">Green text written as rgb().</p>
  <p style="color: darkorange;">Orange text from a style attribute.</p>
  <p>Default text, then <span style="color: #dc2626;">one red word</span> in it.</p>
</body>
</html>

这个属性叫 color，而不是 font-color 或 text-color。后两个名称在 CSS 中并不存在，会被悄悄忽略。

为什么不用 font 标签

老教程里会出现 。这个标签多年前就已经从 HTML 中移除了：验证器会把它标记为错误，而且它把样式混进了标记中，改一个颜色就得手动修改每一个标签。浏览器出于兼容性仍然会渲染它，这是它看起来还能用的唯一原因。

<!-- obsolete -->
<font color="red">Warning</font>

<!-- use this -->
<span style="color: red;">Warning</span>

<!-- or better, a class you can change in one place -->
<span class="warning">Warning</span>

颜色的写法

color 接受所有 CSS 颜色格式。最常用的四种：

格式	示例	说明
颜色名称	`color: tomato;`	148 个颜色名称，适合快速测试
十六进制	`color: #2563eb;`	设计稿中最常见
rgb()	`color: rgb(37 99 235);`	红、绿、蓝，取值 0 到 255
hsl()	`color: hsl(221 83% 53%);`	色相、饱和度、亮度：很容易调亮或调暗

十六进制、rgb() 和 hsl() 都可以加上 alpha 通道来得到半透明文字，例如 #2563eb80 或 rgb(37 99 235 / 50%)。CSS 颜色页面讲解了每一种格式。

给整个页面、标题或某个区域上色

在 body 上设置一次颜色，让继承来完成剩下的工作，再在需要的地方覆盖：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Inherited color</title>
  <style>
    body { font-family: system-ui, sans-serif; color: #374151; }
    h1 { color: #111827; font-size: 24px; }
    .note { color: #92400e; background: #fef3c7; padding: 8px 12px; }
  </style>
</head>
<body>
  <h1>Heading in near black</h1>
  <p>Body text inherits dark gray from body.</p>
  <div class="note">
    <p>This box sets amber text, and the paragraph inside inherits it.</p>
  </div>
</body>
</html>

白底上用 #111827 或 #374151 这样柔和的近黑色，比纯 #000000 更护眼，看起来仍然是黑色。

链接颜色

链接是继承规则的例外：浏览器会给它们设置自己的蓝色（访问过之后是紫色），所以父元素上的颜色影响不到它们。直接在链接上设置颜色，或者让链接继承：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Link color</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .dark { color: #16a34a; }
    .brand a { color: #7c3aed; }
    .brand a:hover { color: #5b21b6; }
    .inherit a { color: inherit; }
  </style>
</head>
<body>
  <p class="dark">Green paragraph, but <a href="#x" id="l1">this link</a> keeps the browser color.</p>
  <p class="dark brand">Green paragraph, <a href="#x" id="l2">this link</a> is set to purple.</p>
  <p class="dark inherit">Green paragraph, <a href="#x" id="l3">this link</a> inherits green.</p>
</body>
</html>

:hover、:visited 和 :focus-visible 让你可以为每种状态设置不同的颜色；hover 页面介绍了它们。如果链接和周围文字的颜色相同，请保留它的下划线，这样它仍然能被认出是一个链接。

让文字清晰可读：对比度

文字颜色只是一对颜色中的一半；另一半是背景。WCAG 要求普通文字的对比度至少为 4.5:1，大号文字（约 24px，或 19px 粗体）至少为 3:1。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Contrast</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 18px; }
    p { padding: 8px 12px; margin: 6px 0; }
    .fail { color: #9ca3af; background: #ffffff; }
    .pass { color: #4b5563; background: #ffffff; border: 1px solid #e5e7eb; }
    .dark { color: #f9fafb; background: #1f2937; }
  </style>
</head>
<body>
  <p class="fail">#9ca3af on white: about 2.5:1, too light</p>
  <p class="pass">#4b5563 on white: about 7.6:1, passes</p>
  <p class="dark">#f9fafb on #1f2937: about 14:1, passes</p>
</body>
</html>

最常见的问题是像占位文字那样的浅灰色文字。在 Chrome 和 Firefox 的开发者工具中检查文字颜色时，会显示对比度。

currentColor：复用文字颜色

currentColor 是一个关键字，等于元素的 color 值。边框、轮廓线和内联 SVG 图标都可以使用它，这样只需修改一次 color，文字和它的装饰就会一起变色：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>currentColor</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .tag {
      display: inline-flex; align-items: center; gap: 6px;
      padding: 4px 10px; border: 2px solid currentColor; border-radius: 999px;
    }
    .ok { color: #16a34a; }
    .warn { color: #d97706; }
  </style>
</head>
<body>
  <span class="tag ok">
    <svg width="12" height="12" viewBox="0 0 12 12"><circle cx="6" cy="6" r="6" fill="currentColor"/></svg>
    Online
  </span>
  <span class="tag warn" id="warn">
    <svg width="12" height="12" viewBox="0 0 12 12"><circle cx="6" cy="6" r="6" fill="currentColor"/></svg>
    Away
  </span>
</body>
</html>

常见错误

写成 font-color 或 text-color。 属性名是 color。
使用  标签。 它已经废弃；请使用 CSS。
以为链接会继承颜色。 设置 a { color: ... } 或 color: inherit。
只用颜色传达信息。 “红色字段为必填项”对分辨不出红色的读者无效。加上文字或图标。
对比度过低的灰色文字。 检查对比度：正文要达到 4.5:1 或更高。
用 opacity 让文字变浅。 它会让整个元素变淡，包括背景和子元素。请改用更浅的颜色或带透明度的颜色。

常见问题

如何在 HTML 中修改字体颜色？

使用 CSS 的 color 属性，写在样式表里或 style 属性中：Blue text。旧的  标签已经废弃。

标签现在还能用吗？

浏览器仍然会渲染它，好让非常老的页面继续正常显示，但它在 HTML 中已经废弃，验证器会把它报告为错误。请改用 CSS 的 color。

如何修改一个词的颜色？

用  把这个词包起来并给它设置颜色：This is red.。如果这个词同时也很重要或需要强调，就用  或  代替 。

为什么给父元素设置了颜色，链接却不变色？

链接的颜色来自浏览器自带的样式表，所以它们不会继承父元素的颜色。直接在链接上设置（a { color: #2563eb; }），或者使用 a { color: inherit; } 让它跟随父元素。

CSS 中是 font-color 还是 color？

是 color。CSS 中没有 font-color 或 text-color 属性；浏览器会忽略它们。