ffee All tools
EN 中文 FR DE

Color Mixer

Blend two colours at any ratio and see every step of ten along the way.

Mix two colours

Result: #800080 · rgb(128, 0, 128) · hsl(300, 100%, 50%)
Pick the space that matches your design system: sRGB is the classic average, linear RGB avoids muddy mid tones, HSL spins around the wheel.

How to use the Color Mixer

  1. Pick colour A and colour B with the two colour fields.
  2. Choose the colour space used for blending, then move the ratio slider.
  3. Check the eleven step strip and copy the result as HEX, RGB or HSL.

Features

Advertisement

More tools

Color Converter Color Picker Color Palette Generator Random Color Generator Color Shades Generator Color Harmony Generator Color Blindness Simulator Color Name Finder Image Color Picker Color Temperature Converter CSS Color Converter Image Compressor

Frequently Asked Questions

Common questions about the free online color mixer.

It interpolates each channel between two colours using the ratio you choose, so zero percent gives colour A and one hundred percent gives colour B.
sRGB adds the channel numbers directly, linear RGB blends in light linear space, and HSL blends hue, saturation and lightness separately.
sRGB values are gamma encoded. Linear blending is what a real light source does, so it avoids the dark muddy bands plain averaging can produce.
sRGB matches most design tools and CSS gradients. Use linear RGB for glows and lights, and HSL when you want the hue to travel around the wheel.
Eleven swatches from zero to one hundred percent, each labelled with its ratio and hex value, so you can see the full blend path at a glance.
Not directly in one pass. Mix two colours, copy the result, then paste that hex value into one of the two fields and mix it with the next colour.
Use the three copy buttons to place the hex, the RGB or the HSL value on your clipboard in one click.
The maths runs in floating point and only the displayed and copied values are rounded, so repeated mixes stay close to the original result.
No. Both colours and every intermediate step are computed in your browser, so nothing is uploaded or stored.

Last updated: October 10, 2026