CSS Color Mix Generator

You need a hover state for your primary button — 15% darker than the brand color. The old way: open a color picker, eyeball a darker shade, hardcode the hex. The new way: color-mix(in oklch, #6366f1 85%, black) — pure CSS, no preprocessor, and it stays in sync if the brand color changes. But mixing in srgb vs oklch vs hsl gives you three visibly different results for the same 50/50 blend, and picking the wrong color space produces the infamous “muddy middle.”

Why This Generator (Not the Color Function Generator or Manual CSS)

PureDevTools has a CSS Color Function Generator that shows all modern color formats for a single color. This tool is focused specifically on color-mix() — it lets you pick two colors, choose from 8 color spaces, drag a blend ratio slider, and see the mixed result update in real time with a side-by-side comparison. You can see why oklch produces a better midpoint than srgb before committing to either. All processing happens in your browser; no color data leaves your device.

What Is CSS color-mix()?

The color-mix() CSS function lets you blend two colors together in a specified color space, producing a new color value you can use anywhere a color is accepted. It was introduced in CSS Color Level 5 and is now supported in all major modern browsers.

The basic syntax is:

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

For example, mixing red and blue equally in the oklch color space:

background-color: color-mix(in oklch, #ff0000 50%, #0000ff 50%);

This is more powerful than simply averaging hex values because the mixing happens in the perceptual color space you choose, which affects the hue, lightness, and chroma of the result.

Choosing a Color Space

The color space you pick profoundly changes the appearance of the mixed color. Here is what each option means:

• srgb — The standard Red-Green-Blue color space used by most monitors. Mixing here can produce unexpected dark or desaturated midpoints (“the muddy middle” problem).
• display-p3 — A wider gamut color space used by modern displays (iPhone, Mac). Produces slightly more vivid results than sRGB.
• oklch — Perceptually uniform lightness, chroma, and hue. Produces the most visually consistent midpoints and is recommended for UI color systems.
• oklab — Like oklch but in Cartesian (L, a, b) form. Also perceptually uniform; great for smooth gradients without hue shift.
• hsl — Hue, Saturation, Lightness. Mixes travel around the hue wheel, which can produce rainbow transitions.
• hwb — Hue, Whiteness, Blackness. Similar to HSL but intuitive for adding white or black to a hue.
• lab — CIE Lab, a device-independent perceptual space. Similar to oklab but uses the older D50 white point.
• lch — CIE LCH, the cylindrical form of Lab. Mixes hues along the color wheel while preserving perceptual lightness.

For most UI use cases, oklch produces the best looking results with predictable mid-tones.

Percentages and Proportions

The two percentages control how much of each color contributes to the result:

• color1 100%, color2 0% — pure color1
• color1 0%, color2 100% — pure color2
• color1 50%, color2 50% — equal blend
• color1 30%, color2 70% — 30% of color1, 70% of color2

The two percentages must add up to 100% for predictable results. This generator automatically calculates color2’s percentage as 100% − percentage1 so they always sum correctly.

You can omit one percentage in handwritten CSS and the browser fills in the complement, but explicitly writing both is clearer and more portable.

Practical Use Cases

Tinting and Shading

Mix a brand color with white or black to create lighter tints and darker shades:

/* Light tint: 20% brand color over white */
--color-tint: color-mix(in oklch, #6366f1 20%, white);

/* Dark shade: 20% black into brand color */
--color-shade: color-mix(in oklch, #6366f1 80%, black);

Transparency-Like Effects Without Alpha

Mix a color with the page background to simulate opacity without rgba():

/* Looks like #6366f1 at 30% opacity on white */
--color-ghost: color-mix(in srgb, #6366f1 30%, white);

Dynamic Theming with CSS Variables

Combine color-mix() with custom properties to build flexible design tokens:

:root {
  --brand: #6366f1;
  --brand-light: color-mix(in oklch, var(--brand) 60%, white);
  --brand-dark: color-mix(in oklch, var(--brand) 80%, black);
}

Hover and Focus States

.button {
  background: #6366f1;
}
.button:hover {
  background: color-mix(in oklch, #6366f1 85%, black);
}

Browser Support

color-mix() is supported in:

• Chrome 111+
• Firefox 113+
• Safari 16.2+
• Edge 111+

For older browsers, always provide a fallback:

.element {
  background-color: #7c3aed; /* fallback */
  background-color: color-mix(in oklch, #6366f1 50%, #ec4899);
}

Frequently Asked Questions

What is the difference between color-mix() and rgba() for transparency? rgba() adds a transparency channel; the background shows through. color-mix() blends two opaque colors into a new opaque color — no transparency involved. They produce visually similar results when mixing with white or black, but color-mix() keeps the element fully opaque.

Why does oklch produce better results than sRGB mixing? sRGB is not perceptually uniform — equal numerical steps don’t look equally different to the human eye. oklch is designed so that equal step changes in lightness and chroma look perceptually equal, producing midpoints that are neither too light nor too dark.

Can I use color-mix() in CSS custom properties? Yes. color-mix() can be used anywhere a color value is accepted, including inside var() expressions and as the value of a custom property:

--accent: color-mix(in oklch, #6366f1 60%, #ec4899);
color: var(--accent);

Does color-mix() work with named CSS colors? Yes. You can mix any two valid CSS color values, including named colors (red, blue, transparent), hex codes, rgb(), hsl(), oklch(), and others.

What happens if the percentages don’t add up to 100%? If they sum to less than 100%, the missing portion is treated as transparent, making the result partially transparent. If they sum to more than 100%, they are normalized to sum to 100%. This generator always keeps the sum at exactly 100%.

Is color-mix() the same as CSS gradients? No. Gradients transition between colors across a space (background-image). color-mix() produces a single, static blended color value that can be used as a paint color, border, outline, etc.

Does this tool send my colors to a server? No. All color mixing and CSS generation happens entirely in your browser. Nothing is transmitted.