The color property sets the foreground color of an element’s text and text decorations. It also defines currentColor, which other properties can reuse (for example border-color).
It does not paint the background — that is background-color. The property is inherited, so one rule on a parent can color nested text.
Not deprecated and not experimental. Supported everywhere modern browsers run, including Internet Explorer for classic color values.
color: <color> | currentColor | initial | inherit;A <color> can be a name (red), hex (#2563eb), rgb(), hsl(), and more. The initial value is canvastext. The property is inherited.
| Value | Description | Try it |
|---|---|---|
| Named color | Keywords such as red or rebeccapurple | Try it |
| Hex | #rgb, #rrggbb, optional alpha | Try it |
rgb() | Red, green, blue channels; optional alpha | Try it |
hsl() | Hue, saturation, lightness; optional alpha | Try it |
currentColor | Uses the element’s color; as color itself acts like inherit | Try it |
initial | Resets to the initial canvastext value | Try it |
inherit | Takes the parent’s text color (also the default behavior) | Try it |
colorPick a readable text color, then check it against the background.
rgb(), or hsl().color: … on the element (or a parent, since it inherits).background-color when needed.currentColor if you want them to match the text.| Piece | Required? | Role |
|---|---|---|
| Color value | Yes | Name, hex, rgb(), hsl(), … |
| Background contrast | Strongly recommended | Keep WCAG contrast for readable text |
| Inheritance | Automatic | Children use the parent color unless overridden |
currentColor | Optional | Match borders and icons to the text color |
Change only color on the sample sentence. The background stays light for contrast.
Each snippet focuses on color. Keep backgrounds light so the text stays readable. Use Try It Yourself for a live editor.
Set paragraph text with a hex value.
<style>
p {
color: #2563eb;
}
</style>
<p>Blue text with hex</p>p element.#2563eb is a six-digit RGB hex.The same idea with channel functions.
<style>
p {
color: rgb(220, 38, 38);
}
</style>
<p>Red text with rgb()</p>color still only sets the foreground.rgb(220 38 38 / 0.8).hsl(0 84% 50%) for a similar red by hue.Set text color once; the border follows automatically.
<style>
p {
color: #0f766e;
border: 3px solid currentColor;
padding: 8px;
}
</style>
<p>Text and border share one color</p>color: #0f766e is the source value.currentColor reads that computed color.color updates the border too.currentColor.If the text looks wrong, check these first.
Aim for about 4.5:1 contrast for normal text (WCAG). Light gray on white fails many readers.
Use background-color to fill behind text. Mixing them up is a common beginner mistake.
Children take the parent’s color. Override on the child when you need a different shade.
color: currentColor means inheritWhen used as the value of color itself, currentColor is treated like inherit.
opacity affects text and background together. Prefer an alpha in the color value when only the text should be translucent.
color is a browser CSS property for text and foreground color. Node.js, Deno, and Bun do not apply it.
Classic values (names, hex, rgb, hsl) work in all major browsers, including Internet Explorer. Newer spaces like oklch need modern browsers.
Bottom line: Safe everywhere for names, hex, rgb, and hsl. Use newer color functions only when you can require modern browsers. It is not a runtime API.
currentColor.rgb(), hsl(), and more.One line: color: #2563eb; paints the text; pair it with a contrasting background.
Split content into a fixed number of newspaper-style columns.
18 people found this page helpful