How does color mixing work?

This tool blends the red, green, and blue channels of both colours proportionally according to the ratio you set. At 50/50 you get the exact midpoint; sliding the ratio weights the mix toward one colour or the other.

What color do you get mixing two colors?

It depends on the two colours and the ratio. For example, blending blue and yellow light gives a greenish tone, while mixing a colour with white or black lightens or darkens it. Use the slider above to preview any combination instantly.

Is the color mixer free to use?

Yes — free, no sign-up, and unlimited. All mixing happens in your browser, so nothing is uploaded.

Color Mixer

Blend two colours at any ratio and get the mixed HEX, RGB, and HSL

Runs locally in your browser🆓Free — no sign-up🔒100% Private

Blending two colours reveals the colour space between them, which is essential for smooth gradients, colour animation, and finding intermediary tones that bridge a palette. Calculating the midpoint between two colours by hand — averaging each RGB channel separately — is simple arithmetic but tedious when done repeatedly. A colour mixer tool automates this, letting you control the blend ratio interactively and see the result instantly with all format values. Animators and UI designers adding colour transitions use this to preview in-between shades before rendering in code. A designer matching a secondary colour to an existing palette often blends the primary and a neutral (white, grey, or black) to find a cohesive choice. Front-end developers implementing CSS gradients sometimes test intermediate colours to ensure smooth visual transitions. Slide the ratio slider to control how much of each colour is blended into the result — from pure colour one to a 50/50 mix to pure colour two. The mixed colour displays with its HEX, RGB, and HSL values, all copyable in one click. All calculation happens in your browser with no upload or external service required.

First colour

Second colour

Mix ratio50% / 50%

HEX#4178E1

RGBrgb(65, 120, 225)

HSLhsl(219, 73%, 57%)

How to use Color Mixer

1.Pick your first colour using the colour picker or by entering a HEX code.
2.Pick your second colour using the colour picker or by entering a HEX code.
3.Drag the ratio slider to control the blend — 50/50 is exactly halfway between the two colours.
4.See the mixed colour update instantly in the preview swatch with its HEX, RGB, and HSL values.
5.Click 'Copy' to copy any format of the mixed colour to your clipboard for immediate use in CSS or design tools.

Key Features

✓

Ratio-based blending — Drag the slider to blend any two colours at any ratio — see the result instantly as you move the slider from 0% to 100%.

✓

Three format output — Mixed colour shows in HEX, RGB, and HSL so you can use it in CSS variables, Canvas API, or design tools.

✓

Interactive preview — Large colour swatch shows the mixed result instantly, letting you visually confirm the blend before copying.

✓

One-click copy any format — Copy HEX, RGB, or HSL to your clipboard without selecting or typing — the value is ready to paste immediately.

Frequently Asked Questions about Color Mixer

Choose your two colours above and drag the ratio slider to control how much of each is blended. The tool shows the mixed colour with its HEX, RGB, and HSL values, which you can copy in one click.