Colour that behaves

--brand-500: oklch(0.55 0.22 275);
--brand-300: oklch(0.75 0.22 275);   /* same hue and chroma, lighter */

Goes on: your primitive colour tokens.

Read it as oklch(lightness chroma hue). Lightness runs from 0 to 1, chroma from 0 (grey) to roughly 0.37, hue in degrees. To make a tint, raise L and leave the other two alone. The palette generator builds a whole ramp this way.

Careful. High chroma at very high or very low lightness can name a colour no screen can show. The browser brings it back into range, and the result may be duller than you expected. Stay under about 0.2 chroma for anything near white or black.

.btn:hover {
  background: color-mix(in oklch, var(--brand), black 15%);
}

Goes on: hover, active, disabled and border colours.

Mixing toward black or white in oklch keeps the hue steady. Mixing in sRGB, the default of older tools, drifts toward grey in the middle. Mixing with transparent gives a tint that works on any background. Compare the spaces side by side in the colour studio.

What it replaced: Sass darken() and lighten(), which ran once at build time and could not follow a theme.

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

Goes on: role tokens that should stay related to the brand.

oklch(from var(--brand) l c h) opens a colour up and hands you its channels as variables. Keep the hue and lower the chroma for a muted version, keep everything and add alpha for a tint, or rotate the hue by 180 for a complement. When the brand changes, the family changes with it.

Careful. Check the badge. Where it is not supported the whole declaration is dropped, so put a plain colour on the line before it.

:root { color-scheme: light dark; }
.card { background: light-dark(#fff, #14161d);
        color:      light-dark(#14161d, #f2f3f7); }

Goes on: role tokens. color-scheme goes on :root.

color-scheme: light dark tells the browser the page supports both, which also fixes form controls and scrollbars. light-dark(a, b) then picks a value by the scheme in effect. Set color-scheme: dark on any element and everything inside it flips, so a dark footer on a light page needs no second set of tokens.

What it replaced: every colour declared twice, once inside prefers-color-scheme.

.tag { background: var(--tag-colour);
       color: contrast-color(var(--tag-colour)); }

Goes on: text over a background a user or a CMS can change.

It returns black or white, never a brand colour, and it aims at readable, not at beautiful. That makes it right for tags, avatars and user-chosen label colours, and wrong for a headline over your hero. Until the badge says otherwise, set a colour by hand first and let this replace it.

.cta {
  background: #f0532d;                         /* everyone */
}
@media (color-gamut: p3) {
  .cta { background: color(display-p3 0.98 0.30 0.12); }
}

Goes on: one or two accents, not the whole palette.

Many current phones and laptops can show colours outside sRGB, more saturated oranges, greens and pinks in particular. The media query asks the screen, which matters more here than the browser does. An oklch() value with high chroma reaches the same colours and needs no query, because the browser fits it to whatever the screen can do.