#805ECD50% A · 50% B
Fuchsia Blue
Mix two colors together and explore the full gradient of steps between them.
Color AAzure
Color BKnockout Pink
Ratio
A 50%B 50%
Click any step to copy HEX9 steps
Export mix chart
9 steps from #007FFF to #FF3D9A.
Format
Color values
variables.css
:root {
--mix-0: #007FFF;
--mix-10: #2077F2;
--mix-20: #406FE6;
--mix-30: #6066D9;
--mix-40: #805ECD;
--mix-50: #9F56C0;
--mix-60: #BF4EB3;
--mix-70: #DF45A7;
--mix-80: #FF3D9A;
}
All mix values
Every step of the chart, and your mix. Click to copy.
How it works
Blend two colors at any ratio and get the resulting hex code.
Screen mixing is not paint mixing
Mixing blue and yellow on screen gives grey, not green. Screens mix additively in RGB, where averaging opposing hues lands near the desaturated midpoint, while paint mixes subtractively. If you expected green, you were expecting pigment behaviour.
Mixing is the operation behind tints, shades, and tones: blend with white for a tint, with black for a shade, with grey for a tone.
Frequently asked
3 questions people ask about the color mixer.
1Why does mixing blue and yellow give grey instead of green?
Screens mix light additively. Blue and yellow sit opposite each other in RGB, so their average is a desaturated midtone. Green from blue and yellow is subtractive pigment mixing, which behaves differently.
2What ratio should I mix two colors at?
50/50 gives the true midpoint. Shifting to 70/30 keeps one color clearly dominant while picking up a tint of the other, which is usually what you want for a hover or accent state.
3How do I make a color lighter without washing it out?
Mixing with white reduces saturation as it lightens. To keep the color vivid, use the tints and shades tool or a lightness based palette scale, which hold saturation steady.