Mixing two colors in the Color Mixer produces a blended result by averaging each red, green, and blue channel independently, with the formula result = round(A × (1 − ratio) + B × ratio) applied to all three channels. When you set the ratio slider to 50%, the tool returns the exact midpoint of the two source colors' sRGB channel values, which is the same math CSS gradients and most UI design systems use. Because the calculation happens on 8-bit screen light values, blending is additive-style rather than paint-style: mixing pure red (#ff0000) with pure blue (#0000ff) yields a clean magenta (#800080) rather than the muddy purple you would get from real pigments. The result panel reports both a six-digit hex code and an rgb() string, so you can paste the blended value straight into CSS, design files, or chart code. Everything runs in the browser, so you can experiment with ratios, formats, and inputs as often as you need without registering an account or hitting any usage limits.
How sRGB Linear Interpolation Blends Colors
Every blend the Color Mixer produces is a per-channel weighted average in sRGB space. For each of the red, green, and blue channels the tool computes:
result = round(A × (1 − ratio) + B × ratio)
The ratio is the slider position expressed as a decimal between 0 and 1. A ratio of 0 returns Color A unchanged, a ratio of 1 returns Color B unchanged, and a ratio of 0.5 returns the midpoint of every channel. Channels are rounded to the nearest integer and kept within 0–255, which is the full range an 8-bit screen channel can display.
Worked example: blend #ff0000 (red) with #0000ff (blue) at a 50% ratio.
- Red channel: round(255 × (1 − 0.5) + 0 × 0.5) = round(127.5) = 128
- Green channel: round(0 × (1 − 0.5) + 0 × 0.5) = 0
- Blue channel: round(0 × (1 − 0.5) + 255 × 0.5) = round(127.5) = 128
The combined result is rgb(128, 0, 128), which the tool writes as #800080. This is the clean magenta the panel reports, and it is exactly what most design tools would draw for the same two inputs.
What to Mix With a Base Color Blend
The phrase "what to mix with" comes up whenever you start from a premixed base — a bagged coleslaw mix in the kitchen, or a single base color in design — and want to know what to add next. The Color Mixer treats your base color as Color A and any candidate partner as Color B, then lets you scrub the ratio slider to feel out the result without committing to it.
Just as a cook might add apple, raisins, or a tangy dressing to a coleslaw mix to shift it in a new direction, a designer can add white, black, a complementary hue, or another brand color to a starting hex to nudge the blend toward a target. The tool's job is to make that exploration fast and reversible.
Some practical pairings worth trying:
- Base brand color with a 20% nudge toward white — produces a softer tint suitable for backgrounds, hover states, and disabled controls.
- Two adjacent stops in an existing palette — fills in a missing intermediate for charts, scales, and data visualization.
- A primary with its complementary hue — useful for finding a balanced accent, knowing the midpoint will land somewhere neutral or muted.
- Two neutrals at different temperatures — produces a custom off-white or warm gray for typography and panel surfaces.
Because the gradient bar shows the full transition between A and B, you can quickly tell whether two colors blend into a pleasant midtone or pass through an ugly intermediate before you copy anything.
How to Blend Two Colors With the Color Mixer
- Enter your first color in the Color A field. You can type a hex value such as #f00 or #3b82f6, paste an rgb() string like rgb(59, 130, 246), or click the swatch to pick a color visually.
- Enter your second color in the Color B field the same way.
- 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 midpoint.
- Read the mixed color's hex and RGB values in the result panel and use the gradient bar to preview every step between the two colors.
- Click Copy to put the result hex on your clipboard.
Why Red Plus Blue Gives Magenta Instead of Purple
A common surprise when people first open a screen-based color mixer is that pure red and pure blue mix into magenta, not the dark purple you would get from real paint. The reason is that this tool blends sRGB screen values, which behave like additive light rather than subtractive pigment.
On a screen, every visible color is built from red, green, and blue light. Averaging those channels produces the in-between light values you would actually see if two glowing panels were combined. In paint, dyes and pigments absorb light subtractively, so mixing red pigment with blue pigment produces a darker, muddier result closer to brown or deep violet.
If you are designing for screens — websites, apps, icons, dashboards, or presentations — sRGB interpolation is exactly what you want, because that is the math your monitor is using. If you need to predict how acrylics, watercolors, or printer inks will combine, a screen tool cannot model that accurately, and no honest screen-based blend ever will.
Reading the Gradient Bar and Result Panel
The result panel reports two formats for the current blend: a lowercase six-digit hex code and an rgb() string. Either is valid CSS, so you can paste whichever fits your project.
The gradient bar underneath shows eleven evenly spaced blend steps between Color A and Color B, including both endpoints. This is helpful when you want to sample a color halfway between two stops without computing it yourself, or when you are building a scale and want to see the whole transition before you commit to a midpoint.
The ratio label always reports the current split, for example 70% A / 30% B, so results are reproducible. If you find a blend you like, the slider position plus the two hex inputs is enough to recreate it later.
Input Formats the Color Mixer Accepts
The parser accepts three input formats in either field and tolerates extra spaces, missing hash marks, and upper- or lower-case letters.
| Format | Example | Notes |
|---|---|---|
| Short hex | #f00 | Three-digit shorthand expands to #ff0000 |
| Full hex | #3b82f6 | Six-digit hex with leading hash |
| rgb() function | rgb(59, 130, 246) | Comma-separated 8-bit channels |
| Visual picker | Click the swatch | Native color input opens alongside the field |
Common Uses for a Screen-Based Color Mixer
A precise screen-based mixer is useful for several everyday tasks:
- Palette building — finding a tint halfway between two brand colors to extend a palette without breaking it.
- Gradient stops — generating the exact mid-color for a CSS linear-gradient so the transition looks smooth.
- Chart scales — sampling five or seven evenly spaced steps between a low and high value for sequential visualizations.
- UI states — nudging a button color 20% toward white for a hover state or toward black for a pressed state.
- Quick experiments — testing what two random colors look like together before committing to a design choice.
Privacy and Limits
The Color Mixer runs entirely in the browser. Color values, slider positions, and picker choices never leave the page, so you can experiment with brand colors or client work without worrying about uploads.
There is no usage cap and no account. Open the tool as often as you need to and copy as many results as your project requires.