LoginTry Atmos free

Color mixer

Mix colors like real paint, like light, or like CSS color-mix(). Find the recipe for any color and copy the result.

Sign up for all tools in one

Colors to mix

1

50%

1

50%

Paint mode simulates real pigments with the Kubelka-Munk model, so blue and yellow make green, just like on a palette.

green

#5BA03E · green

HEX

RGB

HSL

OKLCH

Contrast 3.21:1 with white, 6.54:1 with black

Blend steps

All color 1

Click a step to use its ratio

All color 2

Add white

20%

40%

60%

80%

Add black

20%

40%

60%

80%

Using #5BA03E in a UI? Atmos builds an accessible shade scale from it.

Generate shades free

Helping 30,000+ world’s greatest designers create beautiful designs.

Atmos’s toolbox

Create your palette

Atmos is a toolbox specialized for creating UI palettes. From finding colors, through generating shades, to fine-tuning your palette we've got you covered.

Get started for free

Color generator

Generate brand and complementary status colors with a click of a button.

Try it out

Color wheel

Create color combinations that look good together using color schemes.

Try it out

Shade generator

Get shades and tints that actually look good while being accessible.

Try it out

Color Mixer FAQ

Pick two or more colors and set how many parts of each go into the mix. The mixer shows the result instantly with its HEX, RGB, HSL and OKLCH values, plus blend steps between two colors and lighter and darker versions of the mix. Switch between paint, light and digital mixing to see how the same colors behave in each.

Paint mixing is subtractive: pigments absorb light, so mixes get darker and blue and yellow make green. Light mixing is additive: colored lights add up, so red and green make yellow and all three primaries make white. Digital mixing interpolates between colors in a color space, which is exactly what the CSS color-mix() function does in the browser.

Most online mixers average RGB values, which is neither paint nor light, so blue and yellow come out gray. The paint mode here simulates real pigments with the Kubelka-Munk model, which predicts how paint absorbs and scatters light across the whole spectrum. That is why its results match what happens on a real palette.

Switch to "Match a color", enter the color you want, and list the colors you have. The mixer searches for the ratio of those colors that gets closest to your target and tells you how close it is. If the match is rough, add white or black, since lightness is usually what is missing.

Use color-mix(), which is supported in all modern browsers. For example, color-mix(in oklch, #1D4ED8 70%, white) lightens a blue by 30%. Choose digital mode in the mixer to get the exact color-mix() code for your colors. Mixing in OKLCH or OKLab keeps the middle of the blend vivid, while sRGB tends to turn it gray.

Yes. The color mixer is free with no sign-up, and your mix is saved in the page URL so you can share it. If you are building a UI, Atmos can turn any color into an accessible shade scale and sync it to Figma.