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.

#e91e63

#ffc107

#f77f4b

Tip: Press SPACE to generate and mix random colors

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