Online Tool Store
Color Mixer
Blend two HEX colors at any ratio in linear light, generate a 3–9 step palette, and copy or download CSS variables locally.
🔒 This tool runs entirely in your browser. Your files are never uploaded to a server.
Example shown — pick your own two colors and ratio.
Generated palette
Palette colors
Color A
Mixed result
Color B
Mixed HEX
Mixed RGB
How the color mixer works
- Pick or type two HEX colors — Color A and Color B.
- Drag the ratio slider toward whichever color you want to dominate the blend.
- The mixed swatch, HEX code, RGB value, and generated stepped palette update instantly as you adjust either color or the ratio.
The method
Each color's red, green, and blue channels are converted from gamma-encoded sRGB to linear light, blended using the ratio, then converted back to sRGB for display. Blending in linear space avoids the darkened, slightly grey look you get from averaging sRGB bytes directly.
mixed = linearToSrgb(srgbToLinear(A) × (1 − t) + srgbToLinear(B) × t)
Example: mixing #2F6FED (blue) and #FFD166 (gold) at 50/50 gives a warm, balanced mid-tone rather than a flat grey-brown you'd get from a naive byte average. Choose 3, 5, 7, or 9 palette colors when you need a reusable range between the endpoints.
FAQ
Why doesn't a 50/50 mix look like a plain average of the two RGB values?
This tool mixes colors in linear light rather than averaging raw sRGB bytes. sRGB values are gamma-encoded for displays, so a direct average of two bytes looks noticeably darker and muddier than an actual light-based blend — converting to linear light first, mixing, then converting back gives a more natural-looking result.
Does this simulate physical paint mixing?
No. Paint mixing is subtractive and depends on pigment chemistry, which varies a lot between paints. This tool blends light (additive color), which matches what you'd get mixing colors on a screen or in design software, not literal paint.
Can I type a HEX code instead of using the color picker?
Yes. Type or paste a 6-digit HEX code into either text field and the swatch and picker update to match.
Is the mix ratio saved if I leave the page?
No. Everything resets on reload — the calculation runs entirely in your browser and nothing is sent anywhere or stored.
Can I export the mixed palette as CSS variables?
Yes. Once a palette is generated you can copy or download it as CSS custom properties, ready to paste into a stylesheet.
How many colors can I generate in the palette?
Choose 3, 5, 7, or 9 evenly spaced steps between your two endpoint colors, all mixed in linear light the same way as the main blend.
How we compare
| Feature | Online Tool Store | colorxs.com | Adobe Color |
|---|---|---|---|
| Adjustable mix ratio, not just 50/50 | ✓ | Fixed midpoint | ✓ |
| No sign-up or account | ✓ | ✓ | Adobe account |
| Runs entirely on your device | ✓ | Not stated | Not stated |
If you want fine control over the blend ratio between two colors with an instant, private preview, the Online Tool Store Color Mixer keeps everything on your device.