Blend Color A into Color B by an exact percentage. Switch between direct sRGB channel interpolation and perceptual OKLCH interpolation to see why the same endpoints can produce visibly different middle colors.
Copy the exact current result, or save/open the five-step blend path.
The exact HEX value produced at the current percentage.
oklch(0% 0 0)Select a swatch to copy it. Save and Generator use this five-color path.
The endpoints and percentage can stay identical while the route through color space changes the middle. Select either card to copy that method's current result.
In RGB / sRGB mode, Colorrow interpolates the encoded red, green, and blue channel values independently. A 50% mix sits halfway between each pair of channel numbers, so red and blue produce the familiar digital purple midpoint.
This is useful when you want straightforward sRGB math, compatibility with an existing channel-based workflow, or results that are easy to reproduce in code.
OKLCH separates lightness, chroma, and hue. Colorrow interpolates lightness and chroma linearly and moves hue along the shorter angular path. Neutral endpoints borrow the meaningful hue from the chromatic endpoint rather than introducing an arbitrary spin.
If an intermediate OKLCH color falls outside sRGB, the preview reduces chroma until it fits while keeping the intended lightness and hue as closely as practical. The tool tells you when that happens.
At 0%, the result is exactly Color A. At 100%, it is exactly Color B. At 50%, the two endpoints have equal weight. Swapping A and B automatically flips the percentage so the currently weighted mix stays conceptually aligned.
Those endpoints are exact in both methods; only the intermediate path differs.
Color mixing can help prototype hover states between two brand colors, intermediate chart colors, animation keyframes, illustration transitions, or a temporary bridge between two semantic tokens. The five-step blend path is useful when you want a small palette to continue in Generator.
A mathematical midpoint is not automatically a good UI color. Check contrast and semantic meaning in the context where the mixed color will actually be used.
Two color spaces can create noticeably different intermediate colors, especially when hues are far apart or highly saturated. This tool mixes opaque sRGB HEX endpoints; it does not model physical pigments, spectral mixing, transparency compositing, or every wide-gamut display condition.
For production CSS, test the final chosen color in your browser targets and use a concrete fallback where your system requires one.