🎨 Color Mixer
By ToolNimba Design Team · Updated 2026-06-19
Color A
#FF0000
Result
#800080
Color B
#0000FF
Pick two colors, drag the slider, and the blended hex updates instantly.
This color mixer blends two colors and shows you the result. Pick a first color and a second color, then drag the ratio slider to control how much of each goes into the blend. You get the mixed color as a hex code and an RGB value, with a live swatch so you can see the outcome before you copy it into your design.
What is the Color Mixer?
Mixing colors on a screen is not the same as mixing paint. Paint is subtractive: pigments absorb light, so combining many of them drives the result toward muddy brown or black. Screens are additive, working in the RGB model where each pixel emits red, green, and blue light. This tool blends in that RGB space, which is the natural model for anything you will display digitally.
The blend itself is a straight linear interpolation, done one channel at a time. For each of the red, green, and blue channels, the result is the first color value scaled by one minus the mix amount, plus the second color value scaled by the mix amount. With the slider in the middle, you get the exact halfway point between the two colors. Slide it toward one end and the result leans toward that color. At the extremes you get one of the original colors back unchanged.
One thing worth knowing: plain RGB averaging is fast and predictable, but it is not perceptually perfect. The midpoint of two vivid colors can look slightly darker or duller than you might expect, because the RGB numbers are gamma-encoded rather than linear light. For quick design work, picking palette steps, or estimating a tint, RGB mixing is more than good enough and matches how most CSS and design tools behave by default.
When to use it
- Finding a color halfway between two brand shades to use as an accent or hover state.
- Creating tints and shades by mixing a base color with white or black at different ratios.
- Generating intermediate steps for a gradient or a color palette by hand.
- Toning down a loud color by blending a small amount of a neutral grey into it.
How to use the Color Mixer
- Set Color A using the swatch picker or by typing a hex code.
- Set Color B the same way.
- Drag the mix ratio slider toward Color B to control the balance of the blend.
- Read off the resulting hex and RGB value, check the swatch, and press Copy hex to use it.
Formula & method
Worked examples
Mix red (#FF0000) and blue (#0000FF) at a 50% ratio to find the midpoint.
- t = 50 ÷ 100 = 0.5
- Red channel: 255 × 0.5 + 0 × 0.5 = 128
- Green channel: 0 × 0.5 + 0 × 0.5 = 0
- Blue channel: 0 × 0.5 + 255 × 0.5 = 128
- Combine (128, 0, 128) into hex
Result: Result is #800080, a purple, rgb(128, 0, 128)
Lighten red (#FF0000) by mixing in white (#FFFFFF) at a 25% ratio.
- t = 25 ÷ 100 = 0.25
- Red channel: 255 × 0.75 + 255 × 0.25 = 255
- Green channel: 0 × 0.75 + 255 × 0.25 = 64
- Blue channel: 0 × 0.75 + 255 × 0.25 = 64
- Combine (255, 64, 64) into hex
Result: Result is #FF4040, a soft red tint, rgb(255, 64, 64)
Mixing red (#FF0000) toward blue (#0000FF) at different ratios
| Ratio toward B | RGB result | Hex result |
|---|---|---|
| 0% (all A) | rgb(255, 0, 0) | #FF0000 |
| 25% | rgb(191, 0, 64) | #BF0040 |
| 50% | rgb(128, 0, 128) | #800080 |
| 75% | rgb(64, 0, 191) | #4000BF |
| 100% (all B) | rgb(0, 0, 255) | #0000FF |
Common blends at a 50% ratio
| Color A | Color B | 50% result |
|---|---|---|
| #FF0000 red | #FFFF00 yellow | #FF8000 orange |
| #FFFFFF white | #000000 black | #808080 grey |
| #0000FF blue | #FFFF00 yellow | #808080 grey |
| #00FF00 green | #0000FF blue | #008080 teal |
Common mistakes to avoid
- Expecting screen mixing to match paint. Mixing blue and yellow light on a screen gives a grey, not green, because screens add light rather than subtract pigment. If you are matching a physical paint result, RGB mixing will not reproduce it.
- Assuming the midpoint looks like the visual average. A plain RGB midpoint can appear slightly darker or duller than expected because the values are gamma-encoded. The number is correct, but trust your eye for fine palette work and nudge the ratio if needed.
- Typing an invalid hex code. A hex color needs exactly three or six hex digits (0 to 9 and A to F), optionally with a leading hash. Something like #12 or #GGGGGG will not parse, so the result will not update.
- Forgetting the ratio direction. The slider measures how much of Color B is in the mix. At 0% you get Color A, at 100% you get Color B. Sliding the wrong way gives you the opposite balance of what you intended.
Glossary
- Hex code
- A six-digit color value written as a hash followed by red, green, and blue pairs in base 16, such as #FF8000.
- RGB
- The additive color model used by screens, describing a color by its red, green, and blue components, each from 0 to 255.
- Linear interpolation
- Blending two values in a straight proportion, here mixing each color channel by the chosen ratio.
- Tint
- A lighter version of a color, made by mixing it with white.
- Shade
- A darker version of a color, made by mixing it with black.
Frequently asked questions
How does this color mixer blend two colors?
It works in RGB space, blending the red, green, and blue channels separately. For each channel the result is the first color value times one minus the ratio, plus the second color value times the ratio. The three results combine into the final hex and RGB color.
What does the mix ratio slider do?
The slider sets how much of Color B is in the blend, from 0 to 100 percent. At 0 percent you get Color A unchanged, at 100 percent you get Color B, and at 50 percent you get the exact midpoint of the two colors.
Why does mixing blue and yellow give grey instead of green?
Screens use additive color, where light is combined rather than pigment. Blue and yellow light add up to a neutral grey. The green you get from mixing blue and yellow paint comes from subtractive pigment mixing, which is a different model.
How do I make a lighter or darker version of a color?
Set your base color as Color A. To lighten it, set Color B to white (#FFFFFF) and slide the ratio up for a stronger tint. To darken it, set Color B to black (#000000) and slide toward it for a deeper shade.
Can I mix more than two colors?
This tool blends two colors at a time. To combine three, mix the first two, copy the result into one of the inputs, and then mix that against your third color. Repeat to fold in as many as you need.
Is the mixed color exactly the visual average?
It is the exact numeric average of the channel values at the chosen ratio, which is how most CSS and design tools mix by default. Because the values are gamma-encoded, the midpoint can look a touch darker than a perfectly perceptual blend, so adjust by eye for fine work.