Mix ratio50% B
Mix result
#C97E90
How to use
01
Set Color A and Color B
Type or paste hex codes into the two inputs, or click the swatches to open a visual picker. The defaults, #6366F1 and #F59E0B, show how far apart two hues can sit.
02
Choose a ratio and a mode
Drag the Mix ratio slider from 0 to 100 percent B, then pick LAB, LCH, RGB, or HSL below it. The 7-step ramp redraws instantly as you change either control.
03
Copy the mix result
The blended color appears as a large swatch with its hex value beside it. Hit the copy button and paste it straight into your CSS or design file.
Why Color Blender
- Blend two colors at any ratio using LAB, LCH, RGB, or HSL space.
- LAB is perceptually uniform, avoids muddy midpoints.
- Shows 7-step gradient ramp + numeric midpoint.
Common questions
What does the Color Blender actually calculate?
It interpolates between your two colors inside the color space you select. Each color becomes a point in that space, and the mix ratio picks a spot on the line between them. At 50 percent in LAB, #6366F1 and #F59E0B produce #C97E90, a rosy mauve that sits visually halfway between the indigo and the amber.
Why does blending in RGB look muddy compared to LAB?
A straight line through the RGB cube often passes through desaturated territory. The same indigo and amber pair mixed at 50 percent in RGB gives #AC827E, a grayish brown, instead of LAB's livelier #C97E90. LAB is built around how humans perceive lightness and hue, so its halfway points tend to keep more character.
Can I use this as a color mixer online for paint?
Not reliably. Screens mix light additively while pigment mixes subtractively, so blue and yellow paint make green but blue and yellow light trend toward gray. As a color mixer online it's accurate for anything displayed on a screen, which is where hex codes live anyway.
How do I mix hex colors at a ratio other than 50 percent?
Slide the Mix ratio anywhere from 0 to 100. The readout shows the percentage of Color B in the result, so 25 percent keeps you closer to Color A. With the default pair in LAB, 25 percent B lands on #A471C1, a purple that clearly leans indigo.
Does the 7-step blend ramp export as a gradient?
The ramp is a visual reference for how the transition behaves across the whole range, not an export. Copy the midpoint hex you need, or take your two endpoints over to the Gradient Preview tool to build actual CSS gradient code.
Is there a real difference between LAB and LCH blending?
They describe the same gamut with different coordinates. LCH separates lightness, chroma, and hue, so blends rotate through hue more predictably, while LAB moves in straight perceptual lines. Try both with the radio buttons; on far-apart hues you'll sometimes see LCH pass through an intermediate hue that LAB skips.
Is it possible to blend two colors online without sending data anywhere?
Yes. The math runs in your browser through the chroma-js library, the same one used by many data visualization tools. Nothing you type is uploaded, so internal brand hexes stay on your machine.
Is the color blender online free to use without an account?
Yes. The color blender online needs no signup and no install, and the mixing math runs on your device, so private brand hexes never leave the page. Set Color A and Color B, drag the ratio, and copy the midpoint.
How does the 7-step ramp act like a custom color gradient blender?
Each step is an interpolated stop between your two colors, so the ramp previews like a custom color gradient blender. It isn't exportable CSS, though; for a copyable gradient rule, drop the two endpoints into the Gradient Preview tool.
Can I use this as a mix color shades tool for one hue?
In a way, yes. Set Color A and Color B to a light and a dark version of the same hue and the blend becomes a mix color shades tool for the steps between them. For a full tint and shade ramp from one base, the Shades & Tints tool is more direct.