CSScolor-mix()ThemingModern CSS

CSS color-mix(): Dynamic Color Generation in Pure CSS

color-mix() blends two colors in any color space without JavaScript or Sass. Use it to generate tints, shades, alpha variants, and entire theme palettes from a single brand color.

U

UIXplor Team

February 25, 2026 · 5 min read

✦

01color-mix() Syntax

css
/* Mix 30% of color1 with 70% of color2, in sRGB */
color: color-mix(in srgb, #B8FB3C 30%, #0a0a0f);

/* Mix in oklch for perceptually uniform blending */
color: color-mix(in oklch, blue 40%, red);

/* Create a transparent version */
background: color-mix(in srgb, #B8FB3C 15%, transparent);

The color space (`srgb`, `oklch`, `hsl`, `lab`) affects how colors blend.

02Generating a Theme Palette

css
:root {
  --brand: #B8FB3C;
  --brand-tint-10: color-mix(in oklch, var(--brand) 10%, white);
  --brand-tint-20: color-mix(in oklch, var(--brand) 20%, white);
  --brand-shade-80: color-mix(in oklch, var(--brand) 80%, black);
  --brand-alpha-15: color-mix(in srgb, var(--brand) 15%, transparent);
}

.badge { background: var(--brand-alpha-15); color: var(--brand); }
.btn:hover { background: var(--brand-shade-80); }

Change `--brand` and the entire palette updates automatically.

Related UI Components

◈

Collections

All UI component collections

Back to Blog