Color Mixer
Mix two colors and get the blend plus every step between them in HEX, RGB and HSL. Choose sRGB, linear-RGB or perceptual OKLab mixing, set per-color opacity, and copy the matching CSS gradient.
Input
Pick a color, or type a HEX value directly.
How many intermediate colors to generate. The two originals are always included.
sRGB matches most mixers; OKLab keeps brightness even and avoids muddy mid-tones.
Output
The two colors blended in equal parts.
Your color palette will appear here.
Every computed stop is written out, so a linear-RGB or OKLab ramp survives in plain CSS.
Guides
What this tool does
The Color Mixer blends two colors and shows you everything in between. Pick a start color and an end color, choose how many steps you want, and you get the 50/50 mix, the full ramp of intermediate colors in HEX, RGB and HSL, and a ready-to-paste CSS gradient carrying the same stops.
It's the digital equivalent of mixing two paints — except you can see every intermediate shade at once, copy any of them with a click, and control exactly how the two colors are averaged.
How to use it
- Set the Start Color and End Color (use the picker, or type a HEX value).
- Drag Steps in Between for how many intermediate colors you want. The two originals are always included.
- Optionally lower Start Opacity or End Opacity to mix translucent colors.
- Copy the 50/50 mix, click any swatch to copy its HEX, or grab the CSS gradient.
Everything runs in your browser — no upload, no account, no limits.
Choosing a mixing color space
This is the setting most color mixers don't give you, and it changes the result a lot.
- sRGB averages the raw channel numbers. It's what almost every mixer does, and it matches what people expect — but blends through two saturated colors often sag into a muddy, dark middle.
- Linear RGB converts out of sRGB's gamma curve first, mixes actual light, then converts back. This is how light physically combines, so the middle stays brighter.
- OKLab mixes in a perceptually uniform space. Lightness and hue move at a steady visual rate, so the ramp reads evenly spaced to the eye — the best choice for design-system scales and gradients.
Blue to yellow is the classic test: in sRGB the midpoint drifts toward gray, while OKLab keeps it looking like a real transition.
Why does the CSS gradient list every stop?
A browser interpolating a two-stop linear-gradient() does it in sRGB. If you mixed in linear RGB or OKLab, a two-stop gradient would throw that away. Writing out every computed stop pins the ramp you actually chose, and it works in every browser.
What do the 8-digit hex values mean?
When a mixed color ends up translucent, the tool switches to #rrggbbaa (and rgba() / hsla()), where the last pair is the alpha channel. Fully opaque colors stay in the familiar 6-digit form. Opacity is always blended linearly, whichever color space you pick.
What if I want shades of one color instead of a blend of two?
Use the Color Tint & Shade Generator, which mixes a single base color toward white and black. For a multi-stop gradient with angles and positions, try the CSS Gradient Generator, and to pull colors out of an existing image use the Color Palette Extractor.