Interview answer drill

Use this CSS interview question to rehearse a quick answer, common mistake, follow-up, and production pitfall.

Practice interview questions Follow 7-day crash study plan Practice more CSS interview questions

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

LowEasyCss

By FrontendAtlas Team · Updated Mar 8, 2026

Interview focus

This CSS interview question tests whether you can explain CSS Text Color Property: How to Use color Correctly, connect it to production trade-offs, and handle common follow-up questions.

CSS Text Color Property: How to Use color Correctly explanation without falling back to memorized docs wording
Colors and Text reasoning, edge cases, and production failure modes
How you would answer the most likely CSS interview follow-up

Practice more CSS interview questions

Interview 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.

Full interview 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.