Color Mixer

Mix two colours to get a third

Mixing two colours together to find the one that sits partway between them is genuinely useful for building palettes, finding a visual midpoint, or softening a bold brand colour by blending it with a neutral. This mixer blends any two colours at any ratio you choose and gives you the resulting HEX and RGB values, complete with a live preview so you see the blend before you commit. It is a small piece of colour arithmetic that is awkward to do in your head.

Why the ratio matters

Mixing two colours is not always a simple even fifty-fifty blend. Setting a ratio lets you find a colour that leans strongly toward one of the two inputs, say ninety per cent of a base colour with just a touch of an accent mixed in, or a perfectly even blend right in the middle. The result is computed by interpolating between the two colours across each of their channels, which means you can produce a whole smooth gradient of intermediate colours between any two, not merely the single central midpoint.

Copy the result

It runs entirely in your browser, so nothing you enter is uploaded and the generated code is yours to paste straight into a project. Because it works client-side, you can iterate freely, regenerating as often as you like without a round trip to any server.

Related tools

• Color Converter — Convert colours between HEX, RGB, HSL, HWB and OKLCH, with alpha support. Runs in your browser and shows the live swatch for each format.
• Accessibility Color Contrast Checker — Check foreground and background colour contrast against WCAG thresholds, with the rules for text size, UI components and states.
• Typography Scale Generator — Generate a modular type scale from a base size and ratio, with fluid clamp() values for responsive layouts.
• Design Token Generator — Generate design tokens as CSS variables, JSON or platform formats, structured in the layers that make them maintainable.