Colour

Relative colors

Newly availablesince Sept 2024

Replaces: A token for every variant of a brand colour. Hover, muted and border colours are derived from one source value by channel arithmetic.

See it working

The syntax

--brand:       #4f46e5;
--brand-muted: oklch(from var(--brand) l calc(c * 0.35) h);
--brand-tint:  oklch(from var(--brand) l c h / 12%);

The demo’s full CSS

.dm-rc { --dm-b: #4f46e5; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.dm-rc i { display: block; height: 64px; border-radius: 10px; background: var(--dm-b); }
.dm-rc .dm-rc-b { background: oklch(from var(--dm-b) calc(l - 0.12) c h); }
.dm-rc .dm-rc-c { background: oklch(from var(--dm-b) l calc(c * 0.35) h); }
.dm-rc .dm-rc-d { background: oklch(from var(--dm-b) calc(l + 0.25) calc(c * 0.4) h); }

For browsers without it

Put a hex on the line above each derived colour. In a browser without it all four swatches above are the same indigo, which is the fallback doing its job.