Mix with currentColor for Themable Components

Components that Inherit Their Tint

currentColor is a CSS keyword that resolves to whatever value the color property currently has on the element. Combined with color-mix(), it lets you build components that adapt to whatever color context they appear in:

.icon-button {
  color: var(--brand);
  background: color-mix(in oklch, currentColor 8%, transparent);
  border: 1px solid color-mix(in oklch, currentColor 32%, transparent);
}

.icon-button:hover {
  background: color-mix(in oklch, currentColor 16%, transparent);
}

A parent can swap the color of .icon-button to red, blue, or var(--brand-success) and the background/border tint follows automatically. No theme variants, no extra modifiers.

Why this is better than rgba(currentColor, 0.08)

currentColor cannot be used inside rgba() directly — it is a keyword, not a color literal that has channels you can pull apart. color-mix(in oklch, currentColor 8%, transparent) is the modern, working equivalent and keeps the perceptual benefits of OKLCH.

Building a "ghost button" set

Combine with custom properties for cleaner authoring:

.button { --weight: 8%; background: color-mix(in oklch, currentColor var(--weight), transparent); }
.button:hover  { --weight: 16%; }
.button:active { --weight: 24%; }

Now the entire interaction state lives on a single custom property.