Skip to main content
Book Consultation →
Create colors100% FreeInstant

Color Mixer: Blend Two Colors at Any Ratio

This free color mixer blends two colors at the ratio you choose and shows the result as HEX and RGB. It also lists the steps between the two colors, so you can use them as a gradient scale.

By Debmedia Technologies LLP · Kolkata, India · Updated

What Is It and When Do You Need It?

Mixing two colors finds the color that lies between them. You use it to make hover colors, to find a midpoint for a gradient or to soften a bright color toward the page background.

Choose two colors and a ratio. You get the exact mix plus a five-step ladder from one color to the other.

How to Use This Tool

  1. Type the first and second colors.
  2. Enter how much of the second color to add, from 0 to 100.
  3. Press Mix.
  4. Copy the mixed color or any step.

How the Calculation Works

Each channel is mixed as first + (second − first) × ratio. This is the same math as a CSS color-mix in the sRGB space. It is simple and predictable, though perceptual spaces such as OKLCH can give smoother blends for very different hues.

Worked Example

Mixing #ff0000 (red) and #0000ff (blue) at 50 percent gives #800080. At 25 percent it gives #bf0040.

Common Uses

  • Hover and focus states.
  • Midpoints for gradients.
  • Tinting a color toward a background.
  • Quick palettes between two brand colors.

Tips and Common Mistakes

  • For white tints, mix with #ffffff.
  • Use the shades and tints tool for scales from one color.
  • Check contrast after mixing.

Next, you may need the gradient generator, shades and tints generator, color palette generator, hex color opacity calculator.

Everything runs in your browser. Nothing you type is uploaded, stored or sent to any outside service.

Frequently Asked Questions

It mixes the red, green and blue values in a straight line. At 50 percent, each channel is the average of the two colors.
Screens add light, while paint subtracts it. A straight RGB mix of pure red and pure blue gives a dark purple, #800080.
It is the share of the second color. 0 gives the first color, 100 gives the second color and 25 gives three parts first color to one part second.
Yes. The step list is evenly spaced, so you can copy the HEX codes into a CSS gradient or a chart palette.

Disclaimer: results are calculated in your browser from the numbers you enter. Check important results before you rely on them for money, health, safety or legal decisions.