CSS color Property

If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!

Description

The CSS color property is used to define the foreground color of text and text-based elements within an HTML document. It plays a central role in visual design, readability, and user experience, as it directly affects how content is perceived and interpreted by users. While it most commonly controls the color of plain text, it also applies to other text-related elements such as list markers, form input text, and certain inline elements. Because of its wide influence, choosing appropriate text colors is essential for creating accessible and visually balanced layouts.

Beyond aesthetics, the color property contributes significantly to usability and accessibility. Proper contrast between text and its background ensures content remains readable for users with visual impairments or when viewed in different lighting conditions. Designers often pair the color property with background-related properties to maintain clarity and hierarchy across a page. When used thoughtfully, color can guide attention, highlight important information, and improve overall comprehension without overwhelming the user.

The color property also supports inheritance, meaning child elements can automatically take on the text color of their parent unless explicitly overridden. This makes it especially useful for maintaining consistent styling across large sections of a website while reducing repetitive code. When combined with CSS variables or theming techniques, the color property becomes a powerful tool for implementing light and dark modes, brand color systems, and user-customizable themes. Its simplicity and flexibility make it one of the most fundamental yet impactful properties in CSS.

Definition

Initial value: Depends on the user agent. For example, your browser sets its own default colors for different elements.
Applies to: All elements
Inherited: Yes
Computed value: For a non-translucent color, an hexadecimal equivalent is used. Otherwise it is the RGBa equivalent
Animatable: Yes
JavaScript syntax: object.style.color

Interactive Demo

The rusty swing set creaked a lonely lullaby in the twilight, shadows lengthening like grasping fingers across the dew-kissed grass. A lone dandelion seed, adrift on the breeze, whispered secrets of faraway fields, of dandelion suns and galaxies spun from fluff. Somewhere, beyond the veil of dusk, a coyote laughed, echoing through the stillness like a forgotten memory.

Syntax

color: <color> | inherit

Values

<color>Is a color value giving the color of the textual elements of the element.
inherit

Example

HTML

<div class="example">

  <h1>CSS color property  -  examples</h1>

  <p class="hex">Hex color: #3498db</p>

  <p class="rgb">RGB color: rgb(46, 204, 113)</p>

  <p class="rgba">RGBA color: rgba(231, 76, 60, 0.85)</p>

  <p class="named">Named color: tomato</p>

  <p class="currentcolor">CurrentColor example: <span class="badge">Badge</span></p>

  <button class="btn">Button text</button>

</div>

CSS

/* Example styles demonstrating the color property */
.example {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  padding: 24px;
  background: #f8f9fb;
  border-radius: 8px;
  max-width: 520px;
}

h1 {
  font-size: 18px;
  margin: 0 0 12px 0;
  color: #2c3e50;
}

.hex {
  color: #3498db;
  margin: 6px 0;
}

.rgb {
  color: rgb(46, 204, 113);
  margin: 6px 0;
}

.rgba {
  color: rgba(231, 76, 60, 0.85);
  margin: 6px 0;
}

.named {
  color: tomato;
  margin: 6px 0;
}

.currentcolor {
  color: #8e44ad;
  margin: 6px 0;
}

.badge {
  display: inline-block;
  padding: 2px 8px;
  font-size: 12px;
  color: #fff;
  background-color: currentColor;
  border-radius: 999px;
  margin-left: 8px;
}

.btn {
  margin-top: 12px;
  padding: 8px 14px;
  background: #34495e;
  color: #ffffff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

Result

Editor

Browser Support

The following information will show you the current browser support for the CSS color property. Hover over a browser icon to see the version that first introduced support for this CSS property.