Skip to content
PithLab

↑↓ to move · Enter to open · Esc to close

Colour Mixer (sRGB, Linear RGB and OKLab)

Blend two colours in three colour spaces and build a stepped scale between them.

50%
7
#800080

sRGB

Averages the gamma-encoded numbers, like a plain hex average. Mixes of saturated opposites come out dark and muddy.

rgb(128 0 128)
hsl(300 100% 25%)
color-mix(in srgb, #ff0000 50%, #0000ff)
#bc00bc

Linear RGB

Averages actual light, like overlapping two lamps. Physically right for light, but midpoints look too bright to the eye.

rgb(188 0 188)
hsl(300 100% 36.8%)
color-mix(in srgb-linear, #ff0000 50%, #0000ff)
#8c53a2

OKLab

Averages in a perceptual space, so lightness changes evenly and hues stay clean. Usually the best choice for UI gradients.

rgb(140 83 162)
hsl(283.4 32.3% 48.1%)
color-mix(in oklab, #ff0000 50%, #0000ff)

Blend scale (7 steps)

sRGB
Linear RGB
OKLab
Use via API

Mix two colours in sRGB, linear RGB and OKLab, with the equivalent CSS color-mix() and an evenly spaced blend scale in each space. Send JSON, get JSON back.

POST https://pithlab.com/api/v1/tools/color-mixer

curl https://pithlab.com/api/v1/tools/color-mixer \
  -H "Authorization: Bearer $PITHLAB_KEY" \
  -H "Content-Type: application/json" \
  -d '{"first":"#ff0000","second":"#0000ff","percent":50,"steps":3}'

Fields and responseOpenAPI documentGet an API key

About the Colour Mixer

Mix two colours at any ratio and compare the result in sRGB, linear RGB and OKLab side by side, with a stepped blend scale and copyable color-mix() CSS.

How to use the Colour Mixer

  1. Enter the two colours as hex, rgb(), hsl(), oklch() or a CSS name, or use the pickers.
  2. Drag the mix slider to set how much of the second colour goes in. 50% is an even mix.
  3. Compare the three results. sRGB is the plain numeric average, linear RGB mixes light, and OKLab mixes by how we see colour.
  4. Choose how many steps you want in the blend scale, then click a swatch or use the copy buttons to grab hex values or the color-mix() CSS.

Examples

Red and blue, half and half

Input

#ff0000 + #0000ff at 50%

Output

sRGB #800080 · Linear RGB #bc00bc · OKLab #8c53a2
Black and white, half and half

Input

#000000 + #ffffff at 50%

Output

sRGB #808080 · Linear RGB #bcbcbc · OKLab #636363
Lighten blue with 25% white

Input

#3b82f6 + white at 25%

Output

sRGB #6ca1f8 · Linear RGB #91adf8 · OKLab #6ea3fb

Frequently asked questions

Why do the three colour spaces give different answers?

Hex values are gamma-encoded, so averaging them (sRGB) is not the same as averaging light. Linear RGB averages the actual light energy, which looks too bright at the midpoint. OKLab is built so equal steps look equally different, so its midpoint usually looks like the true halfway colour.

Which space should I use for gradients and design tokens?

OKLab for most UI work: blends keep their saturation and lightness changes evenly. Use linear RGB when you are simulating light, such as overlapping spotlights. sRGB is what older CSS gradients do, so use it to match legacy output.

Can I use the result directly in CSS?

Yes. Copy the hex value, or the color-mix() expression, which modern browsers evaluate themselves. color-mix(in oklab, #ff0000 50%, #0000ff) gives the same colour as the OKLab result here.

How are transparent colours mixed?

Like CSS color-mix(): each colour is multiplied by its alpha before mixing and divided out again afterwards, so a fully transparent colour does not drag the mix towards black.