Blend two colors together at any ratio. See the mixed result instantly with HEX, RGB, and HSL values.
Color A
RESULT
Color B
100% A50% A / 50% B100% B
HEX#412380
RGBrgb(65, 35, 128)
HSLhsl(262, 57%, 32%)
Mix Steps
How to Use the Color Mixer
Choose Color A and Color B using the color pickers or by typing HEX codes directly. The result swatch in the center updates instantly as you change either color or move the ratio slider.
The ratio slider controls the blend: at 0% you get pure Color A, at 100% you get pure Color B, and at 50% you get an equal mix. Drag the slider to explore every blend point between the two colors.
Digital color mixing blends the red, green, and blue channel values numerically. This is additive mixing -- different from mixing physical paint pigments, which is subtractive. For example, mixing red and green in RGB gives yellow, whereas mixing red and green paint gives brown. This tool shows digital RGB mixing as used in screen design and CSS.
Common uses: finding a midtone between two brand colors, generating hover state colors, creating smooth transitions, and blending palette colors to extend a design system. The Mix Steps row shows five preview points at 10%, 25%, 50%, 75%, and 90%, giving you a quick visual of the full blend range.
Frequently Asked Questions
Digital color mixing works by blending the RGB channel values of two colors at a specified ratio. A 50/50 mix averages the R, G, and B values of both colors. This is different from physical paint mixing because RGB is additive rather than subtractive.
Mixing red (#FF0000) and blue (#0000FF) at 50/50 in RGB gives #800080, which is purple. The exact shade depends on the ratio -- more red gives a red-purple, more blue gives a blue-purple.
Digital mixing (RGB) is additive: you are averaging light values. Physical paint mixing is subtractive: pigments absorb certain wavelengths. Mixing red and green light gives yellow in RGB, but red and green paint gives brown.
A 50/50 mix averages the RGB values of both colors equally. It produces the midpoint color exactly between the two inputs. Use the slider at the center position to get this result.
Use this color mixer and set the ratio to 50%. The result swatch shows the exact midpoint between your two chosen colors. Adjust the ratio slider to lean toward either color and explore the full blend range.