CSS color-mix() Examples

Interactive Color Mixer

Experiment with color-mix() to see how different colors and percentages combine.

Basic Syntax

/* Basic syntax */
color-mix(in <color-space>, <color1> <percentage>%, <color2>)

/* Examples */
color-mix(in srgb, blue 50%, red)
color-mix(in oklch, #3b82f6 70%, white)
color-mix(in hsl, var(--primary), transparent 50%)

/* Both percentages (must sum to 100% or less) */
color-mix(in srgb, blue 30%, red 70%)
color-mix(in oklch, blue 25%, red 25%) /* 50% total = 50% transparent */

Dynamic Tints & Shades

Generate a full color palette from a single base color using color-mix(). Change one variable and the entire palette updates.

:root {
  --primary: #3b82f6;

  /* Tints (lighter) - mix with white */
  --primary-50: color-mix(in oklch, var(--primary), white 90%);
  --primary-100: color-mix(in oklch, var(--primary), white 80%);
  --primary-200: color-mix(in oklch, var(--primary), white 60%);
  --primary-300: color-mix(in oklch, var(--primary), white 40%);
  --primary-400: color-mix(in oklch, var(--primary), white 20%);

  /* Base */
  --primary-500: var(--primary);

  /* Shades (darker) - mix with black */
  --primary-600: color-mix(in oklch, var(--primary), black 20%);
  --primary-700: color-mix(in oklch, var(--primary), black 40%);
  --primary-800: color-mix(in oklch, var(--primary), black 60%);
  --primary-900: color-mix(in oklch, var(--primary), black 80%);
}

Transparency Mixing

Mix colors with transparent to create semi-transparent versions of any color.

/* Semi-transparent overlay */
.overlay {
  background: color-mix(in srgb, black, transparent 50%);
}

/* Hover state with transparency */
.button {
  background: var(--primary);
}

.button:hover {
  background: color-mix(in srgb, var(--primary), transparent 10%);
}

/* Glass effect */
.glass {
  background: color-mix(in srgb, white, transparent 80%);
  backdrop-filter: blur(10px);
}

Theme System with color-mix()

Build a complete theme system from a single brand color. Interactive states, surfaces, and borders all derive from one source.

:root {
  --brand: #3b82f6;

  /* Auto-generate complementary colors */
  --brand-light: color-mix(in oklch, var(--brand), white 40%);
  --brand-dark: color-mix(in oklch, var(--brand), black 30%);
  --brand-muted: color-mix(in oklch, var(--brand), gray 40%);
  --brand-vibrant: color-mix(in oklch, var(--brand), oklch(0.7 0.2 250) 30%);

  /* Surface colors based on brand */
  --surface-brand: color-mix(in oklch, var(--brand), white 95%);
  --border-brand: color-mix(in oklch, var(--brand), transparent 70%);

  /* Interactive states */
  --brand-hover: color-mix(in oklch, var(--brand), black 10%);
  --brand-active: color-mix(in oklch, var(--brand), black 20%);
  --brand-disabled: color-mix(in oklch, var(--brand), gray 60%);
}

/* Usage */
.btn-primary {
  background: var(--brand);
}

.btn-primary:hover {
  background: var(--brand-hover);
}

.btn-primary:active {
  background: var(--brand-active);
}

.btn-primary:disabled {
  background: var(--brand-disabled);
}

Color Space Comparison

Different color spaces produce different mixing results. OKLCH typically produces more natural-looking intermediate colors.