Does it match CSS color-mix()?

Yes — the OKLCH and OKLAB modes produce the same result as color-mix(in oklch, …) and color-mix(in oklab, …) in modern CSS. sRGB mode matches color-mix(in srgb, …).

Why does OKLCH mixing look cleaner?

sRGB mid-points fall through the perceptual 'dead zone' where colors look muddy. OKLCH stays at constant perceived lightness as it interpolates, producing vivid midtones.

Can I blend more than two colors?

Use the Color Blender for multi-stop blends with N intermediate steps. This tool is two-color only.

Yes — runs entirely in your browser.

mix · blend · ratio · sRGB · live · local

Mix any two colors at any ratio

Linear sRGB color blending between two HEX inputs. Slide the ratio to see the midpoint live. Use it for design transitions and tinting.

Color Mixer

#3B82F6

50%

#F59E0B

50%

Mix

#989081

result

Ratio

50%

B share

input · color

Color A

Color B

output · preview

Mixed result

#989081

Click any band to copy that intermediate color.

Quick Start

How to mix two colors

Pick A and B, drag the ratio. The mix updates as you slide.

01
Pick colors A & B
Paste HEX values for the two source colors.
Colors round-trip through a normalised OKLCH representation, so manipulations (lighten, mix, contrast) preserve perceptual uniformity per CSS Color 4.
inputOKLCHCSS Color 4perceptuallive
A,B · colorhex · sRGB
```
#3b82f6 + #f59e0b
```
loaded · normalisedOKLCH · ready
02
Slide the ratio
0 = pure A, 1 = pure B, 0.5 = even mix.
Format conversion handles hex, rgb(), hsl(), oklch(), color(display-p3 …) with proper gamut mapping when crossing colour spaces.
ratiohex · rgb · hslP3gamut-mappedlive
ratio · options0.5 · live
```
50/50
```
options applied · livelive
03
Read the mix
HEX of the blended color updates in the preview.
Contrast and accessibility checks evaluate against WCAG 2.2 AA (4.5:1) and AAA (7:1) thresholds; APCA is offered when contrast is the goal.
outWCAG 2.2APCAAA · AAAcontrast
mix · convertedready · ready
```
#998b81
```
converted · liveWCAG-aware
04
Sample the gradient
Click any stripe to grab an intermediate color.
Copy formats any swatch in the chosen syntax (#aabbcc, rgb(170 187 204), etc.); downloads emit CSS variable blocks or palette JSON.
sampleclipboardCSS varspalette JSONblob
ok · copiedready · done
```
✓ Copied
```
shipped · ready to shipsuccess

Pro tips

Colour work that survives accessibility audits

Use OKLCH for manipulation

OKLCH is perceptually uniform — lightness changes look uniform. hsl() isn’t, and produces muddy mid-tones.

Test against WCAG 2.2

4.5:1 for normal text (AA), 7:1 for AAA. Use Contrast Checker before shipping.

Mind gamut clipping

P3 colours that exceed sRGB get clipped on standard displays. Choose relative colorimetric in CSS Color 4.

Colour blindness affects 8%

Use the Color Blindness simulator to check critical UI before launch.

Don’t hardcode hex

Use CSS variables. Light/dark themes become trivial when colours are tokenised.

Dark mode isn’t inverted

Don’t simply invert lightness — desaturate slightly and re-pick accents. Pure-inverted UIs look harsh.

Use Cases

When to mix colors

Theming, gradients, charts, illustration.

Tinting

Lighten or darken by blending with white or black. Conversions go through OKLCH so perceptual lightness stays uniform across hues — a 50% L blue looks as bright as a 50% L yellow. HSL fakes this and produces muddy mid-tones, OKLCH solves it per CSS Color 4.

WCAG 2.2 AA

Tonal scales

Sample a mix into 10 stops for a tonal palette. WCAG 2.2 contrast is sampled live for AA (4.5:1) and AAA (7:1) — flip foreground/background to test both directions. APCA is offered when contrast itself is the goal (e.g., dataviz).

P3-aware

Brand blending

Bridge two brand colors for compound assets. Output covers hex, rgb(), hsl(), oklch(), and color(display-p3 …) for CSS Color 4. Drop straight into Tailwind config, CSS custom properties, or Figma without re-typing values.

perceptually-uniform

Chart colors

Generate intermediate categorical hues between extremes. Pair with the Contrast Checker before shipping any new theme. Catches accessibility regressions before they become bugs filed against you by users with low vision.

gamut-safe

Quick math

Avoid mental hex blending. Tokens drop straight into Figma variables, Tailwind config, or CSS custom properties. Theme switching becomes a single variable swap rather than a search-replace across stylesheets.

a11y-ready

Design hand-off

Get a precise midpoint HEX without leaving the browser. Gamut-aware: tools warn before you ship a P3 colour that clips on sRGB displays. Choose the appropriate fallback strategy (relative colorimetric vs perceptual) per CSS Color 4 spec.

design-token

FAQ

Frequently asked questions

Is this linear in sRGB?

Yes — each channel is linearly interpolated in 0-255 byte space.

Why not OKLAB?

Linear sRGB mixing matches what most CSS engines and tools do. For perceptual blending see the Color Blender.

Does it preserve gamma?

No — we mix in encoded sRGB. For perceptually-correct mixing, prefer OKLAB.

What about more than two colors?

Use the Color Blender to mix 3+ colors along a multi-stop gradient.

Is anything sent to a server?

No — the math runs locally in your browser.

Suggest a tool

Something missing?

Tell us what you need. We ship the top requests every two weeks.

47 in queue·8 shipped this month

Request queued. Thanks!