To mix two HEX colors, enter each value into the Color A and Color B fields, drag the ratio slider to choose how much of each color goes into the blend, and read the resulting hex and RGB in the result panel. The exact formula the Color Mixer uses is per-channel sRGB linear interpolation: for each of the red, green, and blue channels, the result equals the rounded weighted average, result = round(A × (1 − ratio) + B × ratio), where the ratio comes from the slider and is clamped to the range [0, 1]. At a ratio of 0.5 you get the exact midpoint of the two colors' channel values; at 0 the result is pure Color A, and at 1 it is pure Color B. The result updates instantly whenever you change an input or move the slider, and the gradient bar below shows eleven evenly spaced blend steps between the two endpoints. Once you find a blend you like, the result panel gives you a lowercase six-digit hex plus an rgb() string, and a one-click Copy button puts the hex on your clipboard. The whole workflow takes a few seconds and runs entirely in your browser, so nothing about your colors leaves your machine.
What the Color Mixer Does
The Color Mixer is a free browser tool that takes any two colors and produces a single blended result at whatever ratio you choose, then displays the result as both hex and RGB so you can drop it straight into CSS, design files, or code. It blends using the same math that CSS gradients, image editors, and most UI design systems use: a per-channel weighted average of 8-bit sRGB values. Because the math is plain arithmetic on each color channel, every blend is reproducible, and the ratio label on the slider always tells you the exact split that produced the result you are looking at, for example 70% A / 30% B. The tool is useful for picking intermediate shades between two brand colors, sampling stops for a gradient, building a chart palette, or just exploring what two colors look like when you meet them in the middle.
Input Formats the Tool Recognizes
Both the Color A and Color B fields accept the same three input formats, and you can mix and match freely: type a short hex into one box and an rgb() string into the other without changing how the tool behaves. The parser is forgiving by design — extra spaces are ignored, the leading # is optional, and the letters can be upper- or lower-case without affecting the result. You can also click the native swatch beside either field to open a visual picker if you would rather choose colors by eye than type them in.
| Format | Example | Notes |
|---|---|---|
| Short hex | #f00 | Three-digit shorthand, expanded to six digits internally |
| Full hex | #3b82f6 | Six-digit standard CSS hex |
| rgb() string | rgb(59, 130, 246) | Functional notation with integer 0–255 channels |
| Visual picker | Click the swatch | Opens the browser's native color picker |
If you need to convert between formats before you start, the HEX to RGB Converter and the RGB to HEX tool handle each direction in a single step.
How to Use the Color Mixer to Mix Two HEX Colors
- Open the Color Mixer and type your first color into the Color A field as a hex value (#f00 or #3b82f6) or as an rgb() string, or click the swatch to pick it visually.
- Enter your second color into the Color B field the same way, using any combination of short hex, full hex, or rgb() notation.
- 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 the two colors' channel values.
- 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 endpoints.
- Click Copy to put the resulting hex on your clipboard, then paste it into your stylesheet, design file, or wherever you need it.
The result updates continuously as you move the slider, so you can scrub back and forth to compare intermediate colors in context. The current ratio is always shown next to the slider, which makes it easy to recreate a specific blend later by re-entering the same ratio.
Reading the Gradient Bar and Result Panel
The result panel below the slider gives you the blended color in two formats: a lowercase six-digit hex (for example #ac4668) and an rgb() string (for example rgb(172, 70, 104)). Both describe the same color, so you can paste whichever one your project needs. Above the panel, the gradient bar previews the transition between your two inputs as eleven evenly spaced swatches, including both endpoints, so you can see the full progression of intermediate shades at a glance and eyeball where a pleasing middle ground sits. If you want to verify the blend after the fact, the article on checking the result after mixing two HEX colors walks through how to confirm what the tool produced.
When sRGB Mixing Fits Your Project — and When It Doesn't
sRGB linear interpolation is the right model for almost every on-screen task: websites, mobile apps, icons, charts, presentations, and any digital artwork that will be displayed on a monitor. It matches the math CSS gradients use under the hood, so a 50% blend in the tool will look identical to a 50% gradient stop in your stylesheet. It is also a fast, predictable way to build color scales by sampling the same ratio at different positions, or to nudge one brand color slightly toward another without losing the family resemblance.
What this math is not is a model of physical pigments. sRGB interpolation mixes screen light additively, so blending pure red (#ff0000) with pure blue (#0000ff) gives you clean magenta (#800080) — the exact midpoint of the two channel values. Real red and blue pigment, mixed on a painter's palette, would produce a dark muddy color by subtractive mixing, and no honest screen tool can predict that for you. If you are designing for screen, this tool is exactly what you want. If you are trying to forecast how acrylics, oils, or printer inks will combine on paper, you will need a different, pigment-aware model.
Verify the Math: A Worked Example
If you want to confirm that the Color Mixer's result matches the formula on the page, work through one example by hand. Take Color A as #ff0000 (pure red, channels 255, 0, 0) and Color B as #0000ff (pure blue, channels 0, 0, 255), with the ratio slider set to 0.5. For the red component: round(255 × (1 − 0.5) + 0 × 0.5) = round(127.5) = 128. For green: round(0 × 0.5 + 0 × 0.5) = 0. For blue: round(0 × 0.5 + 255 × 0.5) = round(127.5) = 128. The result is rgb(128, 0, 128), which is hex #800080 — magenta. Type #ff0000 and #0000ff into the Color Mixer, set the ratio to 50%, and you will see exactly that hex in the result panel. The same arithmetic gives you any other blend at any other ratio, which is what makes the tool predictable enough to rely on in production design work.
Related reading: Hex to RGB on Windows: Convert CSS Hex in Your Browser.