Color Mixer
Blend two hex colors together with a configurable weight to get a mixed hex color.
How to use this tool
- Enter two hex colors.
- Set the weight for Color 1 (0% = all Color 2, 100% = all Color 1, 50% = equal mix).
- The output shows the blended hex and RGB values.
Mix two hex colors by linear interpolation in the RGB color space. Adjust the weight to control how much each color contributes.
Formula
Given two colors C1 = (R1, G1, B1) and C2 = (R2, G2, B2) and a weight w (0–100%) for Color 1:
Rmix = R1 × (w/100) + R2 × (1 − w/100)
Gmix = G1 × (w/100) + G2 × (1 − w/100)
Bmix = B1 × (w/100) + B2 × (1 − w/100)
Each channel is rounded to the nearest integer and clamped to 0–255 before being converted to hex.
How it works
Both hex colors are parsed into their R, G, B channels. A linear interpolation is applied per channel: the weight percentage determines how much of Color 1 versus Color 2 contributes to each channel. At weight 50%, both colors contribute equally. The result is returned as both a hex string and an RGB notation string.
Common mistake: performing linear RGB mixing and expecting the perceptual result seen in paint or pigment. RGB blending is additive/linear — mixing red (#ff0000) and blue (#0000ff) at 50% yields purple (#800080), but in physical paint mixing they produce a different shade of violet due to subtractive color physics. For perceptually smoother gradients, mixing in a gamma-corrected or perceptual color space (such as Oklab) gives better results than straight sRGB linear interpolation.
Worked example
Mix red (#ff0000) and blue (#0000ff) at 50% weight
- Parse colors: C1 = (255, 0, 0), C2 = (0, 0, 255). Weight w = 0.50.
- R_mix = 255 × 0.50 + 0 × 0.50 = 127.5 → rounds to 128.
- G_mix = 0 × 0.50 + 0 × 0.50 = 0.
- B_mix = 0 × 0.50 + 255 × 0.50 = 127.5 → rounds to 128. Hex: #800080.
Mixed hex: #800080 | Mixed RGB: rgb(128, 0, 128)
Common mistakes to avoid
- Mixing in gamma-encoded sRGB space instead of converting to linear light first, which makes the midpoint appear darker than the perceptual midpoint.
- Treating weight as the share of Color 2 rather than Color 1, reversing the blend direction.
- Using integer arithmetic without rounding, so the mixed channel can be off by 1 and produce a slightly wrong hex code.
Key terms
- Linear interpolation (lerp)
- A method of blending two values by computing a weighted average. For colors, each channel is independently interpolated: result = a × t + b × (1 − t) where t is the blend factor.
- Color weight
- The proportion (0–100%) that the first color contributes to the blend. At 100% the result is Color 1; at 0% the result is Color 2; at 50% both contribute equally.
- sRGB
- The standard RGB color space used for most web and screen colors. Its values are gamma-encoded (non-linear), so linear arithmetic on sRGB byte values does not always match perceptual expectations.
- Hex color
- A 6-digit hexadecimal representation of an RGB color, formatted as #RRGGBB where each pair of digits is a value from 00 (0) to ff (255).
Frequently asked questions
- How is mixing calculated?
- Each RGB channel is linearly interpolated: result_channel = color1_channel × weight + color2_channel × (1 − weight).
- Why does red + blue not give magenta exactly?
- Pure red is #ff0000 and pure blue is #0000ff. A 50/50 RGB channel average gives #800080 (128,0,128), which is dark purple — not #ff00ff. To get #ff00ff you need full intensity on both channels simultaneously, which requires additive (light) mixing rather than channel averaging.