Transparent colors with color-mix()

Baseline 2023 Reference ↗

color-mix() can derive a translucent version of any color token, even when the token is not stored as separate RGB channels.

.focus-ring {
  outline: 3px solid color-mix(
    in oklch,
    var(--accent) 55%,
    transparent
  );
}

The interpolation color space changes the result. Use a deliberate space and test the derived color against the real background.