color

Definition

The color CSS property sets the foreground color value of an element’s text content and text decorations. It doesn’t affect any other aspect of the element’s appearance. It can take several types of color values, such as keywords, hexadecimal, RGB, or HSL.

Syntax

body {
  color: #0f172a;
}

Values

<color> keywords, hex, RGB(A), HSL(A), LAB/LCH (modern browsers).
currentColor: reuse the element’s computed text color for other properties.
inherit / initial / unset: cascade helpers.

Practical Examples

.prose {
  color: #1f2937;
}

.prose a {
  color: #0ea5e9;
}

Assign base typography color and override interactive elements for emphasis.

HTML

Accessible color usage

Set a readable default text color and use accent hues for interactive elements like links.

Tone down supporting copy by adjusting lightness instead of lowering opacity.

Code

<article class="space-y-3 rounded-xl border border-slate-200 bg-white p-6 shadow-sm text-slate-700">
  <h3 class="text-lg font-semibold text-slate-900">Accessible color usage</h3>
  <p>Set a readable default text color and use accent hues for interactive elements like <a class="font-semibold text-sky-500 underline-offset-4 hover:underline" href="#">links</a>.</p>
  <p class="text-sm text-slate-500">Tone down supporting copy by adjusting lightness instead of lowering opacity.</p>
</article>

Tips & Best Practices

Always test contrast ratios (WCAG AA/AAA) when customizing text colors.
Use CSS custom properties to manage palette theming and dark mode variants.
Leverage currentColor to keep icons and borders in sync with text color.

Accessibility & UX Notes

Aim for at least 4.5:1 contrast for body text and 3:1 for large type; avoid using color alone to convey meaning.

Browser Support

Text color is universally supported. Modern color spaces like color(lab …) require evergreen browsers.

background-color for contrast pairing.
color-scheme when supporting dark mode.
mix-blend-mode for advanced layering.