Developer Tools calculator

Free Color mixer

Enter two colors as hex (or use the pickers), set the mix weight, and this color mixer blends them and reads out the mixed color as HEX and rgb() with a live swatch — updated live, as you drag.

On this page12 sections

InputsLive

Example or your own

Color 1hex, or use the picker

Color 2hex, or use the picker

Mix weight (toward color 2)0% = color 1, 100% = color 2

Result

#800080

Mixed color at 50% toward color 2

#800080

The blend of #FF0000 and #0000FF is rgb(128, 0, 128).

Color 1#FF0000

Color 2#0000FF

Weight50%

Mixed rgb()rgb(128, 0, 128)

Blends two colors in sRGB by a weight. Nothing you type is stored or sent; the mix runs in your browser.

Results are estimates. Consult a professional.

What it does

What a color mixer does

Mixing two colors means finding the shades that sit between them. This tool takes a starting color and an ending color and blends them by a weight you choose, producing a single in-between color. Set the weight to 50% and you get the exact midpoint; slide it toward either end and the result leans toward that color. It is the same operation a CSS gradient performs at every step along its length.

The mixer above runs live as you type. Enter two colors as hex (or pick them with the swatches), drag the mix weight slider, and it shows the blended color three ways: a large preview, its HEX code, and its rgb() values — ready to paste into your CSS or design tool.

Blend, not paint

This is additive RGB mixing — the way screens combine light — not the subtractive mixing of physical paint. Red light plus green light makes yellow on a display, even though red and green paint would not.

How it works

How channel interpolation works

Every color on screen is three numbers: a red, a green and a blue channel, each from 0 to 255. To mix two colors, the tool blends the channels independently. For each channel it walks a fraction t of the way from the first color's value to the second's — this straight-line blend is called linear interpolation, or a "lerp".

t = weight ÷ 100 (the fraction toward color 2)

out_R = round(R₁ + (R₂ − R₁) × t)

out_G = round(G₁ + (G₂ − G₁) × t)

out_B = round(B₁ + (B₂ − B₁) × t)

Colors on the web are sRGB values with red, green and blue channels from 0–255; blending two colors is a per-channel linear interpolation of those values, the same model CSS gradients and color interpolation use.

Inputs

What to enter

Color 1 — the starting color, as a hex code (#RRGGBB or the shorthand #RGB) or chosen with the picker.
Color 2 — the ending color, entered the same way.
Mix weight — how far to blend toward color 2, from 0% to 100%. 0% returns color 1 unchanged, 100% returns color 2, and 50% (the default) is the midpoint average.

The weight is the only ratio you need. A 30% weight means "30% of the way toward color 2, 70% still color 1" — so the lower the weight, the closer the result stays to your first color.

Example

A worked example: red + blue at 50%

Example: mixing #FF0000 with #0000FF at 50%

This is the classic blend. Red #FF0000 is rgb(255, 0, 0); blue #0000FF is rgb(0, 0, 255). We will mix them at a weight of 50% (t = 0.5) and confirm the result against the mixer.

Red channel

round(255 + (0 − 255) × 0.5) = round(127.5) = 128, which is 80 in hex.

Green channel

Both colors have 0 green, so the blend is round(0 + 0 × 0.5) = 0 — hex 00.

Blue channel

round(0 + (255 − 0) × 0.5) = round(127.5) = 128 — hex 80.

Result: #800080 — rgb(128, 0, 128)

Putting the channels together gives #800080, a balanced mid-purple. Enter #FF0000, #0000FF and a 50% weight in the mixer and it shows exactly that.

Common mixes

A reference table of common 50% mixes

These are the midpoint (50%) blends people reach for most. Each row is the plain average of the two colors' channels.

Color 1	Color 2	Mix at 50%	Result
#FF0000 red	#0000FF blue	#800080	mid purple
#FF0000 red	#00FF00 green	#808000	olive / dark yellow
#00FF00 green	#0000FF blue	#008080	teal
#000000 black	#FFFFFF white	#808080	mid grey
#FFFFFF white	#3366FF blue	#99B3FF	light tint of the blue
#000000 black	#3366FF blue	#1A3380	dark shade of the blue

Midpoint blends computed by per-channel averaging (sRGB 0–255). Mixing a color with white lightens it (a tint); mixing with black darkens it (a shade).

Where it's used

What to use a color mixer for

Building tints and shades. Mix a brand color with white to get lighter tints, or with black for darker shades — handy for hover states, borders, and backgrounds that should stay on-palette.
Designing gradients. Pick intermediate stops between two colors so a gradient steps evenly instead of banding.
Interpolating brand colors. Find a color that sits halfway between two brand colors for a unifying accent, a chart series, or a blended logo state.
Generating UI state colors. Nudge a base color a small percentage toward white or black to create pressed, disabled, and focus variants from one source color.

Gotcha

When a straight sRGB mix looks muddy

Blending the raw sRGB numbers — what this tool does — is fast and matches how most CSS gradients render, but it has a known quirk: the midpoint can look darker or duller than you expect. Mixing a vivid blue with a vivid yellow in sRGB drifts through a muddy grey rather than a clean green, because the stored values are gamma-encoded rather than proportional to actual light.

Mixing in a linear-light RGB space, or in a perceptual space such as OKLCH, keeps mid-tones brighter and more even. Modern CSS lets you ask for this directly with color-mix(in oklch, …). If a blend here looks muddier than you want, that is the space talking — reach for a perceptual mix.

Perceptual color spaces such as OKLCH interpolate more evenly than sRGB; the OKLab/OKLCH model was designed so that blends and gradients avoid the muddy or uneven mid-tones that gamma-encoded sRGB mixing can produce.

Privacy

Is this color mixer private?

Yes. The blend is plain arithmetic that runs entirely in your browser. The colors you enter are never stored, logged, or sent to any server — there is no network request, because none is needed. The page works the same offline, and your palette stays on your machine.

Questions

Frequently asked questions about the free Color mixer

A color mixer calculator is a free online tool that helps you blend two colors by a weight and get the mixed HEX and rgb(), with a live swatch preview. Mixing two colors blends them channel by channel. For each of red, green and blue, walk a fraction t of the way from color 1's value to color 2's, where t = weight ÷ 100. At 50% the result is the midpoint average; at 0% it is color 1, at 100% color 2. It runs entirely in your browser with instant results and no sign-up.

It interpolates each RGB channel independently: out = round(c1 + (c2 − c1) × t), where t = weight ÷ 100 is the fraction toward the second color. At a 50% weight every channel is the plain average of the two colors, so the result is their exact midpoint.

The weight is how far to blend toward color 2, from 0% to 100%. 0% returns color 1 unchanged, 100% returns color 2, and 50% (the default) is the midpoint. A 30% weight means 30% of the way toward color 2 and 70% still color 1.

Red #FF0000 mixed with blue #0000FF at 50% gives #800080 — rgb(128, 0, 128), a balanced mid-purple. Each channel is averaged: red 255 and 0 average to 128, blue 0 and 255 average to 128, green stays 0.

Mix the color with white to lighten it (a tint), or with black to darken it (a shade). For example, a 25% blend of #3366FF toward white gives a lighter rgb(102, 140, 255). The lower the weight, the closer the result stays to your base color.

This tool blends raw sRGB values, which are gamma-encoded, so the midpoint of two vivid colors can look darker or duller than expected. Mixing in a linear-light or perceptual space such as OKLCH (CSS color-mix(in oklch, …)) keeps mid-tones brighter and more even.

About

About this Color mixer

This color mixer runs entirely in your browser — the colors you enter are never stored or sent anywhere. Enter two hex colors, set the mix weight, and it blends them channel by channel in sRGB, showing the result as HEX and rgb() with a live preview. It mixes opaque colors; alpha/opacity is handled separately.

It is one of our free developer tools; browse the full set on the calculators index.