Color Mixer
An even RGB blend of #FF0000 and #0000FF is #800080, or rgb(128, 0, 128). This color mixer combines two valid 3-digit or 6-digit hex colors by weighting their red, green, and blue channels. Set the ratio from 0% through 100% to control the share of the second color, then read the result as uppercase hex and decimal RGB. The calculation models a direct numeric blend in encoded RGB channel space. At 0%, the first color remains unchanged. At 100%, the second color replaces it. At 50%, each channel receives equal weight. Intermediate ratios create a straight channel-by-channel transition between those endpoints. This result is useful for interface mockups, quick palette experiments, data-visualization stops, and checking the arithmetic of a simple RGB blend. It is not a physical paint recipe. Pigments absorb light according to their chemistry, and color-managed design tools may use gamma-corrected or perceptual interpolation that differs from this calculator's encoded-channel average.
Quick answer
The mixer averages the red, green, and blue channels of both colors.
What this tells you
- •The mixer averages the red, green, and blue channels of both colors.
- •The ratio is the share of the second color, so 50 is an even mix and 0 keeps the first color.
- •Results are shown as a hex code like #800080 and an RGB value like rgb(128, 0, 128).
- •This models how colored light blends, which is the RGB system used by screens.
- •Each calculated channel is rounded to the nearest whole integer before the RGB and hex results are built.
- •Three-digit hex inputs are expanded by repeating each digit, so #F00 becomes #FF0000.
- •The leading # is optional, and letter digits may be uppercase or lowercase.
How to Use
- 1Enter the first color as a hex code, such as #ff0000 for red.
- 2Enter the second color, such as #0000ff for blue.
- 3Set the ratio to choose how much of the second color to add. 50 is an even mix.
- 4Read the mixed color as a hex code and an RGB value.
- 5Use 0% to confirm the first endpoint and 100% to confirm the second endpoint before testing intermediate blends.
- 6Enter only 3 or 6 hexadecimal digits. Characters outside 0 through 9 and A through F are rejected.
- 7Remember that the percentage belongs to the second color. At 25%, the first color still supplies 75% of every channel.
- 8Compare the numeric result in the same color space and interpolation method if another design tool produces a different midpoint.
How It Works
Formula
mixed channel = color1 x (1 - ratio) + color2 x ratioEach color has red, green, and blue channel values from 0 through 255. Divide the entered percentage by 100 to get t, the share of color 2. For every channel, calculate color1 x (1 - t) + color2 x t, then round to the nearest whole integer with ordinary JavaScript Math.round behavior. At 50%, red (255, 0, 0) and blue (0, 0, 255) produce red = round(255 x 0.5 + 0 x 0.5) = 128, green = 0, and blue = round(0 x 0.5 + 255 x 0.5) = 128. Decimal 128 is hexadecimal 80, so the final code is #800080. At 25%, the same endpoints produce red = round(191.25) = 191 and blue = round(63.75) = 64, giving #BF0040.
Calculation note: values are processed in the order shown above, using the current input units.
Worked Examples
What two colors make purple?
Red and blue at an even 50 percent mix average to rgb(128, 0, 128), the hex value #800080.
Mixing white and black
White (255, 255, 255) and black (0, 0, 0) average to rgb(128, 128, 128), a medium gray.
Add 25% blue to red
The first color contributes 75% and the second contributes 25%. The rounded channels are rgb(191, 0, 64), which convert to BF, 00, and 40 in hexadecimal.
Expand shorthand hex before mixing
#0F0 expands to #00FF00. Averaging its green channel of 255 with black's green channel of 0 gives 127.5, which Math.round converts to 128, or hex 80.
Keep the first endpoint
A 0% ratio gives the second color no weight. Every output channel therefore matches the first color exactly.
Primary and Secondary Colors (Paint Model)
The traditional red, yellow, and blue color wheel used for paint and pigment.
| Color | Type | How to Make It |
|---|---|---|
| Red | Primary | A base color you start with |
| Yellow | Primary | A base color you start with |
| Blue | Primary | A base color you start with |
| Orange | Secondary | Red plus yellow |
| Green | Secondary | Blue plus yellow |
| Purple | Secondary | Red plus blue |
In the light, or RGB, model used by screens, the primary colors are red, green, and blue instead.
Why RGB blends can differ between tools
A hex code normally stores encoded sRGB channel values. This calculator interpolates those stored numbers directly. That method is simple and predictable, but encoded sRGB is not linear with physical light intensity. A program that first converts channels to linear light can produce a lighter-looking midpoint.
Perceptual color spaces use another approach. They try to make equal numeric steps look more even to human vision, which can change hue and lightness along the path. Neither result means the channel arithmetic here is broken. The tools are answering different definitions of a blend.
Rounding also matters. RGB output channels must be whole integers from 0 through 255. A midpoint of 127.5 rounds up to 128 in this implementation. Once all three channels are rounded, each becomes a two-digit hexadecimal pair and the pairs are joined in red, green, blue order.
Common mistakes
- Mixing up the two color systems. Paint uses red, yellow, and blue as primaries, while screens and light use red, green, and blue.
- Expecting this RGB average to match real paint. Paint mixing is subtractive, so wet pigments can give a different result than blended light.
- Forgetting the ratio is the share of the second color. A ratio of 0 returns the first color and a ratio of 100 returns the second.
- Entering a named color such as red instead of a hex code. The parser accepts only 3-digit or 6-digit hexadecimal input.
- Expecting every design program to show the same midpoint. Linear-light and perceptual interpolation use different math from direct encoded RGB averaging.
- Reversing hexadecimal channel order. Six-digit color codes place red first, green second, and blue third.
- Ignoring whole-channel rounding. A calculated value of 127.5 becomes 128, so the hexadecimal pair is 80 rather than 7F.
Embed this calculator on your site
Drop this single line where you want the calculator to appear. It is responsive, mobile-friendly, resizes automatically, and is free to use with attribution.
<script src="https://calctide.com/embed.js" data-tool="color-mixer" async></script>Preview the embed at /embed/color-mixer/.