Color Mixer
Mix two colors together and see the blended result
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.
Color mixing on screens uses additive mixing in RGB space. Each channel (Red, Green, Blue) is interpolated independently based on the ratio.
Color 1
#3498DB
Color 2
#E74C3C
Mix Ratio
Blended Result
#8E728Crgb(142, 114, 140)
HEX#8E728C
RGBrgb(142, 114, 140)
HSLhsl(304, 11%, 50%)
Blend Gradient (All Steps)
0%
#3498DB
5%
#3D94D3
10%
#4690CB
25%
#6185B3
50%
#8E728C
75%
#BA5F64
90%
#D5544C
95%
#DE5044
100%
#E74C3C
CSS Usage
Use the blended color in your CSS, or create a gradient between the two source colors:
CSS Code
/* 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
);
}Blended Color
3-Stop Gradient
Simple Gradient
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: #8E728CDesign Tip: Color mixing is great for creating color palettes. Start with two brand colors and generate intermediate shades for hover states, backgrounds, and accent elements.