color-mix() Blending

Quick implementation

:root {
  --c1: oklch(0.6 0.2 250);
  --c2: oklch(0.6 0.2 350);
}

.mix-element {
  /* Blend 25% of c2 into c1 */
  background: color-mix(in oklch, var(--c1), var(--c2) 25%);
}

Prompt this to your LLM

Includes role, constraints, two framework variants, and edge cases to handle.

Act as a CSS expert. Create a utility class that blends two CSS custom properties (colors) using the color-mix() function in the oklch colorspace. 

Requirements:
1. Define two root variables: --primary and --secondary using oklch().
2. Create a class .blend-25 that mixes 25% of secondary into primary.
3. Create a class .blend-50 that mixes 50% of secondary into primary.
4. Ensure the syntax is strictly color-mix(in oklch, ...).
5. Provide a fallback for browsers that do not support color-mix (using a solid color).

Output only the CSS code.

Why this matters in 2026

The color-mix() function has become a staple for modern theming. It allows designers to generate tints, shades, and harmonious blends directly in the browser without relying on Sass or Less pre-processors.

The logic

We define two base colors in oklch() space, which offers perceptual uniformity. The color-mix(in oklch, colorA, colorB 25%) syntax tells the browser to interpolate between the two colors, returning a result that is 25% of color B and 75% of color A.

Accessibility & performance

Using oklch ensures that the resulting mixed colors maintain better perceptual consistency compared to sRGB. Since this is a native CSS calculation, it runs on the compositor thread, ensuring zero layout thrashing and instant updates when variables change.