How does the online color mixer blend two colors?

It uses simple sRGB linear interpolation. For each red, green, and blue channel it computes a weighted average — result = round(A × (1 − ratio) + B × ratio) — where the ratio comes from the slider. At 50% you get the exact midpoint of the two colors' channel values.

Why does red mixed with blue give magenta instead of purple or brown?

Because the tool mixes screen light values in sRGB, which is additive-style interpolation, not subtractive paint mixing. Blending #ff0000 and #0000ff averages to #800080, a clean magenta. Real red and blue paint would combine subtractively into a dark muddy purple, which a screen-based blend does not model.

What color formats can I enter?

Short hex (#f00), full hex (#3b82f6), and rgb() strings like rgb(59, 130, 246). Input is case-insensitive, extra spaces are ignored, and the leading hash is optional. You can also use the color picker swatch next to each field.

Is my data uploaded anywhere?

No. All the color math runs locally in your browser. Nothing is sent to a server, there is no sign-up, and there are no usage limits.

Can I preview every step between two colors?

Yes. The gradient bar shows eleven evenly spaced blend steps between your two colors, including both endpoints, so you can see the whole transition at a glance and pick an intermediate swatch that matches what you need.

Color Mixer Online: Blend Two Colors Into Exact Hex

Color mixing online is a per-channel weighted average of two 8-bit sRGB values, computed as result = round(A × (1 − ratio) + B × ratio) for each of the red, green, and blue channels. That formula is the same one browsers, CSS gradients, and most design tools use when they "blend" two colors, which is why an online color mixer that follows the same math produces values that match the rest of your design workflow exactly. The Lizely Color Mixer applies this math to any two hex or rgb() inputs you choose, at any ratio between 0% and 100%, and shows both the exact blended hex and rgb() output plus a visual gradient of every intermediate step in between. Type a hex like #3b82f6 or an rgb() string like rgb(59, 130, 246), drag the ratio slider, and the result updates instantly. Because the entire calculation runs in your browser, nothing is uploaded, there is no sign-up, and there are no usage limits.

How to Blend Two Colors Online

When you need a fast, browser-based way to combine two colors and read the exact output, the steps below walk through the full workflow on the Color Mixer page.

Enter your first color in the Color A field as a hex value (#f00 or #3b82f6) or an rgb() string, or click the swatch to pick it 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 A, 100% is pure B, 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.

The Math Behind the Mix

Every modern screen-based color blend uses the same underlying idea: take the red channel of Color A and the red channel of Color B, average them with a weight, and do the same for the green and blue channels. The Lizely Color Mixer is explicit about this in its implementation: per-channel sRGB linear interpolation where result = round(A × (1 − ratio) + B × ratio), with the ratio clamped to [0, 1] and every channel clamped to 0–255 and rounded.

Plugging in a concrete case makes this tangible. Mix #ff0000 (pure red) with #0000ff (pure blue) at a 50% ratio:

R: round(255 × 0.5 + 0 × 0.5) = round(127.5) = 128 G: round(0 × 0.5 + 0 × 0.5) = 0 B: round(0 × 0.5 + 255 × 0.5) = round(127.5) = 128

The blended output is rgb(128, 0, 128), which is the hex code #800080. The tool returns exactly that value, and the gradient bar shows eleven evenly spaced blend steps between the two endpoints so you can see the entire transition at a glance instead of guessing at the middle.

Why Screen Mixing Differs From Paint Mixing

The reason an online color mixer produces #800080 from red and blue — and not the muddy purple or brown most people expect from a paint palette — is that the tool is blending screen light, not physical pigment. sRGB interpolation is additive-style screen-light mixing: each channel is a linear combination of two source values, which is why the average of fully saturated red and fully saturated blue lands exactly at the center of the eight-bit color space.

Real acrylics, watercolors, and printer inks combine subtractively. Each pigment absorbs wavelengths, and the resulting swatch is dominated by what each color removes from white light, not by an average of two channel values. No screen-based calculator can faithfully model that physics from a hex input alone, and no honest tool will pretend to.

This is not a flaw in the tool; it is the right behavior for its purpose. When you are designing for screens — websites, mobile apps, icons, dashboards, charts, slide decks, email templates, or social graphics — sRGB interpolation is exactly what your medium will reproduce. If you need to predict how a print run on coated paper will look, you need a separate CMYK workflow, and the RGB to CMYK converter is a more appropriate starting point than any blend formula. For paper-based color checks, the HTML color names chart is also a useful reference for matching a brand specification to a standardized swatch before sending anything to a printer.

Practical Uses for Screen-Space Color Blending

Screen-space blending has well-defined jobs that come up constantly in interface and brand work:

Building a color scale. Pick your lightest and darkest anchor, then sample the intermediate steps from the gradient bar to assemble a five-, seven-, or eleven-step scale for buttons, charts, or backgrounds.
Finding a tint or shade halfway between two brand colors. When two palettes need to meet, a 50% blend gives a defensible midpoint that coordinates with both sides.
Generating gradient stops. Drop the hex you want at each end into your CSS, then drag the result panel's hex into the middle stop of a linear-gradient definition for a smooth three-stop transition.
Sampling a chart palette. Line, bar, and area charts often need a series of related but distinguishable colors; the Color Mixer's 11-step gradient is a ready-made swatch row to copy from.
Nudging one color slightly toward another. Setting the slider to 20% or 30% produces a subtle shift that reads as a related accent without breaking the source identity.

For any of these tasks, the result panel's ratio label — for example "70% A / 30% B" — keeps the blend reproducible, so you can return to the exact same value later instead of guessing. Pair this with a quick color contrast check before locking in interactive states, especially for call-to-action buttons and form fields.

Accepted Input Formats and Output Values

The Color Mixer is permissive about how you express a color, but precise about what it returns. The table below summarizes the input formats the parser tolerates and the format of the output values you can copy.

Direction	Format	Example	Notes
Input	Short hex	#f00	Three-digit shorthand expands to six digits.
Input	Full hex	#3b82f6	Six-digit lowercase or uppercase.
Input	rgb() string	rgb(59, 130, 246)	Standard CSS syntax with integers 0–255.
Input	Native swatch	Click picker	Visually pick from the OS color dialog.
Output	Hex (lowercase)	#800080	Ready to paste into CSS or a design tool.
Output	rgb() string	rgb(128, 0, 128)	Same color expressed in functional notation.

Extra spaces, a missing leading hash mark, and upper- or lower-case letters are all tolerated on the input side, so you can paste whatever is already in your clipboard without reformatting it first. The output is always presented in both forms so you can grab whichever your downstream code expects. If you need to convert the result back into a different notation, the HEX to RGB converter and the RGB to HEX converter handle round-tripping in a single click.