The CSS color property

Q: How do I change text color in CSS?

Set the color property on the element. For example, p { color: #1c7ce9; } turns paragraph text blue. The value can be a keyword, a hex code, or an rgb() / hsl() function.

Q: Why does color change the text and not the background?

Because color sets the element's foreground. To paint the background you want background-color instead.

Q: What is currentColor?

currentColor is a keyword that resolves to the element's own color value. Use it for borders, outlines or icons you want to match the text automatically.

Q: Is it spelled color or colour in CSS?

CSS only recognizes the American spelling — write color, not colour. The British spelling is not a valid CSS property name and is simply ignored.

Property CSS All modern browsers Updated June 22, 2026

Quick answer

The CSS color property sets the color of an element's text. Give it a keyword like red, a hex code like #1c7ce9, or a function such as rgb() or hsl(). It is inherited, so setting it on a parent colors all the text inside unless a child says otherwise.

Overview

The color property sets the color of an element's text. Point it at a value and every character inside that element is painted that color — headings, paragraphs, links, the lot.

Two things make it worth understanding early. First, it is inherited: set color on the <body> and it flows down to everything inside, so you usually pick a base color once and only override it where a section needs something different. Second, it defines the element's foreground color, which is what the special currentColor keyword points at — handy for making a border or an SVG icon match the text without repeating the value.

You can write the color four common ways: a keyword (red, rebeccapurple), a hex code (#1c7ce9), or a function such as rgb(28 124 233) or hsl(212 81% 51%). The functions are the easiest to tweak by hand, because each number maps to something you can actually reason about.

Syntax

selector {
  color: value;
}

/* e.g. blue paragraph text */
p {
  color: #1c7ce9;
}

Values

The color property accepts the values below. Every property also accepts the CSS-wide keywords inherit, initial, revert and unset.

Value	Description
`keyword`	A named color like red, tomato, white or rebeccapurple — about 150 exist.
`#hex`	A hex code such as #1c7ce9, the short #fff form, or 8-digit #1c7ce9cc with alpha.
`rgb()`	Red, green and blue channels: rgb(28 124 233). Add a / 0.5 on the end for 50% alpha.
`hsl()`	Hue, saturation and lightness: hsl(212 81% 51%), usually the easiest to adjust by hand.
`currentColor`	The element's own text color. Reuse it for borders and icons that should match.
`transparent`	Fully see-through.

Examples

Live example

<style>
  .note {
    color: #1c7ce9;
    font: 600 18px system-ui, sans-serif;
  }
  .note strong {
    color: crimson;
  }
</style>
<p class="note">This text is blue, and <strong>this part is crimson</strong>.</p>

Example #2

Live example

<style>
  .tag {
    color: #16a34a;
    border: 2px solid currentColor;
    padding: 6px 12px;
    border-radius: 8px;
    font: 600 15px system-ui, sans-serif;
    display: inline-block;
  }
</style>
<span class="tag">The border reuses the text color via currentColor</span>

Best practices

Set a base text color on the <body> and let it inherit. Override only where a section genuinely needs a different color.
Check the contrast against the background — aim for at least 4.5:1 for normal text so it stays comfortable to read (the WCAG AA threshold).
Never let color be the only signal. Pair a red error message with an icon or wording so color-blind readers are not left guessing.
Reach for currentColor on borders and icons that should track the text — change the text color once and they follow.

Accessibility

Frequently asked questions

How do I change text color in CSS?

Set the color property on the element. For example, p { color: #1c7ce9; } turns paragraph text blue. The value can be a keyword, a hex code, or an rgb() / hsl() function.

Why does color change the text and not the background?

Because color sets the element's foreground. To paint the background you want background-color instead.

Is the color property inherited?

Yes. A child element uses its parent's color unless it sets its own. That is why declaring it once on <body> is such a common starting point.

What is currentColor?

currentColor is a keyword that resolves to the element's own color value. Use it for borders, outlines or icons you want to match the text automatically.

Is it spelled color or colour in CSS?

CSS only recognizes the American spelling — write color, not colour. The British spelling is not a valid CSS property name and is simply ignored.

box-sizing cursor

References