What property is used to change the text color in CSS?

LowEasyCss

By FrontendAtlas Team · Updated Mar 8, 2026

Quick Answer

Use the CSS color property to set text (foreground) color. It supports named colors, hex, rgb/rgba, hsl/hsla, and currentColor. In practice, the key is readable contrast against the background.

Answer

Direct answer

The property is color.

CSS

h1 {
  color: #1d4ed8;
}

p {
  color: rgb(31, 41, 55);
}

Format	Example	When teams usually use it
Hex	`color: #0f172a;`	Design tokens and handoff specs.
RGB/RGBA	`color: rgba(15, 23, 42, 0.85);`	When opacity control is needed.
HSL/HSLA	`color: hsl(222 47% 11%);`	Theme tuning with hue/lightness.
currentColor	`border-color: currentColor;`	Keep icon/border aligned with text color.

Same property, different value styles.

Accessibility-first example

CSS

:root {
  --text-primary: #111827;
  --surface: #ffffff;
}

.card {
  background: var(--surface);
  color: var(--text-primary);
}

Pick colors as a pair (text + background), not in isolation. Good contrast is part of correctness, not polish.

Practical scenario
You are building form states: default text, helper text, error text, success text. You define semantic token colors and reuse them consistently.

Common pitfalls

Using color alone for status (no icon/text label).
Passing contrast in light mode but failing in dark mode.
Hard-coding random hex values across components.

Trade-off or test tip
Design tokens require setup, but they pay off in consistency and theme support.

Still so complicated?

If HTML is the content, color is the ink the user reads. Wrong ink/background pairing makes even correct content unusable.

Summary

Use color for text/foreground color.
It supports multiple color formats and inherits down the tree.
Always validate contrast on real backgrounds and themes.