To mix two HEX colors, enter each color as a HEX or rgb() string into the Color Mixer, drag the ratio slider to choose how much of each color goes into the blend, and read the exact hex and RGB values from the result panel. The whole workflow runs locally in your browser, takes less than a minute the first time, and produces a reproducible result you can copy straight into CSS, a design file, or a color token. You start by deciding which two colors you want to combine — say, a brand blue and a brand orange — and which side of the blend matters more. The Color Mixer then does a per-channel weighted average in sRGB, computing each red, green, and blue value as round(A * (1 - ratio) + B * ratio), and shows you the resulting six-digit lowercase hex plus a parallel rgb() string. Below the result, a gradient bar displays eleven evenly spaced blend steps so you can see every transition at a glance and pick the step that looks right. When you find the color you want, a one-click copy button puts the hex onto your clipboard. Nothing is uploaded, nothing requires a sign-up, and there are no usage limits.
Open the Color Mixer in Your Browser
The Color Mixer is a browser-based tool, so getting started only takes a moment. Open the Color Mixer in any modern desktop or mobile browser and the page loads immediately with two color fields ready for use. There is no software to install, no account to create, and no extension to add — the page is the tool. You can bookmark it for quick access later, or pin the tab if you intend to use it repeatedly during a design session. Because everything runs locally using plain color arithmetic, the tool works equally well on a slow connection or offline once the page is loaded, and your inputs never leave the device.
Your First HEX Color Blend
If you have never used a HEX color mixer before, the workflow below is everything you need to produce a usable result on your first try. Each step is short and reversible, so you can scrub the slider back and forth until the result looks right.
- Open the Color Mixer in your browser and locate the Color A and Color B fields at the top of the tool.
- Enter your first color into the Color A field as a short hex (#f00), a full hex (#3b82f6), an rgb() string (rgb(59, 130, 246)), or by clicking the swatch to pick visually.
- Enter your second color into the Color B field the same way — any combination of accepted formats works on either side.
- Drag the ratio slider from 0% to 100% to choose how much of each color goes into the blend; the result panel updates as you drag.
- Read the resulting hex and rgb() values from the result panel, use the gradient bar to confirm the transition looks right, then click Copy to put the hex on your clipboard.
Enter Your Two Source Colors
The Color Mixer gives you two fields, Color A and Color B, that represent the two sides of your blend. You can fill either field using one of three accepted formats:
| Format | Example | Notes |
|---|---|---|
| Short HEX | #f00 | Three-digit shorthand expanded internally to six digits |
| Full HEX | #3b82f6 | Standard six-digit hexadecimal color |
| rgb() string | rgb(59, 130, 246) | Comma-separated integer channels from 0 to 255 |
You can also click the native color swatch beside each field and pick a color visually with the operating-system color picker if you do not have a specific code in mind. Input is case-insensitive, extra whitespace is ignored, and the leading hash mark is optional, so 3b82f6 and #3B82F6 both parse to the same value. This forgiving parsing means you can paste a value from a CSS file, a design token, a Slack message, or a screen-reader-friendly rgb() notation without reformatting it first.
Set the Blend Ratio With the Slider
Once both colors are loaded, drag the ratio slider to decide how much of each color appears in the result. The slider runs from 0% to 100% with the following behavior:
- 0% produces pure Color A — no Color B at all.
- 100% produces pure Color B — no Color A at all.
- 50% produces the exact midpoint of the two colors' channel values.
- Anything in between is a weighted blend, with the percentage reflecting how much Color B is mixed in.
The ratio label always shows the current split (for example, "70% A / 30% B"), so results are reproducible. Under the hood, the Color Mixer uses simple sRGB linear interpolation: for each red, green, and blue channel, it computes a weighted average — result = round(A × (1 − ratio) + B × ratio). Channels are rounded to the nearest integer and clamped to the 0–255 range. For projects where the slider position matters more than the eyeballed result, the guide on using the ratio slider for precise blends walks through recording exact percentages.
Worked example. Blending pure red (#ff0000) with pure blue (#0000ff) at a ratio of 0.5:
- 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) = 128
Result: rgb(128, 0, 128), or #800080 — a clean magenta. This matches the value you would get from CSS or any standard sRGB-aware blending tool, which is exactly why this approach works so well for screen design.
Read the Result and the Gradient Preview
The result panel shows your current blend in three forms at once: a swatch you can see, the six-digit lowercase hex value, and the equivalent rgb() string. As you drag the slider, every part of the panel updates instantly, so you can scrub through the blend in real time.
Below the panel, a gradient bar displays eleven evenly spaced blend steps between your two source colors, including both endpoints. This bar is essentially a visual table of contents for the entire transition: if the midpoint does not look right, you can eyeball which step does, then drag the slider back to that ratio. The gradient preview is also useful when you are building a multi-stop color scale for a chart, a UI gradient, or a brand palette and need to pick three or five pleasing steps rather than a single midpoint. For a deeper walk-through on validating what the result looks like in context, the guide on checking mix results walks through sanity checks against design tokens and reference images.
Copy and Apply the Mixed HEX
When you find the color you want, click Copy to put the result hex on your clipboard. The hex is provided in lowercase six-digit form, which is the format most CSS pipelines, design tokens, and style guides expect. You can paste it straight into a stylesheet, a Tailwind config, a Figma color style, or a JSON design-token file without further editing.
If you need the rgb() string instead, the result panel shows it alongside the hex, so you can copy that by selecting it manually. The slider position, ratio label, and result values all stay synchronized, so re-running the same blend later — even days after closing the tab — produces the same hex, provided you re-enter the same two source colors and the same ratio. This makes the Color Mixer a reliable source of truth for any palette you need to reproduce consistently.
When sRGB Mixing Matches What You Need (and When It Doesn't)
sRGB linear interpolation is the right model for any work that ends up on a screen: websites, mobile apps, dashboards, charts, icons, illustrations, and UI mockups. It is the same math CSS gradients, design tools, and most operating-system color pickers use, so a blend you produce here will match what your tools and teammates compute. If you are trying to find a tint halfway between two brand colors, sample steps for a chart palette, or nudge one accent color slightly toward another, sRGB interpolation is precisely what you want.
It is worth being clear about what sRGB interpolation is not. It mixes screen light values additively, not physical pigments subtractively. Blending red (#ff0000) and blue (#0000ff) here gives clean magenta (#800080), whereas physically mixing red and blue paint on a real palette would produce a muddy dark purple or brown. If your goal is to predict how acrylics, watercolors, or printer inks will combine on paper, this tool will not model that, and no screen-based blend honestly can.
| Mixing Model | What It Mimics | Good Fit For | Use Color Mixer? |
|---|---|---|---|
| sRGB linear interpolation | Additive screen light | Web, app, UI, charts, icon design | Yes — this is the model's strength |
| Gamma-corrected optical | Physical light intensity | HDR, scientific imaging, color science | No — not modeled here |
| Subtractive pigment | Paint, ink, dye on paper | Print preview, traditional art mixing | No — not modeled here |
For most digital work, the Color Mixer's sRGB blend is exactly right. For physical media, treat the result as a screen approximation, not a physical prediction, and reach for a print-specific workflow instead.