Color Mixer
Pick two colors and blend them together with a custom ratio.
#6366f1 #ac8235 #f59e0b #ac8235 rgb(172, 130, 53) hsl(40, 53%, 44%) What Is a Color Mixer?
A color mixer blends two input colors together to produce a third color based on a specified ratio. This is essentially a weighted linear interpolation (lerp) between the two colors in RGB space. At 0% the result is pure Color A; at 100% it is pure Color B; at 50% it is an equal blend of both. Adjusting the slider lets you fine-tune the mixture to achieve exactly the mid-tone you want.
The Color Mixer is a practical tool for designers building gradient-based UI elements, for artists exploring color transitions, and for developers who need a calculated mid-color for hover states, borders, or background layers. Each color is shown as a swatch along with its HEX code. The resulting mixed color is displayed prominently in the center with its HEX, RGB, and HSL values all available for copying.
All blending is performed client-side using simple math: each RGB channel of the output is the weighted average of the corresponding channels of the two input colors. This gives smooth, predictable results. Use the tool alongside our Palette Generator and Gradient Generator to build complete color systems.
Frequently Asked Questions
How does the color mixing math work?
The mixer performs a linear interpolation (lerp) in RGB space. For each channel (R, G, B), the output value is (1 - t) * colorA + t * colorB, where t is the mix ratio from 0 to 1. This produces a smooth, predictable blend between the two input colors.
What input formats are supported?
You can pick colors using the native color picker (click the colored square) or type a HEX code directly into the text field. Both inputs for each color are synchronized — changing one updates the other.
Can I use the mixed color in CSS?
Yes. The tool outputs the mixed color in three formats: HEX, RGB, and HSL. Each has a copy button so you can paste the value directly into your CSS, whether you need a hex code, an rgb() function, or an hsl() function.
What are practical uses for a color mixer?
Use it to calculate hover-state colors (e.g., a slightly lighter or darker variant), to find mid-tones between a primary and secondary brand color, to create smooth transition colors for UI elements, or to explore how two colors blend before committing them to a gradient or palette.