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.
Use it from code
From 3 credits per callREST API
curl -X POST https://api.iotools.cloud/v1/tool/color-mixer \
-H "Authorization: Bearer YOUR_API_KEY" \
-H "Content-Type: application/json" \
-d '{
"startColor": "#2563eb",
"startOpacity": "100",
"endColor": "#f59e0b",
"endOpacity": "100",
"steps": "3",
"colorSpace": "srgb"
}'Swap in your own key from your account. The tool's fields are the body — no wrapper.
Ask an AI agent
Use the IOTools `color-mixer` tool (Color Mixer) on this input:
YOUR_INPUT_HEREPaste this at any agent connected to the IOTools MCP server, then add your input.