Color Mixer
Blend two colors and read every step in between. Set the balance, pick how many midpoints you want, and mix in straight RGB or perceptual OKLab space.
sRGB vs. OKLab mixing
Mixing in sRGB interpolates the raw channel values — fast, and what color-mix(in srgb, …) does, but the midpoint often looks muddy or dark. Mixing in OKLab interpolates a perceptually uniform space, so the steps look evenly spaced in lightness and hue and the middle stays vivid. Use OKLab for palettes and UI ramps; use sRGB when you need to match another tool's output exactly.
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?
On a screen, the answer depends entirely on the color space you mix in, which is why this tool has a toggle. Mix blue and yellow in plain sRGB and the 50% point is a dull gray-green, because sRGB's channels are weighted for storage, not perception. Mix the same two in OKLab and the midpoint is a clean, believable green at a sensible lightness. Neither is "wrong" — sRGB matches what CSS color-mix(in srgb, …) and older tools produce, OKLab matches what your eye expects — but for anything you're choosing by look rather than matching to another system, OKLab is the safer default. Set the balance to 50% and flip the toggle to see the difference for your two colors directly.
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
What's the best color space to mix colors in?
OKLab, for most design and UI work — it keeps lightness and saturation visually even across the blend, avoiding the dull, grayed-out midpoints that plain RGB mixing often produces. Use sRGB only when you need to match another tool that mixes that way.
What two colors make a certain color?
Work backwards: pick your target as the balance result, then try endpoint pairs on opposite sides of it on the wheel. Any color can be reached from countless pairs, but the cleanest routes keep both endpoints at a similar lightness to the target. The 50% OKLab midpoint of two colors is the most predictable blend to aim for.
How is this different from mixing paint colors?
Paint mixing is subtractive (pigments absorb light), while this tool mixes in RGB or OKLab, both additive, screen-based color models. Two colors that "should" make a muddy brown in paint can produce a clean intermediate hue on screen — the two systems don't share the same rules.
Can I export the mixed colors as a gradient?
Yes — "Copy CSS gradient" copies a ready-to-use linear-gradient() declaration built from your current stops, or use "Copy palette" for a plain list of hex codes.