HohoTools

Color Mixer

This free color mixer blends any two hex colors into a single, exact mid-color, controlled by a ratio slider that runs from 0% to 100%.

50%

How to use

  1. Enter the first hex color, with or without the #.
  2. Enter the second hex color.
  3. Drag the ratio slider (or type a percentage) and read the mixed HEX and RGB — 0% returns the first color, 100% the second.

Frequently asked questions

How is the blended color calculated?

By linear interpolation on each sRGB channel: every channel becomes colorA × (1 − ratio) + colorB × ratio, rounded to the nearest integer, where the ratio is the slider percentage divided by 100. The mixing happens in gamma-encoded sRGB space — the same numbers the hex codes show — which matches classic design-tool blends and the caliber used by the shades generator on this site.

Is sRGB mixing the same as perceptual mixing?

No, and the difference is intentional to document. Human perception of lightness is nonlinear, so a 50% sRGB blend of black and white lands at #808080, which looks lighter than a perceptual midpoint would. Perceptual spaces like OKLCH give more even-looking gradients for wide hue sweeps; sRGB channel mixing is simpler, reproducible by hand, and the standard behavior of CSS transitions and most design tools.

What happens at 0% and 100%?

Those boundaries are valid, not errors: at 0% every channel equals the first color exactly, and at 100% it equals the second color exactly. Intermediate values interpolate linearly between them — 25% means one quarter of the second color mixed in, and the percentage is always displayed beside the slider so you know exactly which mix you copied.

Can I mix more than two colors?

Not in one pass — the tool deliberately blends exactly two colors so the ratio stays meaningful. To average three or more colors, chain the mixes (blend A and B, then blend the result with C at your chosen percentage); each step stays exact and predictable.

Are my colors uploaded anywhere?

No. The blend is computed locally in your browser as you type or drag. Nothing leaves your device, and nothing is stored or logged.

Related tools

Color Shades Generator This free color shades generator takes one hex color and expands it into a complete tonal scale: ten shades stepping toward black and ten tints stepping toward white, laid out as a grid you can copy from with a single click. utility Random Color Generator This free random color generator produces uniformly random hex colors right in your browser, using crypto.getRandomValues — the same cryptographically secure source browsers reserve for keys and tokens. utility HEX to RGB Converter This free HEX to RGB converter turns any hex color code into its red, green and blue channels the moment you type it. utility Color Contrast Checker This free contrast checker measures any foreground/background color pair against the WCAG 2.x contrast formula and tells you instantly whether text in that combination passes accessibility thresholds. utility Color Picker from Image Matching a color you can see but cannot name is a daily problem in front-end work, slide design and photo retouching. image
About this tool

This free color mixer blends any two hex colors into a single, exact mid-color, controlled by a ratio slider that runs from 0% to 100%. Finding the color between two colors comes up constantly: gradient stops that transition smoothly instead of banding, a bridge color that keeps an illustration palette harmonious, a 30% accent for a tinted neutral, or the halfway point between a client's old and new brand colors during a rebrand. The tool computes the blend by linear interpolation on each sRGB channel — the same arithmetic, in the same color space, as the shades generator — so every channel becomes colorA × (1 − ratio) + colorB × ratio, rounded to the nearest integer. The ratio is explicit rather than hidden: drag the slider to 25% and you get precisely three quarters of the first color and one quarter of the second, and the current percentage is always shown next to the slider. The boundaries are exact too — at 0% you get the first color unchanged and at 100% the second, with no rounding drift and no error. Invalid hex input is rejected with a clear message instead of a wrong result. Everything is computed locally in your browser; nothing is uploaded or stored. Pick your two colors below and find the color in between.