Color Mixer
Mix two colors and see the result.
Overview
The Color Mixer blends two input colours at any ratio between 0 and 100% and returns the resulting hex, RGB and HSL values. You can choose whether to mix in sRGB, linear RGB or OKLCH space — each gives a noticeably different result, especially for blends that cross from saturated to grey.
It is handy when generating tonal palettes, picking a midpoint between two brand colours, designing CSS gradient stops that look balanced, or simulating layered ink on a print mock-up. Designers also use it to test how text colour will behave when laid over a semi-transparent overlay.
How it works
sRGB mixing linearly interpolates each channel between the two endpoints. Because sRGB is gamma-encoded, this produces the muddy mid-tones that most graphics software defaults to. Linear-RGB mixing first gamma-decodes both colours, interpolates, and re-encodes — closer to how light physically blends.
OKLCH mixing is the perceptually uniform option: each colour is converted to OKLCH, the L, C and h components are interpolated independently (with hue taking the shorter angular path), and the result is converted back to sRGB. The OKLCH path avoids the grey "dead zone" that appears at the 50% mark in naive sRGB blends.
Examples
#ff0000 + #0000ff @ 50% sRGB → #800080
#ff0000 + #0000ff @ 50% linear → #bc00bc
#ff0000 + #0000ff @ 50% OKLCH → #c8009a
#ffff00 + #0000ff @ 50% OKLCH → #b15f8a
FAQ
Why does sRGB mixing give muddy results?
sRGB values are gamma-encoded for storage, so the numeric midpoint between two channels is not the perceptual midpoint of light intensity. Mixing in linear RGB or OKLCH fixes this.
Which space should I use for CSS gradient stops?
OKLCH gives the smoothest perceptual transition and is supported natively in modern browsers via linear-gradient(in oklch, ...). Fall back to linear RGB for older browsers.
How is this different from CSS color-mix()?
The CSS function performs the same operation; this tool lets you preview the result and experiment with the ratio before committing to a value.
Does the ratio represent the proportion of the first or second colour?
A ratio of 0% returns the first input unchanged, 100% returns the second. A 25% mix is one quarter of the way from the first toward the second.