What is Color Mixer?

Blend two colors together with a ratio slider and see the result in real time. Outputs HEX, RGB, and HSL values you can copy straight into your code or design tool.

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