Color Mixer

Blend two colors together at any ratio. See the mixed result instantly with HEX, RGB, and HSL values.

Color A
RESULT
Color B
100% A 50% A / 50% B 100% B
HEX #412380
RGB rgb(65, 35, 128)
HSL hsl(262, 57%, 32%)
Mix Steps
Who this tool is for:

Best for: Blending two brand colours to find a midpoint for a hover state, and mixing at a set ratio to build a transitional shade

Limitations: Mixes two colours at a time in RGB space, so it will not produce a full palette or blend more than a pair at once

Best suited for: Front-end developers building hover and active states from an existing brand pair

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.

Advertisement

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.
Related Tools
🎨 Palette Generator 🎨 Color Picker 🌈 Gradient Generator

What Mixing Is Useful For

Mixing two colours is how you build the intermediate steps a palette needs: the midpoint between a brand colour and white for a hover state, or a blend of two accents for a gradient stop. CSS can now perform this directly in the browser, and the relevant functions are specified in CSS Color Module Level 4.

Get fresh reads straight to your inbox

Get notified when we publish new articles. Unsubscribe anytime.