Color Mixer - Blend & Mix Colors Online
Mix two or more colors together at adjustable ratios in RGB or HSL color space. Preview gradient steps and copy results — 100% client-side, no data sent to server.
Frequently Asked Questions
What is a Color Mixer?
A Color Mixer is an online tool that blends two or more colors together at configurable ratios to produce a new intermediate color. It calculates the mathematical interpolation between input colors in a chosen color space (such as RGB or HSL) and outputs the result in multiple formats (HEX, RGB, HSL). This is useful for deriving hover states, transition midpoints, or harmonious intermediates from existing design colors.
How do I use this tool?
1. Enter two colors using the HEX input fields or visual color pickers. 2. Adjust the mixing ratio slider to control how much each color contributes (0% = pure Color 1, 100% = pure Color 2). 3. Optionally switch the mixing mode between RGB and HSL for different blending behavior. 4. View the result color with its HEX, RGB, and HSL values. 5. Click any output value to copy it to your clipboard. 6. Optionally add more colors for multi-color mixing, or use the gradient step preview to see intermediate colors.
Is my color data safe? Does it get sent to a server?
Your color data is 100% safe and never leaves your browser. All color mixing calculations — interpolation, format conversion, gradient generation — are performed entirely client-side using JavaScript math operations. No data is transmitted to any server. This makes the tool safe for working with proprietary brand colors and confidential design assets.
What is the difference between RGB and HSL mixing?
RGB mixing interpolates each red, green, and blue channel independently. It is simple and predictable, but can produce muddy or grayish intermediates when mixing colors that are far apart on the color wheel (e.g., red and cyan). HSL mixing interpolates hue, saturation, and lightness separately. Hue interpolation follows the shortest path around the 360-degree color wheel, which often produces more vibrant and perceptually intuitive results.
Can I mix more than two colors?
Yes. Click the 'Add Color' button to add additional color inputs (up to 8 total). Each color gets a weight control, and the result is a weighted average of all input colors in RGB space. This is useful for creating a single representative color from an entire palette or blending multiple brand colors together.
How are the mixing ratios calculated?
For two colors, the ratio slider controls a linear interpolation factor from 0% to 100%. At 0%, the result is pure Color 1. At 50%, it is an equal blend. At 100%, the result is pure Color 2. The formula is: result = color1 × (1 - ratio/100) + color2 × (ratio/100), applied per channel. For multi-color mixing, each color's weight is divided by the total weight sum to determine its fractional contribution.
What are gradient steps?
The gradient steps preview shows a strip of intermediate colors between your two input colors. You can choose between 3 and 10 steps. Each step represents a different mixing ratio along the transition from Color 1 to Color 2. You can click any step to copy its color value, making it easy to extract specific intermediate colors for use in gradients, transitions, or color systems.
Code Examples
// Color Mixer
function hexToRgb(hex) {
const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
if (!result) return null;
return {
r: parseInt(result[1], 16),
g: parseInt(result[2], 16),
b: parseInt(result[3], 16),
};
}
function rgbToHex(r, g, b) {
return '#' + [r, g, b]
.map(v => Math.round(Math.max(0, Math.min(255, v))).toString(16).padStart(2, '0'))
.join('');
}
function mixColorsRgb(hex1, hex2, ratio = 0.5) {
const c1 = hexToRgb(hex1);
const c2 = hexToRgb(hex2);
if (!c1 || !c2) return null;
const t = Math.max(0, Math.min(1, ratio));
return rgbToHex(
c1.r * (1 - t) + c2.r * t,
c1.g * (1 - t) + c2.g * t,
c1.b * (1 - t) + c2.b * t,
);
}
function generateGradientSteps(hex1, hex2, steps = 5) {
const result = [];
for (let i = 0; i < steps; i++) {
const ratio = steps === 1 ? 0.5 : i / (steps - 1);
result.push(mixColorsRgb(hex1, hex2, ratio));
}
return result;
}
// Usage
const blue = '#3b82f6';
const red = '#ef4444';
console.log('50/50 mix:', mixColorsRgb(blue, red, 0.5));
console.log('Gradient:', generateGradientSteps(blue, red, 5));