Using currentColor and color-mix()

What currentColor Does

currentColor is a special keyword that always refers to the element's own computed color value. It lets a property like border or fill automatically match whatever text color is already set, without repeating the value.

.alert {
  color: #b91c1c;
  border: 1px solid currentColor; /* automatically matches the red text */
}

If .alert's color changes later - for a dark theme, for example - the border updates to match automatically, since it is not a separate hardcoded value.

What color-mix() Does

color-mix() blends two colors together directly in CSS, at a given percentage, without needing a design tool or a precomputed value.

.btn-hover {
  background: color-mix(in srgb, dodgerblue 80%, black);
}

This mixes 80% dodgerblue with 20% black, producing a slightly darkened shade - useful for generating a hover or active state directly from a base color.

Combining Them

.badge {
  color: seagreen;
  background: color-mix(in srgb, currentColor 15%, white);
}

Here the background is automatically a light tint of whatever the text color is, so changing color once updates both the text and its tinted background together.

Why These Are Useful

• Fewer hardcoded color values scattered through a stylesheet.
• Hover, focus and disabled states can be derived from a single base color instead of being picked by eye.
• Theming becomes easier - changing one custom property can cascade through several derived colors automatically.