Color Mixer

Mix two colors with a ratio slider and watch the blend update live. Perceptually even mixing, with a copy-ready hex for the result.

A color mixer blends two colors with a slider so you can find the shade that sits between them. Set color A and color B, drag the ratio, and copy the resulting hex, so it works as a paint-style color combiner or a two-color blend tool. The mix follows a perceptual path, so the midpoint stays clean instead of dipping through grey. It runs in your browser.

Read the guide: How to mix two colors

Mixed color

#938ea4

How it works

  1. 1

    Choose two colors

    Set color A and color B with the pickers or by typing values.

  2. 2

    Slide the ratio

    Drag the slider to set how much of each color goes into the mix.

  3. 3

    Copy the result

    Copy the blended hex straight from the preview.

Instant & 100% private — nothing is uploaded

Every color is generated and converted right on your own device. Nothing is sent to a server, so there are no waits, no limits, and no copies kept anywhere.

Frequently asked questions

How does the color mixer work?
It blends your two colors along a perceptual path, so the midpoint is the natural in-between shade rather than a muddy or oversaturated detour.
What does the ratio slider do?
It sets the balance between the two colors. All the way left is pure color A (0%), all the way right is pure color B (100%), and the middle is an even 50/50 mix.
Why is the mix smoother than blending RGB?
Mixing raw RGB values often dips through dull greys. Blending in a perceptual space keeps the in-between colors looking clean and natural.
Can I mix any two colors?
Yes. Enter any CSS color, including hex, rgb() or named colors, for either end of the mix.