Color & Design·4 min read

How Color Blending Works: LAB, RGB, and Midpoints

Put two colors side by side and ask what belongs between them. That question comes up more often than you'd think: a gradient needs a believable middle, a chart needs a series color between two brand hues, a transition needs frames that don't flash gray. Knowing how blending works is the difference between an in-between color that looks intentional and one that looks like a rendering bug. The Color Blender does the math for you, but knowing what the math is doing helps you pick the right mode instead of the default one.

Open the free Color Blender All insights

Where a color blend earns its keep

Two real jobs, one slider.

The first job is finding midpoint colors for gradients. Say your brand runs indigo into amber on the homepage hero. Browsers interpolate gradients in sRGB by default, and the middle can drift toward gray. Blending the two endpoints yourself, in a better color space, tells you what the middle should look like, and you can pin it there with an explicit stop.

The second job is manufacturing in-between states. You have a resting color and a pressed color for a control, and you want the hover to sit partway along that path rather than being invented by eye. A 30 or 40 percent blend of the two endpoints gives you a value that provably belongs to the family.

How color blending works under the hood

It's geometry, not magic.

Every color model is a coordinate system. In RGB, a color is a point defined by red, green, and blue channels. In LAB, the axes are lightness plus two opponent channels. Interpolating between colors means drawing a straight line from point A to point B and reading off a location along it: 50 percent is the halfway mark, 25 percent sits closer to A.

The catch is that the same two colors trace different lines in different spaces. The RGB mode averages the red, green and blue numbers, and those lines regularly cut through the desaturated core of the cube, which is why so many naive mixes look dirty. LAB was engineered so that distance matches perceived difference, so a LAB line tends to hold lightness and colorfulness steady. LCH and HSL take a curved route around the hue circle instead, which keeps midpoints colorful but can pass through an unexpected intermediate hue. None of these is wrong; they answer slightly different questions. The Color Blender also offers OKLab and linear RGB, and its Compare every blend mode panel lays all six ramps side by side, so you can compare them in a second.

A worked blend: #6366F1 into #F59E0B

Real numbers, verified output.

Take the tool's default pair, indigo #6366F1 and amber #F59E0B. At a 50 percent mix in LAB mode, the result is #C97E90, a dusty rose. That surprises people, but it's honest: halfway between a cool blue-violet and a warm orange, at similar lightness, is muted pink territory. The result card shows it as HEX, RGB and HSL, each ready to copy.

Now switch the mode to RGB with the same slider position and you get #AC827E instead, a flat grayish brown. Same inputs, same ratio, visibly worse midpoint. Pull the slider back to 25 percent in LAB and the output is #A471C1, a purple that clearly remembers its indigo parent. Those three values show the whole story: the space picks the path, and the ratio picks the point on it.

Blending mistakes that produce mud

Four ways midpoints go wrong.

Most bad blends trace back to one of these habits.

Mixing complementary hues in RGB and shipping the gray. Opposite hues cancel; if you must bridge them, blend in LAB or LCH and check the ramp first.
Averaging hex digits by hand. Splitting the difference between 63 and F5 per channel is exactly the RGB mistake, done with more effort.
Ignoring lightness drift. A blend of a light and a dark color can land where text contrast fails; test the result before using it as a background.
Blending across transparency. Mixing #6366F1 with a 50 percent alpha white is compositing, not blending, and gives different results over different backdrops.

Two habits for better blends

Small process, big payoff.

First, read the ramp before you trust the midpoint. The Color Blender draws the whole transition between your endpoints, with 1 to 20 midpoints set by a slider, and a dip into gray is obvious at a glance. If the middle steps look dead, no single ratio from that pair in that mode will look alive. Copy midpoints gives you just the in-between values, and Copy all with A and B includes the endpoints.

Second, keep the ratio away from 50 percent when one color should stay dominant. Hover states usually read well at 20 to 35 percent toward the second color, enough to register as change without becoming a third brand color that your design system never approved.

Color Blender next to its neighboring tools

Pick the right one for the output you need.

The Color Blender answers one question: what lives between color A and color B. If what you need is a gradient, Copy CSS gradient turns the ramp into a linear-gradient() with every midpoint pinned as a stop, which avoids the gray middle a plain two-stop gradient can show. For angles, radial or conic shapes and more control over stops, move to the CSS Gradient Generator.

If what you actually need is lighter and darker versions of a single color, that's a ramp anchored to white and black, and the Color Shades Generator builds it directly. And when a blend result needs adjusting by hand, convert it with the HEX to HSL Converter, nudge the lightness or saturation a few points, and convert back. Blend for the starting point, tune for the final call.