Color Mixer
Red and blue mixed evenly make purple, shown as the hex value #800080. This color mixer blends two colors and returns the result as a hex code and an RGB value. Enter two colors, set how much of the second color to add, and see the mix update. The reference below also lists the primary and secondary colors for quick study.
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.
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.
How It Works
Formula
mixed channel = color1 x (1 - ratio) + color2 x ratioEach color has a red, green, and blue channel from 0 to 255. The mixer blends the two colors one channel at a time using the ratio as a weight, where the ratio is the share of the second color. At a 50 percent ratio, red (255, 0, 0) and blue (0, 0, 255) average to (128, 0, 128), which is purple.
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.
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.
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.