Color Mixer
Blend two colors by percentage and copy the resulting hex value.
Blend two colors precisely
Mixing two colors by eye is guesswork; this tool does it by math. Set two colors and a blend percentage and it returns the exact resulting hex, so you can find the midpoint between a light and dark shade, tint a brand color toward white, or interpolate a step between two swatches.
Precise blending is useful for building consistent gradients, generating in-between states, and creating tints and shades that actually sit on the line between two colors. Adjust the ratio and copy the result.
Linear blending
The blend is a straight interpolation in sRGB, so 50% lands exactly between the two hex values rather than a perceptual midpoint. Mixing runs locally and nothing is uploaded.
Frequently asked questions
What does the color mixer do?
It blends two colors by a selected ratio and outputs the resulting hex color.
How are the two colors blended?
Each RGB channel is mixed by the percentage you set. At 70%, the result is 70% of Color A's red, green, and blue plus 30% of Color B's, converted back to hex.
Will the CSS color-mix() output look the same?
Yes when used as written, because the tool outputs color-mix(in srgb, ...), which blends in the same sRGB space. Switching the CSS to "in oklch" gives a perceptually smoother, often brighter mix.
Why does mixing complementary colors look muddy?
Averaging opposite hues in RGB moves the result toward gray. For cleaner transitions between distant hues, mix in a perceptual space like OKLCH or choose an intermediate hue yourself.
Related tools
Need a polished visual system? Bushe can help turn rough ideas into production-ready design.