Color Mixer - Free Online Color Blending Tool | IconVault
Mix two colors with blend modes and weight, see results in HEX, RGB and HSL, and browse mix steps. Free, in-browser.
Color Mixer
Blend two colors with modes and weight, see mix steps
Color 1 (base)
Color 2 (blend)
Blend mode
0% keeps color 1, 100% applies the full normal blend.
5 of 5 free copies left.
#4658AErgb(70, 88, 174)hsl(229, 43%, 48%)Mix steps
Steps run from color 1 to the mixed result. Click any step to copy its HEX.
About this tool
IconVault's Color Mixer blends two colors with an adjustable weight and blend mode, showing the result in HEX, RGB and HSL plus a gradient of intermediate mix steps between them. Dial the ratio until you hit the exact tint, shade or in-between tone you need. It is free and runs fully in your browser.
Mixing is the fastest way to build tints (add white), shades (add black) and tones (add gray) that stay consistent with your base colors. The step preview is perfect for generating button hover states, gradient stops and data-viz scales. Trial use is recorded only when you copy a value.
Frequently asked questions
Popular searches
More tools
Font Pairing
Curated heading and body font pairs with live preview
Font Preview
Preview 200+ Google Fonts with your own text
Glassmorphism Generator
Design frosted glass cards and copy the CSS
Gradient Text
Gradient headlines with live preview and CSS
Coming soon
CLI
Coming soon
Figma plugin
Coming soon
VS Code extension
Coming soon
Chrome extension
Coming soon
AI icon generator
Coming soon
Team workspaces
Coming soon