Color Mixer — Blend Two Colours, See HEX, RGB & HSL

More Color Tools Tools

CC

Color Converter

Bidirectional color converter — HEX, RGB, HSL, HSV, CMYK, plus a native color picker, all updating live as you type.

CC

Contrast Checker

Check the WCAG 2.1 contrast ratio between foreground and background colours — pass/fail for AA and AAA at a glance.

T&

Tint & Shade Generator

Generate 10 tints and 10 shades from any base colour — 21 swatches with hex codes, one click to copy.

RC

Random Color Generator

Generate truly random colours with channel locking and a 5-colour history — copy the hex code with one click.

PG

Palette Generator

Generate harmonious colour palettes from a base colour — Complementary, Analogous, Triadic, Tetradic, and Monochromatic.

CN

Color Name Finder

Find the closest CSS named colour for any hex code — top 5 matches ranked by RGB distance.

CT

CMYK to Pantone

Find the closest Pantone colour for any CMYK mix — top 3 matches with official-looking names and swatches.

MC

Material Color Generator

Generate a full Material Design colour palette — 50 through 900 shades plus A100-A700 accent colours from any primary hex.

GG

Gradient Generator

Build live CSS gradients — Linear, Radial, and Conic — with multiple colour stops, angle control, and copyable CSS output.

IC

Image Color Picker

Pick any pixel colour from an uploaded image — zoom lens, live HEX/RGB/HSL, lock colour on click.

How to Use Color Mixer

Choose two colours — each with a hex input and a native colour picker — then drag the ratio slider to blend between them. At 0% the result is entirely Colour 1; at 100% it is entirely Colour 2; at 50% it is an equal mix. The blended colour is displayed as a swatch, with its HEX, RGB, and HSL values shown underneath. Copy buttons let you grab the result in any of the three formats.

About Color Mixer

Colour mixing is a surprisingly nuanced topic because there is no single "correct" way to blend two colours — the result depends on which colour space you perform the interpolation in. Mixing in RGB space (which is what this tool does) produces results that correspond to how light mixes on a screen: red and green give yellow, blue and green give cyan, and red and blue give magenta. Mixing in a perceptual colour space like CIELAB or OKLCH would give different intermediate colours that may look more natural to a human eye, but RGB-space mixing has the advantage of being predictable, reversible, and matching what most CSS gradient and animation engines do. The formula is linear interpolation (lerp) per RGB channel: result_channel = channel1 × (1 - ratio) + channel2 × ratio, where ratio is a value between 0 and 1 controlled by the slider. At 0% (ratio=0), the formula collapses to channel1 — you get Colour 1 exactly. At 100% (ratio=1), it becomes channel2 — you get Colour 2 exactly. At any intermediate value, each channel is the weighted average of the two input channels. One subtlety: because the interpolation is linear in device-RGB space, not in perceptual space, the midpoint (50%) between a highly saturated colour and its complementary colour may produce a dull grey rather than a vibrant intermediate — this is the same effect you see when blending distant hues in a paint program with a soft brush. It is not a bug; it is the mathematical result of averaging opposed R, G, and B channel values. If you want perceptual blending, you can use this tool's HSL display to read the hue yourself and design a manual intermediate. A colour picker input is provided for each of the two source colours, and the slider automatically updates the result colour swatch as you drag. The ratio can also be typed directly into a number field alongside the slider for precision — typing "37" sets the blend to exactly 37% of Colour 2, which is useful when you are trying to match a known target colour and want to be precise about the proportion.

Details & Tips

Implementation detail: the mixing is performed in integer RGB space (0-255 per channel), rounding each channel's interpolated value to the nearest whole number so the output colour is always a valid 8-bit-per-channel colour. The ratio slider and number input are kept synchronised via Alpine's `x-model` binding on the same data property. Worked examples: - Colour 1: #FF0000 (pure red), Colour 2: #0000FF (pure blue), ratio 50% → result #800080 (purple), the average of (255,0,0) and (0,0,255). - Colour 1: #000000 (black), Colour 2: #FFFFFF (white), ratio 25% → result #404040 (dark grey), R=G=B=64. - Colour 1: #FF0000 (pure red), Colour 2: #00FF00 (pure green), ratio 50% → result #808000 (olive/yellow), R=G=128, B=0. The result colour swatch is itself a clickable button — clicking it cycles through displaying the result in HEX, RGB, and HSL formats under the swatch, so you always have the representation you need without cluttering the interface with three lines of colour values at once. **Copy behaviour:** Three copy buttons sit next to the result swatch, one for each format: "HEX" copies `#rrggbb`, "RGB" copies `rgb(r, g, b)`, and "HSL" copies `hsl(h, s%, l%)`. Clicking a copy button shows a brief "Copied!" confirmation that auto-clears after 2 seconds. **Perceptual note:** This tool blends in RGB, not in a perceptually uniform space. If you are mixing colours for a gradient in CSS, this is actually the correct behaviour — CSS `linear-gradient` and `radial-gradient` also interpolate in sRGB by default. So the result you see here matches what a CSS gradient midpoint between the same two colours would produce on screen.

Frequently Asked Questions

How does the colour mixer work?

It performs linear interpolation (lerp) in RGB space: each channel of the result is the weighted average of the corresponding channels of Colour 1 and Colour 2, with the weight controlled by the ratio slider.

What does the ratio slider control?

It sets how much of Colour 2 is in the mix. 0% means pure Colour 1; 100% means pure Colour 2; 50% is an equal blend of both.

Why does mixing complementary colours sometimes produce grey?

Because averaging opposed RGB channels (e.g. red at 255,0,0 and cyan at 0,255,255) gives (128,128,128), which is middle grey. This is mathematically correct for RGB-space interpolation and matches how CSS gradients behave.

Can I type the ratio instead of using the slider?

Yes — a number input next to the slider lets you type any integer from 0 to 100 for precise control.

Does this blend in a different colour space than RGB?

No — it blends in RGB. This matches how CSS gradients interpolate by default and is predictable and fast. For perceptual blending in a uniform colour space, you would need a tool that uses CIELAB or OKLCH.

Can I copy the result in different formats?

Yes — copy buttons for HEX, RGB, and HSL are shown next to the result swatch, so you can grab whichever format you need.

What happens if I pick the same colour for both inputs?

The ratio slider has no effect — the result is that same colour at every ratio, since the average of identical channel values equals the original value.

Does the swatch update while I drag the slider?

Yes — the result colour swatch and all format displays update live on every `@input` event from the slider, so you see the blend changing in real time.

Can I use the colour picker for both source colours?

Yes — each source colour has its own native `<input type="color">` picker. Selecting a colour from the OS palette updates that source and immediately recomputes the blend.

What are the practical uses of this tool?

Common uses include finding an intermediate colour for a gradient, previewing what a CSS transition midpoint would look like, creating harmonious colour palettes by blending brand colours, and exploring what happens when tinting or shading a colour by blending with white or black.

Is my data sent to a server?

No — the blending calculation is pure JavaScript running in your browser. Nothing is transmitted anywhere.