The color property is one of the most essential CSS properties. It sets the color of text so you can improve readability, hierarchy, and visual design on your pages.
Foreground text.
Any CSS color.
Flows to children.
blue, #ff5733.
Functional colors.
Match text color.
The color CSS property is one of the most commonly used properties. It allows you to set the color of the text content of an element — including paragraph text, headings, links, and list items.
By defining text color, you can improve the readability, aesthetics, and overall design of your web pages. The property accepts any valid CSS color value.
color styles text, not backgrounds. Use background-color for the area behind content. Pair both for good contrast.
The syntax for color is straightforward — the value is any valid CSS color:
selector {
color: color;
}p {
color: blue;
}rgb(), hsl(), and currentColor.| Question | Answer |
|---|---|
| Initial value | Browser default (typically dark text in light mode) |
| Applies to | All elements (text and text decorations) |
| Inherited | Yes |
| Animatable | Yes, by computed color value |
| Common use | Body text, headings, links, and labels |
The color property accepts standard CSS color values. Here are the most common formats:
| Value | Example | Meaning |
|---|---|---|
| Named color | color: blue; | A color keyword such as blue, red, or green. |
| Hexadecimal | color: #ff5733; | A hex code representing a color. |
| RGB | color: rgb(255, 87, 51); | Red, green, and blue channels from 0 to 255. |
| HSL | color: hsl(9, 100%, 60%); | Hue, saturation, and lightness values. |
currentColor | color: currentColor; | Uses the element’s computed color value (often for borders and icons). |
| Format | When to use it |
|---|---|
| Named colors | Quick demos and learning — e.g. color: coral; |
Hex (#rrggbb) | Design handoffs and precise brand colors — e.g. #2563eb |
rgb() / rgba() | When you need transparency with the alpha channel |
hsl() / hsla() | Adjusting lightness or saturation without changing hue |
var(--token) | Theme colors stored once and reused across the site |
Four paragraphs styled with different color values — named blue, red, green, and HSL purple.
This paragraph uses a blue text color.
This paragraph uses a red text color.
This paragraph uses a green text color.
This paragraph uses an HSL purple text color.
Try named colors, hex values, HSL, and CSS variables for theme text colors.
Start with the reference example — change paragraph text to blue with a named color.
Change the text color of a paragraph to blue.
<style>
p {
color: blue;
}
</style>
<p>This is a paragraph with blue text.</p>The named color blue applies to all text inside the paragraph element.
Use a hexadecimal color for precise brand-colored headings.
<style>
h2 {
color: #ff5733;
}
</style>
<h2>Brand-colored heading</h2>Hex colors like #ff5733 give exact control over the text color value.
Use HSL and CSS variables when you need flexible, theme-friendly text colors.
Set text color with HSL — easy to adjust lightness for muted or emphasis text.
.muted {
color: hsl(215 16% 47%);
}
.accent {
color: hsl(9, 100%, 60%);
}HSL separates hue, saturation, and lightness — change the last value to lighten or darken text without picking a new hex code.
Store text colors in custom properties and apply them across your layout.
:root {
--text-primary: #1e293b;
--text-link: #2563eb;
}
body { color: var(--text-primary); }
a { color: var(--text-link); }Because color is inherited, setting it on body styles all text unless a child overrides it — links often need their own rule.
color WorksChoose a named color, hex, rgb, hsl, or CSS variable in your stylesheet.
The value becomes the element’s computed foreground color for text and decorations.
Unless overridden, nested text elements receive the same color from their parent.
Your content displays in the chosen color with clear hierarchy and design consistency.
The color property is universally supported across all modern browsers, including Chrome, Firefox, Safari, Edge, and Opera, as well as older browsers.
Every browser supports color — it is one of the original CSS properties and remains essential today.
Bottom line: Use color with confidence in every project. Modern color functions like oklch() are supported in newer browsers as an optional enhancement.
The color property is an essential tool for styling text on your web pages. By customizing text color, you can enhance the visual appeal and readability of your content.
Experiment with named colors, hex, RGB, HSL, and CSS variables to see how this property can improve the look and feel of your web projects.
body and override for headings or linksbackground-color for readable blocks of contentcolor with background-colorcolorUse these points when styling text on your pages.
Foreground content.
PurposeFlows to children.
CascadeNamed, hex, rgb, hsl.
ValuesMatch text elsewhere.
KeywordWorks everywhere.
BrowserOpen the HTML editor, set color: blue on a paragraph, and try hex and HSL values.
5 people found this page helpful