The Color Mixer blends two colors into one by averaging each red, green, and blue channel at a ratio you set, using the formula result = round(A × (1 − ratio) + B × ratio) per channel with the ratio clamped between 0 and 1. At 50% you get the exact midpoint of both colors' channel values, and the tool displays the precise hex and RGB of the blend the moment you adjust the slider. Built for designers, developers, and anyone who needs a reproducible color between two known swatches, it runs entirely in your browser with no upload, no sign-up, and no usage caps. The interface also renders an 11-step gradient between your two endpoints so you can scan the whole transition at a glance, and a single click copies the final hex to your clipboard. Under the hood it uses sRGB linear interpolation, the same screen-light arithmetic that powers CSS gradients and most design tools, which means results drop straight into stylesheets, design files, and chart palettes without any conversion step.
What the Color Mixer Does
The Color Mixer is a free browser-based tool that takes two colors and blends them into a single output at whatever ratio you choose. You supply Color A and Color B, drag a slider from 0% to 100%, and read off the exact hex and RGB of the resulting shade. The tool also renders an 11-step gradient between your two endpoints so you can see every transition at a glance, and a copy button puts the final hex on your clipboard. Everything happens locally with no upload, no account, and no usage cap.
Under the hood, the math is straightforward: for each of the red, green, and blue channels the tool computes a weighted average of the two input channels. That makes the result predictable, reproducible, and identical to what CSS gradients and most modern design tools produce. If you have ever eyeballed two brand colors and wished for the exact midpoint, or wanted to sample a stop between two palette entries, this is built for that moment. To open the tool and start blending, head to the Color Mixer in your browser.
How to Use the Color Mixer
- Enter your first color in the Color A field. You can type a short hex like #f00, a full hex like #3b82f6, or an rgb() string like rgb(59, 130, 246). Click the swatch next to the field if you would rather pick the color visually.
- Enter your second color in the Color B field the same way, using hex, rgb(), or the visual picker.
- Drag the ratio slider to set how much of each color goes into the blend. 0% is pure Color A, 100% is pure Color B, and 50% is the exact midpoint of both colors' channel values.
- Read the mixed color's hex and RGB values in the result panel. The gradient bar above the result shows you every step between the two endpoints so you can preview the whole transition.
- Click Copy to put the result hex on your clipboard, ready to paste into CSS, design software, or code.
The Blend Formula Explained
Every blend the Color Mixer produces comes from the same simple calculation applied to each of the red, green, and blue channels independently:
result = round(A × (1 − ratio) + B × ratio)
The ratio comes from the slider and is clamped between 0 and 1. Channels are rounded to the nearest integer and clamped to the 0–255 range that 8-bit sRGB uses. At ratio 0 the result is pure A, at ratio 1 it is pure B, and at ratio 0.5 every channel is exactly halfway between the two inputs. Because the math is per-channel, mixing a warm red with a cool blue produces a clean digital midpoint rather than a muddied pigment gray.
For a single worked example, take Color A as #ff0000 (pure red, channels 255, 0, 0) and Color B as #0000ff (pure blue, channels 0, 0, 255) at a ratio of 0.5. For the red channel: round(255 × 0.5 + 0 × 0.5) = round(127.5) = 128. For the green channel: round(0 × 0.5 + 0 × 0.5) = 0. For the blue channel: round(0 × 0.5 + 255 × 0.5) = round(127.5) = 128. The result is rgb(128, 0, 128), or #800080, a clean magenta. You can verify this directly in the tool by typing the two endpoints and setting the slider to 50%.
Why Red Plus Blue Makes Magenta Here
If you have ever mixed red and blue paint, you know the result is a muddy dark purple or brown, not magenta. The Color Mixer behaves differently on purpose: it blends sRGB screen-light values, not physical pigments. Screen light is additive, so combining red and blue light at full intensity produces magenta. Paint is subtractive, so combining red and blue pigments absorbs more wavelengths and produces a darker, muddier hue. No screen-based blend can model real pigment behavior, and the tool makes no attempt to.
| Mixing Method | Red + Blue Result | Best For |
|---|---|---|
| sRGB linear interpolation (this tool) | Magenta #800080 | On-screen design, CSS, UI, charts |
| Subtractive paint or ink mixing | Muddy dark purple or brown | Physical acrylics, oils, gouache, printer ink |
| Gamma-corrected optical light mixing | Not modeled by this tool | Theoretical high-fidelity light composition |
The practical takeaway: use this tool for any digital color work, including websites, apps, icons, dashboards, and presentations. Do not use it to predict what real paint or printer ink will look like on paper. The underlying physics is different, so the output will not match.
Reading the Result Panel
Once you have chosen your two endpoints and a ratio, the result panel shows the blend in three forms at once: a lowercase six-digit hex like #3b82f6, the same color as an rgb() string like rgb(59, 130, 246), and a visual swatch you can eyeball against page mockups or screenshots. The hex is always six digits even if you typed a short hex like #f00 on the input side, so the copyable value drops straight into CSS without expansion. The ratio label, formatted like "70% A / 30% B", sits next to the values so you always know what split produced the swatch, which makes it easy to reproduce the result later or hand the ratio off to a collaborator.
Accepted Color Formats
The Color Mixer parses three input formats for both Color A and Color B:
- Short hex: three-digit shorthand like #f00 or #0af. Each digit is expanded to its full form, so #f00 becomes #ff0000.
- Full hex: six-digit hex like #3b82f6 or #1a2b3c. This is the most common format in CSS and design files.
- rgb() strings: like rgb(59, 130, 246). Useful when you have values copied from another tool or a stylesheet.
The parser is permissive. Extra spaces are ignored, the leading hash mark is optional, and letters can be upper- or lower-case. That means "#3B82F6", "3b82f6", "rgb(59,130,246)", and " rgb ( 59 , 130 , 246 ) " all resolve to the same color. If you would rather not type at all, each field has a native color swatch you can click to open the system picker and choose visually.
Practical Ways to Use the Color Mixer
A few situations where the tool earns its keep:
- Finding a midpoint between two brand colors. Set Color A to your primary brand hex, Color B to a secondary brand hex, and drag the slider to 50% for a balanced in-between shade. Useful for hover states, secondary buttons, or accent fills.
- Generating gradient stops. Need a smooth transition between two CSS gradient endpoints? Use the 11-step gradient bar to pick visually pleasing intermediate stops, then copy each hex into your stylesheet.
- Building a chart palette. Categorical charts often need a small family of related colors. Blending a base color with white or black at varying ratios gives you a clean light-to-dark scale without reaching for a separate generator.
- Sampling a tint or shade. If you want a color 30% of the way from your base toward a highlight or shadow, the ratio slider reads in single-percent increments so you can dial it in precisely.
If you want a wider palette derived from a single base color (complementary, analogous, or triadic schemes), the Color Palette Generator builds those from harmony rules. And if you need to convert a finished hex to RGB or HSL for use in code, the RGB to HEX converter handles that round-trip instantly.
Privacy and Limits
All blending math runs locally in your browser. The colors you enter, the ratios you try, and the hexes you copy are never sent to a server, so there is no upload step at any point. There is no sign-up, no usage limit, and no tracking of inputs. You can blend as many pairs as you like, close the tab, and reopen the tool later without losing anything, because nothing was stored remotely in the first place.
One practical limit worth knowing: this is a two-color blend. The tool mixes exactly two inputs at one time, so if you need a result that combines three or more colors, you have to blend in stages. Mix A and B to get AB, then blend AB with C to get ABC, and so on. Each intermediate result is just another hex you can paste back into either field for the next round of mixing, and the same ratio label and copy button keep the workflow consistent throughout.