Color Mixer
Blend two HEX colors and slide the ratio to find the exact midpoint — or anything between — with a live swatch and copyable hex.
How it works
Pick two colors and the mixer blends them channel by channel. Slide toward color A and the result leans A's way; slide toward B and it shifts the other direction. At 50/50 you get the true midpoint between the two.
The blend happens in RGB: each of the red, green, and blue values is interpolated between the two colors by the ratio you set, then the result is written back as a hex code. Move the slider and the swatch follows instantly.
This is handy for finding a color that ties two others together — a border that sits between a card and its background, or a middle step for a gradient you're hand-building. Copy the result and you're done.
Frequently asked questions
How does the mixing ratio work?
The slider sets how much of color B goes into the blend, from 0% (all A) to 100% (all B). At 50% you get an even mix — the straight average of the two colors' red, green, and blue values.
Does it mix like paint or like light?
It blends the RGB numbers, which behaves like mixing light on a screen rather than pigments on paper. That's the right model for web and UI colors, though it won't perfectly predict what physical paint would do.
Can I copy the mixed color?
Yes. The result shows as a hex code with a copy button, so once you land on a blend you like, you can drop it straight into your CSS or design tool.