Skip to content
⊕

Color Mixer

Blend two colours at any ratio in linear sRGB.

100% A100% B
A
#000000
Result
#bcbcbc
B
#ffffff
HEX#bcbcbc
RGBrgb(188, 188, 188)
HSLhsl(0, 0%, 73.7%)
OKLCHoklch(79.52% 0 0)

Mixing happens in linearised sRGB (linear light), not a naïve gamma-space channel average — closer to how light actually blends.

About Color Mixer

A color mixer blends two colours at any ratio to produce an intermediate swatch—useful for gradient midpoints, brand-colour blends, and approximating translucent overlays. toco.tools takes colours A and B plus a 0–100% mix slider and computes a live result with HEX, RGB, HSL, and OKLCH entirely in the browser. The mix space matters. Averaging gamma-encoded sRGB channels naïvely makes 50% black+white look like muddy #808080. This tool converts each channel to linear light, interpolates, then encodes back to sRGB—akin to CSS Color Level 5 color-mix() in srgb-linear.

How to use

  1. Enter colours A and B as HEX, RGB, or HSL (or use the pickers)
  2. Adjust the mix ratio slider for how much of B (0–100%)
  3. Check the result swatch and copy the format you need

FAQ

Why mix in linearised sRGB?

sRGB channel values are gamma-encoded; averaging them directly makes mid-tones darker and muddier than real light mixes. Converting to linear light, interpolating, then encoding back yields a more natural mid-grey (around #bcbcbc for 50% black+white).

What do 0% and 100% mean?

0% is entirely colour A; 100% is entirely colour B. The slider is the percentage of B.

How is alpha handled?

RGB channels are mixed in linear light; alpha is linearly interpolated between 0 and 1. Output includes HEX (8-digit when needed), RGBA, HSLA, and OKLCH.

Is my color data sent anywhere?

No. Mixing and format conversion run entirely in your browser; nothing is sent to toco.tools's servers.