Color Mixer Mix two colors together with adjustable ratio and see the full gradient.

🎨

Color Mixer

Mix two colors together with adjustable ratio and see the full gradient.

Pick Two Colors

Select the two colors you want to mix.

Adjust Ratio

Use the slider to control the mix proportion (0-100%).

Copy the Blended HEX Code

Copy the blended HEX color.

Loading tool...

What Is Color Mixer?

A color mixer blends two colors together at any ratio, showing you the exact resulting color along with an 11-step gradient of the full blend range. Linear RGB interpolation produces the mixed color, which mimics the effect of blending paint colors or creating CSS color transitions. The ratio slider lets you smoothly transition from 100% of the first color to 100% of the second. The tool shows both the mixed result in a large preview and the complete gradient strip for context. Color mixing is essential for creating intermediate colors for gradients, finding midpoint colors for design systems, generating transition colors for animations, and understanding how two brand colors interact when overlaid.

Why Use Color Mixer?

Smooth ratio slider from 0% to 100% for precise mixing
Large preview swatch of the blended result
Full 11-step gradient shows the complete blend range
Both HEX and RGB outputs with copy buttons
Instantly see how any two colors combine

Common Use Cases

Finding Midpoints

Find the exact midpoint color between two brand colors for smooth transitions.

Gradient Design

Preview how two colors will blend in a gradient before implementing in CSS.

Color Transitions

Generate intermediate colors for animation steps between two color states.

Palette Expansion

Create new colors by blending existing palette colors at various ratios.

Technical Guide

The mixer performs linear interpolation (lerp) in RGB color space: result = color1 × (1 - t) + color2 × t, where t is the mix ratio from 0 to 1. Each channel (R, G, B) is interpolated independently. This is the simplest blending method and matches how CSS transitions interpolate between colors. More sophisticated blending methods exist (perceptual Lab space, oklab) but linear RGB is the most widely used and consistent with browser rendering. The 11-step gradient visualizes the full interpolation range at 10% intervals. Note that RGB linear interpolation can produce slightly desaturated midpoints — for example, mixing pure red and pure green produces a muddy brownish-yellow at 50%, not bright yellow. This is because RGB interpolation does not follow the color wheel.

Tips & Best Practices

1
A 50% mix gives the exact visual midpoint between two colors
2
Try mixing complementary colors — the midpoint is often an interesting neutral gray
3
Use the gradient strip to find ratio where the blend looks best, not just 50%
4
Mixing with white (tinting) or black (shading) at various ratios creates smooth scales
5
RGB mixing can produce muted midpoints — this is expected behavior for additive mixing

Related Tools

Color Picker

Interactive color picker with HEX, RGB, HSL, and CMYK outputs.

🎨 Color Tools

Monochromatic Palette Generator

Generate a monochromatic color palette from any base color.

🎨 Color Tools

Linear Gradient Generator

Create CSS linear gradients with custom colors, angle, and color stops.

🎨 Color Tools

Color Shade Generator

Generate darker shades of any color with adjustable step count.

🎨 Color Tools

Color Tint Generator

Generate lighter tints of any color with adjustable step count.

🎨 Color Tools

Frequently Asked Questions

Q How is color mixing calculated?

Colors are mixed using linear interpolation in RGB space. Each channel (R, G, B) is independently blended: result = channel1 × (1-ratio) + channel2 × ratio.

Q Why does mixing red and green make brown instead of yellow?

In RGB linear interpolation, the path goes through muted intermediate values. True yellow is at a different position in the color space. For color-wheel-aware mixing, use HSL interpolation.

Q Is this additive or subtractive mixing?

This is additive (light-based) mixing in RGB space, matching how screens display colors. Paint-like subtractive mixing would produce different results (e.g., blue + yellow = green in paint, gray in RGB).

About This Tool

Color Mixer is a free online tool by FreeToolkit.ai. All processing happens directly in your browser — your data never leaves your device. No registration or installation required.