Advanced Color Mixer Generator

Generate the perfect color for your design. Mix two colors, adjust combinations, and preview in real-world scenarios.

Color 1

Color 2

Mix Amount: 44%

#2f2c31

Color Preview

This is how your color looks as text on a white background.

Text on Color Background

This box has a border with the mixed color.

This box has a gradient using both colors.

Enter Color 1: Input the first color’s HEX code in the Color 1 field. For example, #23203d.
Enter Color 2: Input the second color’s HEX code in the Color 2 field. For example, #3a3d20.
Adjust Mix Amount: Use the Mix Amount slider or input box to set the percentage mix between the two colors. For example, a mix of 44% gives the output color #2d2d30.

Preview the Color:

Sample Text: View how the mixed color appears as text on a white background.
Text on Color Background: See the mixed color as a border or background to visualize its usage in design elements.
Gradient Preview: Check how a gradient looks when transitioning between Color 1 and Color 2.

Copy HEX: Click the Copy HEX button to copy the HEX code of the mixed color to your clipboard.
Random Colors: Generate random colors for both Color 1 and Color 2 if you need inspiration.
Swap Colors: Use the “Swap Colors” button to exchange the positions of Color 1 and Color 2 for a different mix.
Refine as Needed: Adjust the mix or change colors until you achieve the desired result.