CSS color-mix() Calculator

About this generator

CSS color-mix() shipped in every evergreen browser by mid-2023 and quietly turned into one of the most useful stylesheet features of the decade. The entire argument for a modular design system — tints, shades, hover states, disabled states, low-emphasis variants — collapses from "generate a dozen hex tokens per color" to "mix the base color with white, black, or a neutral at a few percentages." The problem is that the choice of color space inside the function changes the answer in ways that are not obvious until you see them. Mixing #2563EB with #F59E0B at 50% in sRGB gives you a muddy taupe that reads as "neither color." The same mix in OKLCH gives you a saturated, hue-aware midpoint that keeps the perceived vibrancy of both ends intact. The same mix in Lab lands somewhere in between, usually a little cleaner than sRGB but not as crisp as OKLCH. This calculator is a playground for that choice. Pick two colors, pick a mixing percentage, pick a space, and you see the resulting hex plus the exact CSS color-mix() syntax you can paste into a stylesheet. The hex preview is computed with the real color-space math — sRGB linear interpolation for in srgb, OKLab-channel interpolation for in oklch and in oklab, and CIE Lab-channel interpolation for in lab — so what the swatch shows is what the browser will render. The headline recommendation, well understood by now in the design-tool community, is "in oklch, every time, unless you have a specific reason." OKLCH interpolation produces mid-colors that match perceptual expectation, keeps lightness changes even across hues, and avoids the dead-grey midpoint that bedevils sRGB. The exception is when you are mixing a color with a near-white or near-black tint and want to preserve the exact HSL-style lightness ramp a designer baked into Figma — in that case Lab interpolation sometimes reads cleaner, and sRGB is defensible for backwards compatibility with hand-crafted palettes from the pre-OKLCH era. The percent input is the weight of color A — 50% is a true midpoint, 25% leans toward B, 75% leans toward A. Internally the calculator normalises the two weights to sum to 100% exactly as the CSS spec requires, so the preview and the exported CSS always agree. The output is designed for drop-in use: the hex is the fallback value for browsers you no longer need to support, and the color-mix() string is the forward value that browsers do support. In practice, most teams ship both as a `color: color-mix(...)` with a `color: <hex>` fallback above it, and let the cascade sort it out. If you are building a semantic color scale from a single brand color, this calculator plus the OKLCH Color Converter is roughly 80% of the pipeline — generate ten mixes with white at 5% through 50%, generate ten mixes with black at 5% through 50%, and you have a complete tint-and-shade scale that is perceptually even in a way manual Figma-eyeball picks almost never are.

Use Cases

• •Generate a semantic tint/shade scale from a brand color by mixing with white and black in OKLCH.
• •Preview a hover state as 90% base + 10% black before committing it to the CSS token layer.
• •Compare the same mix across OKLCH, Lab, and sRGB to decide which interpolation space the design system should standardise on.
• •Produce the exact CSS color-mix() string for a disabled state so engineering can paste it without rounding.
• •Explore gradient midpoints visually by sweeping the percentage slider between two palette colors.
• •Teach a design-system working group why "mix two colors" is not a space-free operation.

FAQ