The color property sets the foreground text color of an element (not the background). It accepts named colors, hex, rgb/rgba, hsl/hsla, and currentColor. Color choices must meet accessibility contrast and be tested across themes and backgrounds.
What is the purpose of the color property?
Preparing for interviews?
Use guided tracks for structured prep, then practice company-specific question sets when you want targeted interview coverage.
Quick Answer
Answer
Overview
The color property controls the text color of an element. It applies to inline content (like text and icons) and can be set using named colors, hexadecimal, RGB, RGBA, HSL, or HSLA values.
Format | Example | Description |
|---|---|---|
Named Color | color: red; | Human-readable and predefined by CSS (e.g., blue, green, black). |
Hexadecimal | color: #1e3a8a; | Compact hex codes representing RGB values. |
RGB | color: rgb(30, 58, 138); | Red, Green, Blue channel definition. |
RGBA | color: rgba(30, 58, 138, 0.8); | Same as RGB, but with transparency (alpha channel). |
HSL / HSLA | color: hsl(220, 50%, 40%); | Hue, Saturation, and Lightness for intuitive color control. |
Example: Basic Text Coloring
CSS
h1 {
color: #0ea5e9;
}
p.note {
color: rgba(0, 0, 0, 0.7);
}
This example gives headings a vivid blue color and paragraphs a slightly transparent black tone for softer contrast.
Accessibility Considerations
- Ensure sufficient contrast between text color and background for readability.
- Use tools like WCAG contrast checkers to maintain accessibility standards.
- Never rely on color alone to convey meaning (e.g., for errors, also use icons or text).
Advanced Use
You can define custom color variables with CSS custom properties::root { --brand-color: #0ea5e9; }h1 { color: var(--brand-color); }
This allows centralized theme management across large projects.
Practical scenario
Display success/error messages where text color conveys status and must remain readable on different backgrounds.
Common pitfalls
- Low contrast ratios that fail accessibility guidelines.
- Forgetting inherited color can affect nested elements unexpectedly.
- Hard-coding colors instead of using design tokens.
Semantic colors aid UX but must pass contrast checks. Test with a contrast checker and in dark mode themes.
Still so complicated?
The color property is simply your text’s paintbrush — pick any hue, opacity, or tone to match your design’s mood.
Summary
colorchanges text color and inline content color.- Supports various color models (Hex, RGB, HSL, etc.).
- Vital for design consistency and accessibility.
- Combine with
background-colorfor complete visual control.
Similar questions
Guides