CSS color Property

The color property sets the foreground color of an element's text content and text decorations.

selector { color: value; }

<color>	Sets the color using keywords, hex, RGB, RGBA, HSL, or HSLA values.
currentcolor	Uses the value of the color property from the element or its parent.
inherit	Directs the element to take the color value of its parent container.
initial	Sets the property to its default value as defined by the browser.
revert	Resets the property to the user agent's default style sheet settings.
unset	Resets the property to its inherited value if it inherits, or to its initial value if not.

Code Examples

A basic example showing how to apply specific hex colors to headings and paragraphs using CSS classes.

<style>
.main-heading {
  color: #2c3e50;
}
.highlight-text {
  color: #e67e22;
}
</style>
<h1 class="main-heading">Welcome to the Dashboard</h1>
<p class="highlight-text">This is an important announcement.</p>

An advanced example using currentcolor to sync the border with the text color, and JavaScript to dynamically update the UI state.

<div id="alert-box" style="color: #c0392b; border: 2px solid currentcolor; padding: 15px;">
  <p>Status: Critical Error Detected</p>
  <button onclick="clearError()">Clear Error</button>
</div>
<script>
function clearError() {
  const box = document.getElementById("alert-box");
  box.style.color = "#27ae60";
  box.querySelector("p").innerText = "Status: All Systems Functional";
}
</script>

Pro Tip

Use the currentcolor keyword for borders and SVG icons. This allows those elements to automatically change hue whenever you update the text color of the parent, making your UI components much more flexible and easier to maintain.

Deep Dive

Think of the color property as the ink in your pen. When you apply it to an element, you are choosing the hue for the text inside that element. Because this property is inherited, setting it on a parent container like a div or the body tag will make all nested text elements adopt that color unless they have their own specific style. This property also populates the currentcolor keyword, which can be used by other properties like borders or SVG fills to stay in sync with the text color without hardcoding the value twice.

Best Practices

Define your primary colors as CSS variables at the root level so you can change your entire site's theme from one spot. Always ensure your text color stands out clearly against your background color to maintain high readability. Stick to a limited palette to keep the design professional and cohesive.

Common Pitfalls

A common mistake for beginners is trying to use the color property to change the background of a box; remember, color is for the foreground text, while background-color is for the surface behind it. Also, when using hex codes, forgetting the # symbol will cause the browser to ignore the rule entirely.

Accessibility

You must maintain a contrast ratio of at least 4.5:1 for standard text and 3:1 for large text to meet WCAG AA standards. Using colors that are too similar to the background makes your content invisible to users with visual impairments or those viewing your site in bright sunlight.

Dev Data Table: color property

default	canvastext
animatable	yes
inherited	yes
experimental	no
year_intro	1996
year_standard	1996
js_syntax_1	element.style.color = "#ff0000";
js_syntax_2	element.style.setProperty("color", "#ff0000");
js_note	When manipulating color through JavaScript, ensure the value is passed as a string and follows standard CSS color formatting.
browsers	{ "Chrome": 1, "Edge": 12, "Firefox": 1, "Safari": 1, "Opera": 3.5, "Chrome Android": 18, "Safari on iOS": 1, "Samsung Internet": 1, "Opera Mobile": 10.1 }