Mezclador de colores
Mix two or more colors together with adjustable weights. See the resulting color in HEX, RGB, and HSL.
Mixed Result
How Color Mixing Works
This tool uses additive color mixing in the RGB color space. Each color's RGB components are averaged according to their weights. This simulates how light colors mix (like overlapping spotlights), as opposed to subtractive mixing (like mixing paint).
Can I mix more than two colors?
Yes! Click "+ Add Color" to add up to 8 colors. Use the weight sliders to control how much each color contributes to the mix.
How It Works
- Pick two colors: Use color pickers or enter hex, RGB, or HSL values for the two colors you want to mix.
- Set the ratio: Drag the blend slider to control the mix ratio — from 10/90 all the way to 50/50 and beyond.
- Preview the result: The mixed color is shown live with its hex, RGB, and HSL values.
- Copy the mixed color: Click to copy the resulting hex or RGB value to use in your design or code.
Why Use Color Mixer?
Blending colors is a fundamental operation in design — creating tints (mixing with white), shades (mixing with black), tones (mixing with grey), or harmonious mid-colors between two brand colors. This tool performs color mixing in multiple color spaces: RGB linear mixing for physically accurate blends, and HSL for perceptually smooth transitions. Designers use it to generate palette variants, find mid-tones for gradient stops, ensure accessible contrast ratios between adjacent colors, and create hover/focus states that relate clearly to base colors.
Mixing Modes
- RGB mix — channel-by-channel linear interpolation
- HSL mix — hue, saturation, lightness interpolation for perceptual smoothness
- Opacity blend — simulate alpha compositing over white or transparent backgrounds
- Multiple stops — generate a full gradient between two colors