Color Mixer

Most color mixers stop at two colors and give you a single hex. This one blends up to eight, reads the exact color at any point along the run, and hands the whole thing back as a CSS gradient you can paste straight into a stylesheet. Mix red and blue for a clean #800080 purple, or stack three or four brand colors and lift an even scale of tones from the middle. It all runs in your browser, live, and nothing you pick is uploaded or saved.

One thing to know up front, because it explains almost every "wait, that's wrong" moment. This is a screen mixer. It averages the red, green and blue channels, which is how light combines and exactly the arithmetic CSS runs inside color-mix(). That is not what paint does when you push two blobs together. More on that gap lower down.

1. Set your colors. Click a color well to open your system picker, or type a hex code into the box beside it. Both #ff0000 and the shorthand #f00 work, and the # is optional.
2. Add more for a multi-color blend. Hit Add color to drop in a third, fourth, up to eight. Each one becomes an evenly-spaced anchor in the gradient. Remove any color with the X on its row.
3. Scrub the sample point. Drag the slider to read the exact color anywhere along the blend. With two colors, 50% is the true midpoint. With three or more, the slider walks across all of them in order. The HEX and RGB below update live, click to copy either.
4. Set how many steps you want. The Steps slider chops the blend into anywhere from 3 to 21 evenly-spaced swatches. Click any swatch to copy its hex, or grab the whole scale with one button.
5. Copy the CSS gradient. The gradient box gives you a ready background: linear-gradient(...) line built from your colors. Paste it into a stylesheet and you get the same smooth blend on the page.

If a box holds half a code you are still typing, the tool holds off instead of flashing black. Finish it and the preview snaps back.

Say you've got three brand colors and you need a hero background, or a chart ramp that runs cool to warm through a middle tone. A plain A-to-B mixer forces you to blend the first pair, note the result, then blend that against the third by hand. That is clumsy, and the spacing never comes out even.

Drop all three (or four, or eight) in here and they become evenly-spaced anchors on one continuous run. Slide the sample point and you read a real color at that exact position, not an eyeballed guess. That is a genuine multi-stop scale from a fixed set of colors, with none of the arithmetic on you.

The colors blend in the order you list them, so a green between a yellow and a blue lands where you expect.

Plenty of mixers show you a nice blend and then leave you to rebuild it in code by hand. This one just gives you the code. Once your colors look right, the CSS gradient box holds a finished declaration, something like background: linear-gradient(90deg, #ff0000 0%, #7f3f7f 50%, #0000ff 100%);, with each color placed at its even position, ready to copy straight into a stylesheet without a preprocessor or a single hand-typed stop percentage.

The browser draws that gradient with the same sRGB interpolation the preview uses, so what you see here matches what renders on your page. A lot of pickers show one thing and the browser draws another, and you lose an afternoon on the difference.

Want a vertical fade, an angle, a radial glow, or hand-placed stop positions instead of even ones? That is a different job, and the CSS gradient generator is built for it. This tool holds the stops even on purpose, because a color scale wants even spacing.

The strip of swatches is not decoration. It is your blend chopped into even stops, and every stop is a real color you can lift.

That is how two or three colors turn into a family. Need four intermediate tones to fill out a UI, a button, its hover, a border, a faint background tint? Take them off the strip instead of inventing hex codes that almost match. They sit on a straight line between your anchors, so they read as related rather than random.

Two ways people use that row:

• A cool-to-warm scale cut into steps is what a heatmap legend or a data chart wants.
• Set the last color to white #ffffff and the strip fades your color to white in even tints. Set it to black #000000 for shades. Mix toward mid-gray #808080 and each step mutes the color without twisting its hue, the old move for calming a loud color down.

This trips up everyone at some point, and it is the real reason a screen mixer can feel broken.

There are two ways colors combine and they give opposite answers. Additive mixing is how light works. A screen starts black and piles red, green, and blue light on top, so more light means brighter. Full red light plus full green light does not make mud, it makes yellow. This tool lives in that world, because averaging RGB channels is additive.

Subtractive mixing is how paint and ink work. A white page reflects everything, and each pigment absorbs some wavelengths and throws back the rest, so stacking pigment goes darker and muddier, which is the color wheel everyone learns at school.

Now the classic trap. Blue paint plus yellow paint makes green, every kid knows it. Try it here with light and blue rgb(0, 0, 255) averaged with yellow rgb(255, 255, 0) gives rgb(128, 128, 128), a flat gray, because the channels cancel toward the middle. You get green on paper and gray on a screen, and neither result is wrong. So the on-screen blends that look good come from colors that are neighbors on the wheel (blue and cyan into teal, red and orange into coral), not opposites. Reach for two near-opposites and additive averaging drags the midpoint toward gray, which is also why the middle of two vivid colors can come out duller than either end. If a midpoint comes out muddy, mixing the same colors in a perceptually even space like OKLCH keeps it cleaner.