Runnable CSS Docs: Text Color

Q: How do I change the font color in HTML?

Use the CSS color property, in a stylesheet or a style attribute: Blue text . The old tag is obsolete.

Q: How do I change the color of one word?

Wrap the word in a and give it a color: This is red . Use or instead of if the word is also important or stressed.

Q: Is it font-color or color in CSS?

It is color. There is no font-color or text-color property; the browser ignores them.

How to change text color in HTML

Use the CSS color property. It sets the color of an element's text, and every element inside it inherits the same color unless it sets its own.

<!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>

The property is named color, not font-color or text-color. Those names do not exist in CSS and are silently ignored.

Why not the font tag

Old tutorials show . That tag was removed from HTML years ago: validators flag it as an error, and it mixes styling into the markup, so changing a color means editing every tag by hand. Browsers still draw it for compatibility, which is the only reason it seems to work.

<!-- 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>

Ways to write the color

color accepts every CSS color format. The most common four:

Format	Example	Notes
Named	`color: tomato;`	148 named colors, handy for quick tests
Hex	`color: #2563eb;`	The most common in design files
rgb()	`color: rgb(37 99 235);`	Red, green and blue from 0 to 255
hsl()	`color: hsl(221 83% 53%);`	Hue, saturation, lightness: easy to make lighter or darker

Hex, rgb() and hsl() can take an alpha channel for semi-transparent text, such as #2563eb80 or rgb(37 99 235 / 50%). The CSS colors page explains every format.

Coloring a whole page, a heading or a section

Set the color once on body and let inheritance do the rest, then override where needed:

<!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>

A soft near black such as #111827 or #374151 on white is easier on the eyes than pure #000000 and still reads as black.

Link colors

Links are the exception to inheritance: the browser gives them their own blue (and purple once visited), so a color on the parent does not reach them. Set it on the link, or tell the link to inherit:

<!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 and :focus-visible let you change the color per state; the hover page covers them. When a link is the same color as the text around it, keep its underline so it is still recognizable as a link.

Make the text readable: contrast

Text color is only half of the pair; the background is the other half. WCAG asks for a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text (about 24px, or 19px bold).

<!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>

Light gray placeholder-style text is the most common failure. Chrome and Firefox developer tools show the contrast ratio when you inspect a text color.

currentColor: reuse the text color

currentColor is a keyword equal to the element's color. Borders, outlines and inline SVG icons can use it, so one color change recolors the text and its decoration together:

<!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>

Common mistakes

Writing font-color or text-color. The property is color.
Using the  tag. It is obsolete; use CSS.
Expecting links to inherit. Set a { color: ... } or color: inherit.
Color as the only signal. "Fields in red are required" fails for readers who cannot tell red apart. Add text or an icon.
Low contrast gray text. Check the ratio: 4.5:1 or more for body text.
Using opacity to lighten text. It fades the whole element, background and children included. Use a lighter color or an alpha color instead.

Frequently Asked Questions

How do I change the font color in HTML?

Use the CSS color property, in a stylesheet or a style attribute: Blue text. The old  tag is obsolete.

Is the tag still supported?

Browsers still draw it so that very old pages keep working, but it is obsolete in HTML and validators report it as an error. Use CSS color instead.

How do I change the color of one word?

Wrap the word in a  and give it a color: This is red. Use  or  instead of  if the word is also important or stressed.

Why doesn't my link change color when I set color on the parent?

Links have their own color from the browser's stylesheet, so they do not inherit the parent's. Set it on the link itself (a { color: #2563eb; }) or use a { color: inherit; } to follow the parent.

Is it font-color or color in CSS?

It is color. There is no font-color or text-color property; the browser ignores them.

Related concepts