demo · v131
hover / active / disabled states from one color
A button takes color: var(--brand) and derives every interactive state — hover background, active state, disabled fade, focus ring — through oklch(from currentcolor ...). Pick a brand colour and hover/click each variant. The states stay accessible because they're computed in OKLCH lightness.
the api
.btn {
color: var(--brand);
border: 2px solid currentcolor;
background: oklch(from currentcolor l c h / 0.08);
}
.btn:hover { background: oklch(from currentcolor l c h / 0.18); }
.btn:active { background: oklch(from currentcolor l c h / 0.30); }
.btn:disabled { color: oklch(from currentcolor calc(l + 0.3) calc(c * 0.5) h); }
/* Solid variant - flip L for legible label */
.btn.solid {
background: currentcolor;
color: oklch(from currentcolor calc(1 - l) c h);
}