🎨 color-mix() — Mixing Colors in Modern CSS

🌐 What is color-mix()?

color-mix() is a modern CSS color function that allows you toblend two colors together in any supported color space. It works similarly to mixing paint — producing a new color based on percentages.

>>“color-mix() lets you create custom blended colors directly in CSS — with no preprocessor needed.”

Note

✔ Fully supported in all modern browsers (Chrome, Edge, Safari, Firefox).
✔ Great for theming, dynamic UIs, hover effects, and tonal palettes.

🎯 Syntax

color-mix Syntax

color-mix(in <color-space>, <color1> <percentage>?, <color2> <percentage>?)

If percentages are not provided, CSS assumes a 50/50 mix.

📌 Simple Example

Mixing Red and Blue

.box {
  background: color-mix(in srgb, red 50%, blue 50%);
}

This produces a purple-like color.

🎨 Supported Color Spaces

Color SpaceWhy Use It?
srgbStandard for web colors
srgb-linearMore accurate blending
display-p3Wide-gamut colors (brighter)
labHuman-perceptual blending
oklabBetter perceptual accuracy

Note

💡 If unsure, use srgb (default for screens) or oklab (best visually).

🎯 Example With Custom Percentages

Weighted Mix

.button {
  background: color-mix(in srgb, #ff0000 80%, white 20%);
}

Produces a lighter red — great for soft backgrounds or hover states.

🌈 Example — Creating Theme Shades

Theme Shades Example

.primary-light {
  background: color-mix(in srgb, var(--primary) 30%, white 70%);
}

.primary-dark {
  background: color-mix(in srgb, var(--primary) 40%, black 60%);
}

Use this to generate light/dark variants of your theme colors dynamically.

🎨 Example — Glassmorphism Borders

Glass Border

.glass {
  border: 1px solid color-mix(in srgb, white 70%, transparent);
}

Creates a frosted translucent border effect.

🧪 Example — Better Hover Effects

Hover Effect

button {
  background: var(--primary);
  transition: 0.3s;
}

button:hover {
  background: color-mix(in oklab, var(--primary) 80%, white 20%);
}

Slightly brightens the color on hover using perceptually correct mixing.

📐 Example — Dynamic Color Contrast

Contrast Mix

.text {
  color: color-mix(in oklab, black 70%, white 30%);
}

Useful for dark mode → ensures readable text.

🧠 How color-mix() Distributes Colors

Total percentage does not need to equal 100%. If it's less or more, CSS normalizes it automatically.

Auto-Normalization

color-mix(in srgb, red 20%, blue 20%); /* becomes 50/50 */

📌 Mixing Transparency

Mixing Opacity

background: color-mix(in srgb, rgba(255, 0, 0, 0.8), transparent 30%);

Produces a transparent red tint.

📱 color-mix() + CSS Variables

Variable Mix

:root {
  --brand: #ff5722;
}

.card {
  background: color-mix(in srgb, var(--brand) 60%, white 40%);
}

Enables dynamic theming across components.

⚠️ Common Mistakes

  • ❌ Forgetting to specify color space → inconsistent results
  • ❌ Expecting exact hex output (color-mix outputs computed colors)
  • ❌ Mixing incompatible spaces without understanding differences
  • ❌ Using too much black → quickly turns muddy
  • ❌ Forgetting percentages default to 50/50

Note

🧠 Best color spaces for UI design: oklab or lab.

🔥 Summary

color-mix() is a powerful CSS function that allows developers to blend colors directly in the browser. Whether you're creating themes, hover effects, gradients, or responsive color palettes,color-mix() gives you precise creative control.

>>“With color-mix(), CSS finally becomes a color laboratory — no preprocessor needed.”

Learn more →MDN Docs 📘