demo · v131

Link State Palette

Every link state — normal, visited, hover, active, focus — derives its color from a single brand hue using oklch(from currentcolor …). Pick a color once; the whole palette shifts together. No per-state hex values required.

Normal L 0.45 C 0.18
Visited L 0.35 C 0.12
Hover L 0.55 C 0.22
Active L 0.30 C 0.25
Focus ring L 0.50 C 0.18

The web platform has never moved faster. Features like CSS Anchor Positioning and View Transitions are giving developers new primitives for building fluid, expressive interfaces without reaching for JavaScript at every turn. At the same time, Baseline is making it easier than ever to understand exactly which capabilities you can rely on across all major browsers.

Color management is quietly getting a major upgrade. CSS Color Level 5 introduces relative color syntax, letting you compute tints, shades, and alpha variants directly in CSS. Pair it with OKLCH — a perceptually uniform color space — and you get a design token system that behaves predictably across the entire lightness spectrum, from deep jewel tones to soft pastels, all derived from a single authored value.

Try link states

Note: Browsers don’t expose computed oklch values directly. The formulas shown are the authored source values — the browser resolves them against the computed currentcolor at paint time. The swatches above are set via style.backgroundColor = “oklch(from <hex> …)” in JS, which Chrome 131+ resolves correctly.

the code

/* Set one color on the wrapper — RCS does the rest */
.text-content {
  color: #9333ea; /* brand color */
}

/* Each link state adjusts L (lightness) and C (chroma) in OKLCH */
.text-content a:link {
  color: oklch(from currentcolor 0.45 0.18 h);
}
.text-content a:visited {
  color: oklch(from currentcolor 0.35 0.12 h);
}
.text-content a:hover {
  color: oklch(from currentcolor 0.55 0.22 h);
}
.text-content a:active {
  color: oklch(from currentcolor 0.3 0.25 h);
}
.text-content a:focus-visible {
  outline: 2px solid oklch(from currentcolor 0.5 0.18 h);
  outline-offset: 2px;
}

see also