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