Color Mixer

In-Depth Guide

Mixing two colours mathematically has a surprisingly large number of correct answers, depending on the colour space you mix in and what visual property you want to preserve across the interpolation. Linear-RGB mixing (which CSS Color 5's color-mix(in srgb-linear, a, b) performs) matches how photons add up in the physical world, the right answer for light and emissive displays modelling real radiance. Perceptual mixing in OKLab or CIELAB matches how humans see colour blending, the right answer for gradients and UI where perceptual uniformity matters most. Naive sRGB mixing, treating the gamma-encoded values as if they were linear, is almost always wrong: it is the cause of the dead zone grey in a red-to-blue gradient that plagued Photoshop until Adobe exposed Linear Color as an option in CS6. FastTool's mixer lets you choose between sRGB, linear RGB, HSL, and OKLCH with a live side-by-side preview.

Why This Matters

Designers mix colours every time they build a gradient, interpolate between theme stops, or pick a hover state halfway between two brand colours. Doing it in the wrong space produces muddy midpoints, unintended hue shifts, and perceptually uneven progress, the kind of problem that plagued Photoshop gradients for decades until Adobe exposed Linear Color as an option in CS6. A mixer with an explicit space selector removes the guess-and-check phase of colour work and turns a half-hour experiment into a single dropdown choice backed by the real physics and perception science.

Real-World Case Studies

• Hover state generation. A product designer wants a button hover colour halfway between the default and pressed states for an interactive feedback feel. She mixes 50 percent in OKLCH and gets a hover that feels linearly darker by one step; mixing in sRGB yielded a washed-out colour that read as disabled rather than hovered in user testing, exactly the opposite of the intended signal for the checkout primary action on the payment page.
• Theme shade ramp. A frontend engineer generating a 10-step shade ramp mixes each step between white and the base colour in OKLCH, keeping luminosity perceptually even across the series. The result matches Tailwind's visual cadence without the manual hex tweaking that equivalent sRGB mixing would have required per step, and the final ramp passes WCAG AA contrast at every step-against-step pairing the design system documentation specifies.
• Paint-chip simulation. An interior product designer mocking up wall-paint samples mixes brand colours in linear RGB to match how subtractive pigments actually behave on a physical surface once applied. The preview predicts the final painted swatch within a Delta E of 3, close enough to skip the first physical sample round and save two weeks on the project schedule plus the material cost of the test jars at the paint supplier.

Technical Deep Dive

CSS Color Module 5 defines color-mix(in <space>, <color1> [<percent>], <color2> [<percent>]). The space keyword accepts srgb, srgb-linear, display-p3, a98-rgb, rec2020, prophoto-rgb, xyz, xyz-d50, xyz-d65, lab, lch, oklab, oklch, hsl, and hwb. Percentages default to 50 percent each and normalise to sum equals 100 if both are provided. For cylindrical spaces (HSL, LCH, OKLCH), hue interpolation follows the shorter hue, longer hue, increasing hue, or decreasing hue keyword per CSS Color 4 specification. Linear-RGB mixing applies gamma-inverse (x^(1/2.2) simplified, or the piecewise sRGB formula per IEC 61966-2-1) before averaging and re-applies gamma on output to the display. Edge cases: out-of-gamut results are clipped or gamut-mapped per the color-gamut of the output device and its declared colour profile; alpha is premultiplied before mixing in all spaces to avoid edge-pixel halo artifacts around transparent regions where naive straight-alpha mixing would produce fringing; pure cylindrical hue ambiguity (grey plus grey, since achromatic colours have no meaningful hue axis) uses the powerless-hue rule from CSS Color 4.