color

color sets an element’s foreground color and the currentColor value used by other CSS properties. It commonly colors text, but its effect is not limited to the text pixels alone.

Let the border follow the foreground

Both paragraphs share a currentColor border rule. Changing color changes their text and border together; background-color remains a separate fill.

<p class="blue">Blue foreground and border</p>
<p class="green">Green foreground and border</p>

p {
  border: 2px solid currentColor;
  padding: 0.75rem;
  background: #eff6ff;
}
.blue {
  color: #1d4ed8;
}
.green {
  color: #115e59;
}

Use color alongside a visible status label

The status has words as well as a green foreground. Readers do not need to distinguish green from another hue to understand what happened.

<p class="status">
  <svg viewbox="0 0 16 16" aria-hidden="true">
    <path d="M2 8l4 4 8-8-2-2-6 6-2-2z"></path>
  </svg>
  Saved locally in this example
</p>

.status {
  color: #115e59;
  background: #f0fdfa;
  border: 1px solid currentColor;
  padding: 0.75rem;
}
.status svg {
  width: 1rem;
  height: 1rem;
  fill: currentColor;
  vertical-align: middle;
}

Values, defaults, and inheritance

Color is inherited; its initial value is the system color CanvasText. Named colors, hex, rgb(), and hsl() are established forms. Lab, lch, oklab, oklch, color(), and color-mix() are distinct modern syntaxes with their own support requirements. color(lab …) is not the syntax for lab(); use the appropriate function.

CurrentColor on another property follows computed color. CurrentColor assigned to color itself behaves as inheritance. Text decoration color can be set separately, and descendants can override inherited text color.

Contrast and meaning

Check the final foreground against the actual painted background, including transparency and images. Normal text generally needs 4.5:1 contrast for WCAG AA; qualifying large text needs 3:1. A color alone should not carry an error, selection, or success message.

Learn background-color, opacity, and fill.

Sources and browser support

MDN: color describes the syntax and links to the specification and compatibility data. Check individual values in that table when supporting older browsers.