My Tool Studio
Color

Color Blender

This color blender mixes two colors at any ratio and shows the exact result as HEX, RGB and HSL. Enter Color A and Color B, drag the ratio slider, and choose how the mix is calculated: LAB, LCH, RGB, HSL, OKLab or linear RGB. A comparison panel shows the same two colors mixed all six ways, so you can see why an RGB mix can look gray while a LAB mix stays bright. Generate from 1 to 20 midpoints, copy them, copy a CSS gradient, or export the ramp as SCSS, Tailwind, JSON, PNG, ASE or PDF. A second panel mixes three to eight colors by parts, like a recipe. Share links keep your colors and settings. It is a screen color mixer, so it models light, not paint.

Always freeNo sign upRuns in your browser
Mix ratio50% A / 50% B
Blend mode
Mix result (50% B)
#C97E90
hex#C97E90
rgbrgb(201, 126, 144)
hslhsl(345, 40%, 64%)
Midpoints between A and B5
A #6366F1
1. #946DD1
2. #B275B1
3. #C97E90
4. #DA886F
5. #E9934A
B #F59E0B

Export the ramp (CSS, SCSS, Tailwind, JSON, SVG, PNG, ASE, PDF)

:root {
  --blend-a: #6366F1;
  --blend-1: #946DD1;
  --blend-2: #B275B1;
  --blend-3: #C97E90;
  --blend-4: #DA886F;
  --blend-5: #E9934A;
  --blend-b: #F59E0B;
}

Compare every blend mode

The same two colors mixed six ways. The marked swatch is the 50% midpoint. Click a row to use that mode.

Mix three or more colors

Give each color a weight, like parts in a recipe. The mix uses the blend mode chosen above (HSL mixes fall back to LAB here).

50%
25%
25%
Weighted mix
#CC815C
rgb(204, 129, 92) · hsl(20, 52%, 58%)

How to use

01

Enter the two colors

Type or pick Color A and Color B, or press Pick A from screen or Pick B from screen in Chrome or Edge. HEX codes, rgb(), hsl() and CSS names such as tomato all work. Swap A and B flips them.

02

Set the ratio and blend mode

Drag Mix ratio to choose how much of B goes into the mix, then pick a blend mode, or click a row in Compare every blend mode. The Mix result card shows HEX, RGB and HSL with copy buttons.

03

Make a ramp and export it

Move Midpoints between A and B from 1 to 20. Copy steps, copy a CSS gradient, or use the export panel. For three or more colors, fill in Mix three or more colors and set the parts.

Why Color Blender

LAB vs RGB mixing: a side by side example

The mode you choose changes the midpoint a lot when the two colors are far apart. Here are two classic pairs mixed at 50% in RGB and LAB. RGB values are exact. LAB values are approximate because they depend on rounding, so check the tool for the precise code.

In RGB mode each channel is averaged: red (255, 0, 0) and lime (0, 255, 0) give (128, 128, 0), which is olive. In LAB mode the colors are mixed by perceived lightness and two color axes, so the midpoint keeps more of the brightness of both colors. That is why LAB is the default here.

Color AColor BRGB mix at 50%LAB mix at 50% (approx.)
#0000FF blue#FFFF00 yellow#808080 gray#CA8AAA dusty pink
#FF0000 red#00FF00 lime#808000 olive#C9AB00 mustard
#6366F1 indigo#F59E0B amber#AC827E grayish brown#C97E90 muted rose

Screen mixing (RGB) vs paint mixing (RYB)

Screens make color by adding red, green and blue light. Adding more light makes colors brighter, and all three at full strength make white. Paints and inks work the other way: each pigment absorbs part of the light, so mixing more pigments makes colors darker and eventually a muddy brown or near black.

Art classes teach red, yellow and blue (RYB) as the painter's primaries, and in that system blue and yellow make green. On a screen, blue and yellow light sit opposite each other and average to gray. This blender models screen color only, the same way a browser draws a gradient. It is the right tool for web and app palettes, gradients and data visualisation, but not for predicting what happens in a paint pot.

Common questions

How do I find the color between two colors?
Enter both colors and leave Mix ratio at 50%. The Mix result card shows the midpoint. For several evenly spaced colors between them, set the Midpoints slider to the number you need.
How do I blend two hex colors at a set ratio?
Paste the two hex codes into Color A and Color B, then drag Mix ratio. At 25%, the result is 75% A and 25% B. The label above the slider shows the exact split, and the result updates as you drag.
Why does mixing colors in RGB look gray or muddy?
RGB mode averages the red, green and blue numbers directly. When two colors are far apart, such as blue and yellow, those averages meet in the middle and cancel out to gray. LAB and LCH mix by lightness and color the way eyes perceive them, so midpoints stay brighter.
What color do blue and yellow make on screen?
In RGB mode, #0000FF and #FFFF00 at 50% give #808080, a flat gray. In LAB mode the midpoint is a light dusty pink, around #CA8AAA. Neither is green, because screens mix light rather than paint.
Can I use the color blender to mix paint colors?
Not reliably. Paint mixes by subtracting light with pigments, so blue and yellow paint make green, which none of the screen modes here will give you. Use the tool to plan digital colors, and test paint mixes on real swatches.
What is the difference between LAB and LCH blending?
Both are perceptual. LAB draws a straight line between the colors, which can pass through soft, less saturated tones. LCH travels around the hue circle, which keeps midpoints more colorful but can pass through hues that are in neither color.
How many midpoints can the color blender generate?
Between 1 and 20. With 5 midpoints you get 7 colors in total including A and B. Copy midpoints copies only the colors between them, and Copy all with A and B includes the ends.
Can I export the blend as a CSS gradient?
Yes. Copy CSS gradient gives a background: linear-gradient(90deg, ...) rule with every step at an even percentage. Because the steps were mixed in your chosen mode, the gradient follows that mode instead of the browser's default blending.
Can I mix more than two colors with the color blender?
Yes. Use Mix three or more colors below the main mixer. Add up to eight colors, give each a number of parts, and the weighted mix appears with its HEX, RGB and HSL. Two parts of red and one of yellow gives a mix that leans toward red.

More Color tools

View all

Color Picker

Pick colors and copy HEX, RGB, HSL, CMYK, OKLCH

Color

Color Palette Generator

Generate palettes with lock, harmonies and export

Color

HEX to RGB Converter

Convert HEX color codes to RGB and RGBA

Color

RGB to HEX Converter

Convert RGB and RGBA values to HEX

Color