About Color Mixer

Color Mixer blends two colors. Set how much of each you want, or ask for a number of evenly spaced steps between them.

It can mix in plain sRGB or in linear light for a more physically even blend, and it can tint, shade, or tone a single color. It runs in your browser.

How to use it

  1. Enter two colors in any CSS form.
  2. Set the blend amount or the number of steps.
  3. Copy the hex, RGB, or HSL value of any result.

Common questions

What is the difference between sRGB and linear mixing?

sRGB mixing averages the stored values and is what most tools do. Linear mixing converts to linear light first, which keeps mid-blends from looking muddy.

What do tint, shade, and tone mean?

Tint mixes toward white, shade mixes toward black, and tone mixes toward grey.

Which color formats are accepted?

Anything the shared color parser reads: hex, rgb(), hsl(), and named colors.

Does anything leave my browser?

No. The tool runs entirely on this page.