Color Mixer
Pick two colors and a ratio to see the blended result with copyable HEX, RGB, and HSL values.
Linear light mixes in linear intensity before converting back to sRGB — brighter midpoints than naive averaging, though not a full LAB blend.
Options
#b891b5rgb(184, 145, 181)hsl(305, 22%, 65%)Tap a step to copy its hex code.
Screens mix light additively, so results differ from mixing physical paint.
How it works
- Choose your two colors with the pickers or type HEX codes directly.
- Drag the ratio slider and pick a mixing method — sRGB average or linear light.
- Copy the mixed color as HEX, RGB, or HSL, or tap any step in the gradient strip.
Frequently asked questions
- What is the difference between sRGB and linear-light mixing?
- sRGB averaging blends the raw 0–255 channel values, which can produce dark, muddy midpoints because sRGB is gamma-encoded. Linear-light mixing first converts each channel to linear intensity, blends there, then converts back, which usually gives brighter, more natural-looking midpoints. It is not a full LAB or OKLab blend, but it is a clear improvement over naive averaging.
- Why does blue plus yellow not make green here?
- Screens mix light additively, while paint mixes pigments subtractively. Additive blue and yellow light average toward a neutral gray rather than green, so digital results can differ from what you learned with paint. This tool models how colors combine on a display, which is what matters for design work on screens.
- Are my colors or any data sent to a server?
- No. Every calculation runs locally in your browser using plain JavaScript, and the page makes no network requests while you work. Nothing you enter is uploaded, logged, or stored anywhere.
- Can I mix more than two colors?
- Yes. Open the Options section to enable a third color and set how strongly it blends into the result. The tool first mixes your two main colors at the chosen ratio, then blends the third color on top using the same method, so the math stays predictable.
- Which color code formats can I copy?
- The mixed color is shown as a HEX code, an rgb() value, and an hsl() value, each with its own copy button. The seven-step gradient strip copies HEX codes, which paste directly into CSS, Figma, Tailwind configs, and most design tools.
About this tool
This color mixer blends two colors at any ratio and shows the result as a large swatch with ready-to-copy HEX, RGB, and HSL codes. A slider controls how much of each color goes into the mix, and a seven-step gradient strip shows the intermediate blends between your two endpoints — useful when you need a smooth ramp of related shades rather than a single midpoint. Everything updates live as you adjust the controls.
Two mixing methods are available. The sRGB method averages the encoded channel values directly, matching what many simple tools and CSS pre-processors do. The linear-light method converts each channel from gamma-encoded sRGB to linear intensity, mixes there, and converts back. Because sRGB is not perceptually or physically linear, naive averaging tends to darken midpoints; linear-light mixing avoids most of that and generally looks closer to what you expect. It is an honest approximation — not a full LAB conversion — but for most design work the difference from heavier color models is small. All of the math runs in your browser, so no color data ever leaves your device.
Typical uses include finding a hover or pressed state between a brand color and white or black, generating tints and shades for a design system, building gradient stops that pass through pleasant midpoints, and matching an in-between color you can see but cannot name. The optional third color lets you warm, cool, or tone a mix — for example, blending a touch of gray into a saturated accent.
One practical note: screens mix light additively, while paint mixes pigment subtractively, so results here will not match physical paint mixing. If a midpoint looks dull in sRGB mode, switch to linear light before reaching for a different color — the method is often the culprit, not the palette.