Super Boring Tools

Search tools

Find a tool by name or what it does.

Color Mixer

Blend two hex colors at any ratio and copy the mixed hex and RGB.

Mix ratio

50% Color A50% Color B
Mixed color
#95639D
Blend range

Click a step to copy its hex value.

Everything is blended in your browser. Nothing is uploaded.

How to mix two colors online

  1. Set two colors

    Enter a hex code or use the color picker for the first color and the second color you want to blend.

  2. Choose the mix ratio

    Drag the slider to set how far to blend from the first color toward the second, from 0 to 100 percent.

  3. Copy the result

    Copy the mixed color as hex or as an rgb() string, or click any step in the blend strip to copy that color.

Why use this tool

Blend at any ratio

A single slider mixes the two colors from 0 to 100 percent and updates the result the moment you drag it.

Hex and RGB output

Every mix is reported as a 6-digit hex code and an rgb() string, each ready to copy with one click.

Five-step blend strip

See the mixes at 0, 25, 50, 75, and 100 percent side by side, and click any step to copy its hex value.

Reads 3 and 6-digit hex

Type or paste hex in the short or long form, or use the built-in color pickers, and invalid input is flagged without breaking the result.

Runs entirely in your browser

Every color is blended on your device, so nothing you enter is uploaded or stored.

About this tool

A color mixer blends two colors into the single color that sits between them. Give it a start color and an end color as hex values, set how far to blend from one toward the other, and it interpolates each red, green, and blue channel to produce the result. At 0 percent you get the first color untouched, at 100 percent the second, and every value in between is a straight linear mix of the two.

Mixing colors this way is useful when you need a midpoint between two brand colors, a muted version of an accent, or a believable in-between step for a chart, a gradient stop, or a state like hover. It reads and writes standard 6-digit hex, also accepts the 3-digit shorthand, and reports the result as both hex and an rgb() string you can paste straight into CSS. The five-step blend strip shows the quarter points across the full range at a glance, and each step copies its own hex.

The blend happens in RGB space, the same space the browser paints in, so what you copy is exactly what you see. To turn any mixed value into HSL or another notation, open the color converter. For a smooth CSS ramp between the two colors rather than discrete steps, try the gradient generator, and to expand a single result into a full tint and shade range, use the color shades generator.

Frequently asked questions

How does the color mixing work?
The mixer blends in RGB space, taking the red, green, and blue channels of each color and interpolating them by the ratio you set. At 50 percent every channel lands exactly halfway between the two colors. The result updates live as you drag the slider or change either color.
What color formats can I use?
Enter colors as 6-digit hex like #3b82f6 or the 3-digit shorthand like #38f, or pick them visually with the color pickers. The mixed result is shown as both a hex code and an rgb() string, and each one copies with a single click.
Why does mixing on screen look different from paint?
Screens make color by adding light, so blending is done in RGB, the additive model your display uses. That is different from mixing physical paint or ink, where pigments subtract light, so mixing red and green on screen trends toward a dull olive rather than the brown you might expect on a palette.
Can I mix more than two colors?
This tool blends two colors at a time. To build a smooth ramp across several colors, use a gradient tool, and to generate a run of lighter and darker steps from one color, use a shades tool. For a two-color blend and its in-between values, this is the fastest path.
Is my data uploaded anywhere?
No. Everything runs in your browser; nothing is sent to a server.

Related tools