Color mixer generator

Generate the perfect color for your design with our Color Mixer tool. Mix two colors, adjust and preview any combination of colors with ease.

Color 1

Color 2

Amount (50%)

#e91e63

#ffc107

#f77f4b

Code

 
css
      
        --color-1:  #e91e63;
--color-2:  #ffc107;
/** USING CSS color-mix() */
color:  color-mix(in srgb, var(--color-1), var(--color-2) 50%);
background-color:  color-mix(in oklab, var(--color-1), var(--color-2) 50%);
background:  color-mix(in hwb, var(--color-1), var(--color-2) 50%);

      

Click a code line to select it and press CTRL + C to copy it

Keep in mind that some browsers do not support CSS color-mix() yet. Learn more about browser compatibility