Mix two to five colors by parts and see what they make, the way paint, light or plain RGB would mix them. Then take the result further with a blend strip, tints and shades, a Tailwind scale and a gradient wallpaper. Free, in your browser.
Close to sea green
Mixes like real paint. Each color soaks up some light, so blue and yellow make green and mixes get deeper.
7 steps from your first color to your last, evenly spaced to the eye. Click any swatch to copy it.
Your mix with white, black and gray added in 10% steps, plus a 50 to 950 scale for design systems.
:root {
--sea-green: #4b954f;
--sea-green-tint-10: #5da061;
--sea-green-tint-20: #6faa72;
--sea-green-tint-30: #81b584;
--sea-green-tint-40: #93bf95;
--sea-green-tint-50: #a5caa7;
--sea-green-tint-60: #b7d5b9;
--sea-green-tint-70: #c9dfca;
--sea-green-tint-80: #dbeadc;
--sea-green-tint-90: #edf4ed;
--sea-green-shade-10: #448647;
--sea-green-shade-20: #3c773f;
--sea-green-shade-30: #356837;
--sea-green-shade-40: #2d592f;
--sea-green-shade-50: #264b28;
--sea-green-shade-60: #1e3c20;
--sea-green-shade-70: #172d18;
--sea-green-shade-80: #0f1e10;
--sea-green-shade-90: #070f08;
--sea-green-tone-10: #509354;
--sea-green-tone-20: #569159;
--sea-green-tone-30: #5b8f5e;
--sea-green-tone-40: #608d63;
--sea-green-tone-50: #668b68;
--sea-green-tone-60: #6b886c;
--sea-green-tone-70: #708671;
--sea-green-tone-80: #758476;
--sea-green-tone-90: #7b827b;
}Your colors as a smooth gradient, blended with the paint model.
Start with two colors, add up to five, and set how many parts of each go in, like measuring paint. Click a swatch for the color picker, type a hex code, try a classic pair, or press Random for a set that goes together.
Paint mixes like pigment, so blue and yellow make green. Light blends the colors as your eye sees them. RGB averages the numbers. Each option shows its result as a dot, so you can compare before you switch.
Copy the mix as HEX, RGB, HSL or OKLCH, grab any step of the blend strip, export tints and shades as CSS variables or a Tailwind scale, or download the gradient as a wallpaper PNG up to 4K.
Every result below comes from the mixer on this page, so you can click any pair to load it and keep going. Paint shows what you would get on a palette; Light shows the same pair blended the way a screen blends it.
| Mix | Makes | Paint result | Light result |
|---|---|---|---|
| blue + yellow | Green | #4B954F | #84968E |
| red + yellow | Orange | #F56B2E | #F68926 |
| crimson + ultramarine | Purple | #6C1A6E | #823F91 |
| 1 red + 2 white | Pink | #FC8892 | #FFC0B9 |
| blue + green | Teal | #007A61 | #007885 |
| yellow + green | Lime green | #54BC32 | #A1BB3D |
| 1 blue + 2 white | Light blue | #74ADE5 | #ABC2E6 |
| 1 black + 3 white | Gray | #898989 | #BFBFBF |
| red + green | Olive brown | #626830 | #A4773B |
| purple + yellow | Tan brown | #AB8657 | #B68D97 |
| 2 red + 1 black | Dark brown | #5B3700 | #9B2C29 |
| red + yellow + blue | Muddy olive | #73693F | #AD7D70 |
Paint is subtractive. A pigment looks blue because it absorbs most of the other light that hits it. Mix two pigments and each one keeps absorbing, so only the light that both reflect survives. Blue and yellow both reflect some green, which is why they make green, and why paint mixes get deeper and duller as you add more colors. The Paint model simulates this with a spectral Kubelka-Munk mix, the same family of maths used to match real paint.
Light keeps it clean. The Light model blends colors in Oklab, a color space built around how people see brightness and hue. Halfway between two colors looks halfway to the eye, so blends stay bright and even. It is the best choice for UI palettes and smooth gradients.
RGB is the simple average. It splits the difference between the red, green and blue numbers. That is what most quick tools do, and it is fine for close colors, but opposite colors meet in a flat gray in the middle.
Real color mixing has a few habits worth knowing, and the Paint model follows them. A warm, orange-leaning red and a greenish blue make a dull plum, because each one quietly reflects a bit of yellow and green. For a clean purple, mix a cool, pinkish red such as crimson with ultramarine, as in the chart above. Opposite colors, like red and green, purple and yellow, or blue and orange, cancel each other out into browns and olives, which is the easiest way to mix a natural brown.
Dark colors are strong. A single part of black or deep blue changes a light color a lot, while white and yellow need several parts to shift a dark one. Start with the light color and add the dark one a part at a time, the way painters do. The blend strip shows the whole journey from one color to the other, spaced so each step looks like an equal change.
Turn your colors into a full gradient
Gradient Lab is the full editor, free in your browser: dozens of moving styles, presets and video export. Open in Gradient Lab, in the tool, takes your mix there.
Want colors from a photo instead? The image to gradient tool picks a palette from any image and blends it into a gradient. For more styles and animated looks, use the full gradient background generator, or browse free gradient wallpapers ready to download. To add texture to a flat gradient, try the grain texture generator.
Explore more: aesthetic wallpapers, moving backgrounds, free gradient wallpapers, gradient backgrounds, cool backgrounds, free aesthetic backgrounds.
FAQs
Set your colors at the top of the tool, by clicking a swatch or typing a hex code, and the mixed color appears straight away. You can mix two to five colors and give each one from 1 to 12 parts, like measuring paint. Switch between Paint, Light and RGB to see how each way of mixing changes the result.
Red and blue, but the kind of red matters. In paint, a cool, pinkish red such as crimson mixed with ultramarine blue makes a clean purple (#6C1A6E in this mixer). A warm, orange-leaning red with blue makes a dull, grayish plum instead (#523E4F), because the yellow in the red cancels some of the violet. Use the Paint model to see the difference.
They make a soft blue-violet. One part hot pink and one part blue comes out as a periwinkle slate blue (#5B62B1) in the Paint model, and a medium purple (#9162B2) in the Light model. For a warmer purple, add more parts of pink. Pink already contains white, so the result is always lighter and softer than a red and blue mix.
Mix a purple first, then lighten it with white. One part purple and three parts white makes a lilac (#CDA9F0) in the Paint model. Starting from crimson and ultramarine with three parts white gives a dustier mauve (#B67FBB). The Tints row under your mix shows ten lighter steps of any purple at once, so you can pick the exact pastel.
Mix two opposite colors, or all three primaries. Red and green make an olive brown (#626830 here), purple and yellow make a tan brown (#AB8657), and blue and orange make a dark olive. Red, yellow and blue together make a muddy olive brown. Add a little black or more red to warm and deepen it. The chart on this page has each recipe ready to try.
Mix complementary colors and lean on the darker one. Two parts red with one part green and one part blue makes a deep umber brown (#54563A) in the Paint model, with no black at all. Blue darkens a brown more naturally than black, which can make it look flat. Add parts one at a time and watch the result update.
Blue and yellow. In the Paint model, one part each makes a mid green (#4B954F), because blue and yellow pigments both reflect green light. More yellow gives a lime or spring green, and more blue gives a deeper, cooler green. In the RGB model the same two colors average out to a grayish moss, which is why simple online mixers get this wrong.
Teal. One part blue and one part green makes a teal green (#007A61) in the Paint model and a slightly bluer teal (#007885) in the Light model. Add more blue for a deep ocean teal, or a part of white for turquoise. Because the two colors sit next to each other on the color wheel, the mix stays clean and bright.
Red and white. One part red and two parts white makes a coral pink (#FC8892) in the Paint model. For a cooler, rosier pink, start from crimson instead of an orange-leaning red. More white gives baby pink, and less white gives a deeper rose. The Light model shows the softer pastel version (#FFC0B9) of the same recipe.
Most online color mixers average the red, green and blue numbers, which is how light behaves on a screen, so blue and yellow land on a gray. Paint works the other way: each pigment absorbs part of the light, and the only light both blue and yellow reflect is green. The Paint model simulates that, so it gives the answer you would get on a palette.
It is a good guide, not a lab measurement. It turns each color into a smooth reflectance curve and mixes the curves with the Kubelka-Munk method that paint scientists use, so mixes darken and shift the way real pigments do. Real paints vary by brand and pigment, so treat the result as a close preview and test on paper for exact matches.
A tint is a color mixed with white, so it gets lighter and softer. A shade is the color mixed with black, so it gets darker. A tone is the color mixed with gray, which keeps it at a similar depth but makes it calmer and less saturated. The tool makes ten of each from your mix, in 10% steps.
Yes. Copy the mix itself as HEX, RGB, HSL or OKLCH. Under Tints, shades and tones, pick CSS variables, Tailwind v4 or Tailwind v3 and copy the code. The Tailwind scale runs from 50 to 950 around your mix, keeping its hue, and your exact mix sits on the step closest to its lightness.
Yes, free. The gradient preview blends your colors with the model you picked, and you can download it as a PNG at 1920×1080, 2560×1440, 4K (3840×2160) or a phone size (1290×2796), with no watermark. Copy the CSS for a website, or open the mix in Gradient Lab for moving styles, grain and video export.