Color Mixer

Color Mixer

Mix two colors together by adjusting the blend ratio. At 0% you get the first color, at 100% you get the second, and anything in between is a blend of both.

CSS Usage

Use the blended color in your CSS, or create a gradient between the two source colors:

/* Blended color */
.element {
  background-color: #8E728C;
}

/* Gradient between both colors */
.gradient {
  background: linear-gradient(
    135deg,
    #3498DB 0%,
    #8E728C 50%,
    #E74C3C 100%
  );
}

/* Smooth two-color gradient */
.simple-gradient {
  background: linear-gradient(
    to right,
    #3498DB,
    #E74C3C
  );
}

How Color Mixing Works

Digital color mixing interpolates each RGB channel independently:

// Color mixing formula
function blendColors(color1, color2, ratio) {
  // ratio: 0 = 100% color1, 1 = 100% color2
  return {
    r: color1.r + (color2.r - color1.r) * ratio,
    g: color1.g + (color2.g - color1.g) * ratio,
    b: color1.b + (color2.b - color1.b) * ratio,
  };
}

// Example: Mix #3498DB and #E74C3C at 50%
// Result: #8E728C