Color mixer

What this color mixer does

Blend Color A and Color B at any ratio and copy the result as hex. The interesting part is the Space selector: the same two colors mixed 50/50 give a different answer in OKLCH, RGB and HSL, because each space draws a different straight line between them. The tool is the quickest way to see those three midpoints side by side and pick the one that looks right. Behind the scenes it is the same interpolation the gradient generator uses, frozen at one point.

How to use it

1. Enter Color A and Color B as any CSS color, or use the two pickers.
2. Drag the Mix slider. The label reads “Mix 30% B” — the percentage of B in the result.
3. Choose a Space: OKLCH (default), RGB or HSL.
4. Copy the hex from the Result row.

The same mix in three spaces

All examples at 50%:

Color A	Color B	RGB	OKLCH	HSL
#ff0000 red	#0000ff blue	#800080 dull purple	#ba00c2 vivid purple	#ff00ff magenta
#0000ff blue	#ffff00 yellow	#808080 grey	#00cfbd teal	#00ff80 spring green
#6b46ff	#00e5ff	#3696ff	#00a4ff	#2370ff

RGB averages each channel. Opposite hues cancel out and the midpoint collapses toward grey — the “muddy middle” explained in why gradients look muddy. It also darkens: two colors at full brightness average to a midpoint that is visibly dimmer.

OKLCH interpolates lightness, chroma and hue separately in a perceptual space. The midpoint keeps the saturation of its parents and sits visually halfway between them, which is almost always what a designer means by “mix these two”.

HSL also rotates hue, but HSL lightness and saturation are not perceptual, so the midpoint can be much brighter or more garish than either input — blue and yellow become a neon green. It is useful when that sweep through intermediate hues is the effect you want, for example a rainbow scale.

Practical uses

• Hover and active states. Mix your brand color with 10–20% black (OKLCH) for a hover shade that keeps its hue instead of turning brown.
• Tinted surfaces. Mix the brand color with 90% white to get an “alert background” that still reads as the brand.
• Flattening transparency. rgba(0, 0, 0, 0.1) over #ffffff is simply black mixed with white at 10% in RGB (#e6e6e6). Use the RGB mode for this — compositing is linear in channel values, not perceptual.
• Chart in-betweens. Need a fourth series color between two existing ones? Mix at 50% in OKLCH.

The modern CSS equivalent, if you can rely on Chrome 111+, Safari 16.2+ and Firefox 113+:

.btn:hover {
  background: color-mix(in oklch, var(--brand), black 15%);
}

The tool gives you the pre-computed hex for stylesheets that still need to support older browsers, or for pasting into a design tool.

Gotchas

• The hex output is clipped to sRGB. Mixing two very saturated colors in OKLCH can produce a midpoint slightly outside the gamut; the clipped hex may be a touch duller than the true result.
• HSL hue direction follows the shorter arc. If you want the long way round (for a rainbow), add an intermediate stop in the gradient generator instead.
• Named colors work (tomato, rebeccapurple), but the pickers only reflect 6-digit hex; the text fields are the source of truth.

Related tools and snippets

• Gradient generator — the full transition between A and B with multiple stops and OKLCH interpolation.
• Tints and shades generator — mixing toward white and black in evenly spaced steps, which is this tool run several times.
• Contrast checker — test the mixed color as a text or background color.
• Color converter — turn the result hex into oklch() or hsl().
• Animated gradient background snippet — a moving gradient whose stops you can pre-mix here.