Color Mixer
Mix two colors and preview the intermediate steps with sRGB-linear interpolation. Generates a 9-step ramp, the chosen midpoint, and the nearest Pantone match for the blend.
- sRGB-linear interpolation — no muddy mid-tones
- 9-step ramp from A to B with click-to-copy each step
- Slider for any blend ratio with live preview
- Surfaces the nearest Pantone for the chosen mix
Direct answer
Color Mixer
9-step mix ramp · A → B in sRGB-linear
Nearest Pantone to mix
Pantone 252 C · ΔE 4.15
When this saves you time
Real workflows where color mixer replaces tedious manual work or an in-app subscription tool.
Find a balance point between two brand colors
Generate gradient stop colors
Build harmonic in-between shades
Spot-check a process-build blend
How it works
The methodology — every transformation documented so the output is reproducible.
Parse both HEX values
A and B normalize to sRGB 8-bit triples. Invalid input flags inline so partial values don't break the preview.
Convert to linear-light
Apply the sRGB EOTF (inverse-gamma) to lift each channel into linear-light space. Mixing in this space matches how the eye averages light, not how monitors encode it.
Linear interpolate by t
Per-channel: r = a*(1-t) + b*t. The slider controls t ∈ [0, 1].
Apply inverse EOTF + emit
Back to gamma-encoded sRGB, round to 8-bit, emit HEX. The 9-step ramp samples t at every 12.5%.
Worked examples
| Input | Result | Notes |
|---|---|---|
| #FF0000 + #0000FF · 50% | #BA00BA | Pure red + pure blue at midpoint — linear mix is more saturated than the gamma-encoded equivalent. |
| #FFFFFF + #000000 · 50% | #BCBCBC | White + black at midpoint in linear-light = 0.5 luminance, which renders as a brighter gray than sRGB 0.5 (#808080). |
| #FFFF00 + #0000FF · 50% | #BABA7C | Yellow + blue do not produce green in light-additive mixing — they produce a desaturated mid. |
| #FF6900 + #FFD700 · 50% | #FFA70B | Two warm yellows mix cleanly — useful for brand-color extension. |
Common mistakes to avoid
Expecting paint-mix results
Storing the mid color as a brand token
Mixing across very different hues
Treating Pantone match as exact
Frequently Asked Questions
Linear vs gamma-encoded sRGB mixing
sRGB stores brightness with a non-linear curve (approximately gamma 2.2). This is great for storage efficiency — it gives more bits to the dark tones where the eye is most sensitive. But it means a naive average of two HEX values produces a darker result than human perception expects. Mixing in linear-light space and converting back to gamma-encoded sRGB at the end gives the perceptually correct midpoint.
Why this matters in production
Most early CSS gradient implementations averaged in sRGB-encoded space, which is why the classic linear-gradient(black, white) looked muddy in the middle. The CSS Color Module Level 4 (and modern browsers) now support color-interpolation-method for picking sRGB-linear or OKLCH explicitly. This mixer uses sRGB-linear by default.
OKLCH vs sRGB-linear — when to switch
OKLCH (perceptually uniform) avoids hue shifts that sRGB-linear can introduce when mixing across very different hues — e.g. red to blue may pass through a slightly purple/muddy stretch in sRGB but stay along the perceptually-straight chroma path in OKLCH. For brand work where mid-tone hue purity matters, the gradient generator exposes OKLCH interpolation.