Color Mixer

sRGB vs. OKLab mixing

Mixing in sRGB here blends the red, green and blue channels as linear light — the way two overlapping colored lights would combine, and the same as CSS color-mix(in srgb-linear, …). It is physically accurate, but the steps bunch up toward the lighter color and opposite hues meet in a pale gray. Mixing in OKLab interpolates a perceptually uniform space, so the steps look evenly spaced in lightness and hue. Use OKLab for palettes and UI ramps; use sRGB when you want a light-like blend or need to match another tool that mixes in linear RGB.

How to mix two colors online

Set Color A and Color B with the swatches or hex fields, then use Balance to slide the featured result anywhere between them — 0% is pure A, 100% is pure B, 50% is an even split. Midpoints controls how many intermediate steps appear in the ramp underneath, from 1 up to 18, so you can generate anything from a single blended accent to a full gradient's worth of stops. Switch the Mix space toggle between sRGB and OKLab to change how the in-between colors are calculated, then copy the whole ramp as a palette or as ready-to-paste linear-gradient() CSS.

Color mixer use cases

• Building a two-color gradient — generate every stop as a hex code, then paste them into the gradient creator or straight into CSS.
• Finding a midpoint accent — blend a brand color with white or black to find a lighter or darker variant that still reads as "the same color."
• Exploring "what if" combinations — see exactly what sits between two competing brand colors before picking one.
• Data and chart colors — mix between two category colors to generate visually consistent intermediate steps.

Once you've settled on a blend, open any step in the color picker for its full harmony set, or check a mixed color against your background in the contrast checker before using it for text.

What color do two colors make?

It depends on whether you are mixing paint or light. Paint, ink and dye mix subtractively: each pigment absorbs part of the light, so blue and yellow paint leave only green for your eye to see. Screens mix additively, adding light together, and this online color mixer blends colors the way a screen does. That is why some results differ from what you learned with a paint box: blue and yellow sit almost opposite each other on the screen color wheel, so mixing them digitally gives a grayish blue in OKLab and a pale gray in sRGB — not green. Pure colored light follows its own rules again: red and green light make yellow, red and blue light make magenta, green and blue light make cyan, and all three make white. Set the balance to 50% and flip the sRGB / OKLab toggle to see how your own two colors combine.

Color mixing chart: what two colors make

The most common color mixing questions, answered both ways: the color you get when you mix paint, and the color this tool gives for an even 50% digital mix in OKLab, with its hex code and closest color name. Click Mix on any row to load that pair into the color mixer above.

Pairs that sit opposite each other on the color wheel — orange and blue, purple and yellow, red and green — are complementary colors, and mixing them always pulls toward brown or gray, in paint and on screen alike. To find colors that look good next to each other rather than blended together, use the color matcher; to find the name of any mixed result, paste its hex into the HTML color codes search or browse the color library.

Mixing colors in CSS with color-mix()

Modern browsers can mix colors directly in your stylesheet with the CSS color-mix() function, so you don't have to hard-code every in-between shade. You give it a color space and two colors with optional percentages, and it returns the blend:

.button       { background: #FF5A36; }
.button:hover { background: color-mix(in oklab, #FF5A36 85%, black); }   /* 15% darker */
.badge        { background: color-mix(in oklab, #FF5A36 20%, white); }   /* soft tint  */
.blend        { color: color-mix(in srgb-linear, red, blue); }           /* like sRGB mode here */

This color mixer previews exactly those blends: OKLab mode matches color-mix(in oklab, …) and sRGB mode matches color-mix(in srgb-linear, …), and the Balance slider is Color B's share — a balance of 30% equals color-mix(in oklab, A 70%, B 30%). For older browsers, copy the hex code of the step you want and use it directly, or pick a precise value in the HTML color picker. To turn a whole ramp of mixed colors into a background, the gradient creator builds the linear-gradient() for you.

Balance and midpoints — using them together

The two controls answer different questions. Balance asks "if I blend these two colors into one, where should it sit?" — useful for finding a single in-between accent, or a tinted version of a brand color that's 80% brand and 20% white. Midpoints asks "show me the whole path between them" — useful for generating gradient stops, a diverging color scale for a chart, or a set of related category colors. You can use both at once: set a high midpoint count to preview the full ramp, then read off the specific step nearest your target balance. Every step is a real hex code you can copy, hand to the gradient creator, or open in the color picker.

Mixing a color with white, black or gray

Some of the most useful blends involve just one real color. Mix your color with white and you get a tint — a lighter, softer version that works for hover states, backgrounds and disabled text. Mix it with black and you get a shade — a darker variant for pressed states, borders and headings. Mix it with a mid gray and you get a tone — the same hue with the saturation pulled down, handy when a brand color is too loud for large areas. Set Color B to #FFFFFF, #000000 or #808080, raise the midpoint count, and the ramp gives you a complete set of related values in one step. For a purpose-built version of this, the palette generator produces tint, shade and tone ramps from a single seed color.

Color mixer FAQ