The color property in CSS controls the color of text content. It affects inline text and can be defined using various color formats such as names, hexadecimal, RGB, RGBA, or HSL. It is one of the most widely used CSS properties for visual styling. Text color must meet contrast ratios and theming needs. Test with different backgrounds and user zoom.
What property is used to change the text color in CSS?
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 determines the text color for an element. It applies to all textual content inside that element, including paragraphs, headings, and links. You can define the color in several ways, using keywords or numeric color models for precision.
Format | Example | Description |
|---|---|---|
Named Colors | color: red; | Uses predefined names such as 'black', 'gray', 'coral', or 'gold'. |
Hexadecimal | color: #00ff7f; | Specifies red, green, and blue in hexadecimal notation. |
RGB | color: rgb(255, 165, 0); | Defines red, green, and blue values between 0–255. |
RGBA | color: rgba(255, 0, 0, 0.7); | Adds transparency through an alpha channel. |
HSL | color: hsl(0, 100%, 50%); | Specifies hue, saturation, and lightness for more intuitive color control. |
Example: Setting the Text Color Globally
CSS
body {
color: #333333;
background-color: #f8f8f8;
}
This sets all text on the page to a dark gray tone, improving contrast and readability on a light background.
Example: Styling Specific Elements
CSS
h1 {
color: royalblue;
}
p.note {
color: rgba(120, 0, 0, 0.8);
font-style: italic;
}
Here, the heading appears in royal blue, while paragraphs with class 'note' appear as semi-transparent dark red.
Best Practices
- Maintain proper contrast between text and background colors for accessibility.
- Avoid using pure black (#000) on pure white backgrounds to reduce eye strain.
- Prefer RGBA or HSL for smoother color transitions and modern design systems.
Practical scenario
Use color to show error messages and success states in forms.
Common pitfalls
- Failing contrast ratios for accessibility.
- Forgetting inherited colors in nested elements.
- Using color alone to convey meaning.
Use icons or text labels alongside color. Test with contrast tools and color-blind simulators.
Still so complicated?
Think of the color property as the ink of your digital page — it decides what shade your text is printed in.
Summary
- The
colorproperty defines text color for an element. - Accepts multiple formats: named colors, HEX, RGB(A), and HSL.
- Influences readability, accessibility, and visual hierarchy.
- Should complement background colors for contrast and clarity.
Similar questions
Guides