What is Color Mixer?

The Color Mixer blends two colors together with an adjustable ratio slider. See the resulting mixed color in real time along with its HEX, RGB, and HSL values — perfect for creating harmonious color palettes.

How to use

1. Step 1 — Select the first color using the color picker or enter its HEX value.
2. Step 2 — Select the second color, then adjust the mix ratio slider to control the blend (0% = pure first color, 100% = pure second color).
3. Step 3 — View the mixed result with its color codes and copy the values you need.

Result

A designer mixes brand blue (#2196F3) with white (#FFFFFF) at 30% to create a subtle tint (#A1C9F8) for hover states in a UI kit.

Related Tools