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.