Relative colors

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%);

Edit the demo’s CSS

This is the stylesheet running the demo above. Change a value and watch it. Break it on purpose: delete the modern line and you are looking at the fallback.

The demo’s CSS, editable .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); }

ResetCopy

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.

Before you ship it