What Is CSS currentColor? How to Reuse Text Color for Other Elements

When you change the color of a heading on a website, you may also want a small dot beside it and the card’s border to follow that change. Instead of repeating the same color code in several CSS declarations, you can use currentColor. It lets decorative elements follow a text color. To use it reliably, however, you need to know which element’s color is being referenced. This guide covers the behavior and an example using event notices with coordinated headings, borders, and dots.

Which text color does currentColor refer to?

currentColor is a CSS keyword that refers to the value of the color property on the same element. CSS (Cascading Style Sheets) describes the appearance of webpages. The color property sets the main foreground color, often used for text, and is normally inherited by child elements. For instance, if an element has blue ■#1D4ED8 text, border-left: 5px solid currentColor; on that element makes the left border blue too.

The keyword works in many properties that accept a color, including background-color and outline-color. It also works on CSS pseudo-elements such as ::before, which can add a decorative shape without adding another HTML element. In that case, currentColor follows the pseudo-element’s own color value. Border colors normally default to currentColor when no other border color is provided, but writing the keyword explicitly can make your intention clearer.

Unlike a CSS custom property, currentColor is not a named palette value stored for the entire website. If a child sets its own color, a currentColor value on that child uses the child’s changed color. And setting color: currentColor; on the color property itself means using the inherited color rather than creating a self-reference.

Example: match the heading, border, and dot in two notice cards

Imagine an event page with two notices: an update about revised materials and a reminder to check the arrival time. The page surface is white ■#FFFFFF, and each notice has a very pale blue-gray ■#F8FAFC background. The update heading is blue ■#1D4ED8; the “Please check” heading is reddish brown ■#9A3412. Both descriptions use dark blue-gray ■#334155, so the longer text stays visually restrained.

<div class="notice-list">
  <section class="notice notice--info">
    <h3 class="notice__title">Update: Materials revised</h3>
    <p>Review the latest materials before attending.</p>
  </section>
  <section class="notice notice--check">
    <h3 class="notice__title">Please check: Arrival time changed</h3>
    <p>Confirm the new check-in time before you leave.</p>
  </section>
</div>

.notice-list {
  display: grid;
  gap: 1rem;
  padding: 1rem;
  background-color: ■#FFFFFF;
}
.notice {
  padding: 1rem 1.25rem;
  border-left: 5px solid currentColor;
  border-radius: .5rem;
  background-color: ■#F8FAFC;
}
.notice--info { color: ■#1D4ED8; }
.notice--check { color: ■#9A3412; }
.notice__title {
  display: flex;
  align-items: center;
  gap: .5em;
  margin: 0;
}
.notice__title::before {
  content: "";
  display: inline-block;
  flex: none;
  width: .7em;
  height: .7em;
  border-radius: 50%;
  background-color: currentColor;
}
.notice p {
  margin: .6rem 0 0;
  color: ■#334155;
}

The two modifier classes set each card’s color. The left border uses currentColor, and the small dot created with ::before also uses background-color: currentColor;. Because the heading inherits its card’s foreground color, the heading, border, and dot all become blue on the update card and reddish brown on the other card. Changing a card’s color value therefore updates these three related parts together.

Notice that .notice p has a separate dark blue-gray text color. As a result, the descriptions do not inherit the blue or reddish-brown emphasis. If you used currentColor for decoration inside one of those paragraphs, it would resolve to the paragraph’s own dark blue-gray, not automatically to the heading color. Thinking in terms of the color used at each location helps prevent unexpected results.

Matching colors still need separate contrast checks

Against the pale notice background ■#F8FAFC, the update blue ■#1D4ED8 has a contrast ratio of approximately 6.41:1 and the reddish brown ■#9A3412 reaches approximately 6.98:1. The dark blue-gray description text ■#334155 reaches about 9.90:1. All exceed the Web Content Accessibility Guidelines (WCAG) 2.2 minimum of 4.5:1 for normal-sized text. The borders and dots use the same respective emphasis colors and exceed 3:1 against their backgrounds as well. If those shapes are essential to understanding the information, check the non-text contrast requirement too.

Using currentColor does not automatically guarantee readable colors. A darker card background or a lighter accent could lower contrast for the text, border, or dot, so check those pairs again whenever the palette changes. White ■#FFFFFF and the very pale notice background ■#F8FAFC differ by only about 1.05:1; the card areas are therefore also distinguished by spacing and their colored left borders rather than by background contrast alone.

Keep meaningful words such as “Update” and “Please check” alongside the colors, rather than relying on color to communicate the message type. Also be cautious with background-color: currentColor; on the same surface as ordinary text: filling the whole background with the text’s color can make the text disappear. It is more appropriate for limited decoration such as the dot in this example. HueRoll can help you explore color candidates and check a selected color against white or black, but it does not automatically compare arbitrary color pairs or determine WCAG conformance. Verify the final colors against the surfaces they actually touch.