Skip to content

Color mixer: blend two colors and see the result

Pick two colors, adjust the ratio and instantly get the resulting tone in HEX, RGB and OKLCH, with its in-between scale and ready-to-copy CSS.

Result#598FE550%50%

Colors

Color B ratio

50%
A 50% · B 50%

Mix space

Steps
10
Balance
background: color-mix(in srgb, #2C71DE 50%, #85ADEC);
/* = #598FE5 */

Color Conversion

Popular mixes

What color do red and blue make? Load a classic pair and fine-tune it.

What mixing two colors is for

The color mixer blends two colors in the ratio you choose and calculates the exact resulting tone. It is different from exploring harmonies from a single base color, which is what the color wheel does: here you start from two defined colors and look for the point between them.

It is especially useful to find a transition tone between two brand colors, build a scale of in-between tones for interface states (hover, backgrounds, borders) or get the CSS for the mix without calculating percentages by hand: the tool gives you both the native color-mix() and the linear-gradient().

How to mix two colors in three steps

  1. Pick both colors

    Click Color A or Color B and adjust it with the hue, brightness, eyedropper or by typing its code. The Swap button reverses the order.

  2. Adjust the ratio

    Drag the slider or use the 25, 50 and 75% shortcuts. At 0% you get pure Color A and at 100%, Color B.

  3. Copy the result

    Copy the HEX color with one click, or the color-mix() code, the gradient or the Tailwind classes. Below you get the same color in RGB, HSL, CMYK, LAB and more.

Why don’t blue and yellow make green on screen?

At school we learned that blue and yellow make green. That is true with paint: pigments absorb light, and when combined they only reflect what neither absorbs, green in this case. It is subtractive mixing.

A screen does not mix pigments but light. Averaging the RGB channels of blue and yellow cancels them out and the result is gray. If you want paint-like behavior, add green yourself as the middle color, or compare the result in perceptual mode (OKLab), which keeps lightness better.

RGB or perceptual: which mix space to choose

The same pair of colors can give different mixes depending on the space it is calculated in. The tool lets you choose between the two most common ones, the same ones the CSS color-mix() function accepts.

50 % = #800080

RGB (sRGB)

Averages the red, green and blue channels. It is the classic calculation used by most editors. Between saturated, opposite colors the midpoint tends to be darker and duller.

50 % = #8C53A2

Perceptual (OKLab)

Interpolates in a space designed around how we perceive color. Steps progress more evenly and the middle tones stay brighter. It is the recommended choice for interface scales and gradients.

The difference between mixing and generating harmonies

Mixing two colors

Interpolates directly between two specific colors you choose. The result depends on the starting colors and the ratio: ideal when you already have two fixed colors and need the midpoint.

Generating harmonies

Calculated mathematically from one color’s position on the color wheel (analogous, complementary, triadic…). It builds a full palette, not an intermediate tone between two given colors.

Frequently asked questions

Each color component is interpolated according to the ratio you choose. In RGB mode the red, green and blue channels are averaged; in perceptual mode (OKLab) lightness and the two OKLab color axes are interpolated, which gives more even transitions.

With paint, green. On screen, mixing in RGB at 50%, a neutral gray (#808080 with pure blue and yellow), because light mixes additively and the channels cancel out. If you need a green, add it as the middle color.

Purple. With pure red and blue at 50% in RGB you get #800080; in perceptual mode the purple is lighter. The more weight you give blue, the cooler the result.

It is a native CSS function that mixes two colors right in the browser, for example color-mix(in srgb, #E53935 50%, #1E88E5). It works in all modern browsers. The tool generates that code plus the equivalent HEX color, in case you need a fixed value.

Yes. The Gradient tab generates a linear-gradient() between Color A, the mix and Color B. If you need more stops or radial and conic gradients, use the gradient generator.

The color wheel calculates related colors from a single base color, following color theory rules. The mixer blends two specific colors you choose and calculates the point between them, not a full palette.

Steps set how many tones the scale between A and B has, from 3 to 12. Balance shifts those tones toward one of the two colors, useful if you want more shades near Color A or Color B. Click any tone in the scale to copy it.

Yes. Below the tool you get the mixed color in RGB, HSL, HSB, CMYK, LAB, LCH and more, and the Export colors button exports the full scale for Tailwind, Figma or CSS.

More tools