Color Mixer
Blend two colors together to generate gradient palettes for your designs.
background: linear-gradient(90deg, #F54927, #F0426E, #E048A0, #C655CA, #A563E8, #7A72F7, #3B82F6);Mixing in sRGB space
The mixer interpolates between two endpoint colors along a straight line in sRGB channel space. At 50% balance you get the mathematical midpoint—not necessarily the perceptual midpoint a human eye would expect, but a predictable blend for CSS gradients and data visualization.
Adjust the balance slider to preview intermediate stops. Increase midpoints to export a longer palette suitable for heatmaps, progress bars, or multi-step backgrounds.
Practical uses
Derive hover and pressed states by mixing a brand color toward black or white.
Build gradient palettes between accent and neutral colors for charts and illustrations.
Export the generated stops as hex values for direct use in `linear-gradient()` declarations or design tokens.
For perceptually even steps across hues, consider OKLCH-based tooling after identifying endpoints here.