Color Mixer
Enter two colors and adjust the mix ratio with the slider. The tool blends the RGB channels linearly and shows the result along with an 11-step gradation from color 1 to color 2.
HEX
RGB
HSL
Full Blend Scale
How Color Mixing Works
Each RGB channel is blended independently using linear interpolation: result = color1 × (1 − ratio) + color2 × ratio. At 0% the result is entirely color 1; at 100% it's entirely color 2; at 50% it's an even mix.
This produces the same result as CSS color-mix(in srgb, color1 50%, color2).
Practical Uses
- Creating smooth transitions between two brand colors.
- Finding midpoint colors for borders, shadows, or hover states.
- Building custom gradients with precise control over the midpoint.