Color tools

Color Mixer color mixer

Mix two colors and adjust the ratio to instantly create a new color. Supports multiple color formats, one-click copy and export.

Color A
HEX
RGB
HSL
Color B
HEX
RGB
HSL
Mixing ratio
50%
Color A Color B
remit
Instant preview
Color A
#2563eb
Mixed colors
#804289
Color B
#dc2626
Mixed color values
HEX copy RGB copy HSL copy CSS copy
HEX
#804289
RGB
128, 66, 137
HSL
293, 35%, 40%
CSS
rgb(128,66,137)
CSS output
/* Mixed color CSS */ .color-mixed { background: rgb(128, 66, 137); }
Advertisement
Google AdSense ad block

What is Color Mixer?

Color Mixer It is a free online color mixing tool that allows you to mix two colors and adjust the mixing ratio to instantly produce a new color. Whether you're a graphic designer, web front-end developer, or digital creator, finding your ideal color palette is easy.

How to use Color Mixer?

The usage is very intuitive: set them separately on the left Color A with Color B color (either directly entering a HEX, RGB or HSL value via the color picker), then drag theMix ratio slider to adjust the blending weight of the two colors. The color blocks and detailed color values ​​of the mixing results will be displayed instantly on the right side.

Mixing principle

This tool uses RGB linear interpolation for color mixing. Each channel of the mixed color (R, G, B) will be calculated separately according to the set ratio:Value = (1 - ratio) × ColorA + ratio × ColorB. The result is Color A at 0%, Color B at 100%, and intermediate ratios produce smooth transitions of color.

Application scenarios

Color Mixer vs Color Palette Generator

Color Mixer focuses onPrecise mix of two colors, to generate transitional colors by adjusting the proportion; while the Color Palette Generator starts from a single main color and generates a complete set of color chips. The two complement each other and meet the color design needs at different stages.

Frequently Asked Questions (FAQ)

What is the range of mixing ratios?
Mix ratio from 0% to 100%. 0% represents all Color A, 100% all Color B, and 50% is half and half. You can precisely adjust to any percentage via the slider.
How are blended results calculated?
Calculated using RGB linear interpolation. The blended color's R, G, and B values ​​linearly transition between Color A and Color B, respectively, based on the ratio. This is the most intuitive and widely used way to mix colors.
What color formats are supported?
Color A and Color B inputs support HEX, RGB and HSL formats, and all inputs are synchronized in real time. Mixed results are also available in HEX, RGB, HSL and CSS background formats for you to copy and use directly.
Can mixed results be exported?
Yes! You can use the export function on the left to download the three-color patch as a PNG or SVG image, or you can export a CSS Variables file. Additionally, all color values ​​can be copied to the clipboard with one click.
Will this tool save my data?
Not at all! All color mixing calculations are performed in your browser, and none of your operation data is sent to any server. You can use all features in a completely offline environment.
Will the proportions be swapped after swapping colors?
After the swap, the positions of Color A and Color B are reversed, but the mixing ratio remains the same. This means that if the original color is 30% Color B, and the swapped 30% becomes the original Color A, the blending result will change accordingly.

Browser compatibility

This tool uses standard Web API and supports all modern browsers:

🌐
Chrome
Latest version
🦊
Firefox
Latest version
🍏
Safari
Latest version
🔷
Edge
Latest version

Privacy Statement

This tool executes entirely in your browser. Any colors you enter are not sent to any server. We do not use cookies or tracking with this tool.