Mixed Color
#7B6FBD
#7B6FBD⎘ rgb(123, 111, 189)⎘ hsl(248, 35%, 59%)⎘

Colors to Mix

Total: 100%

Tints & Shades

Tints (+ White)
Shades (+ Black)

Complementary Color

#8D7F3B
Opposite on the color wheel — great for contrast & accents

Color History

Mix colors to build history...

How to Use the Color Mixer

Select colors: Click the color swatch (left of each row) to open the browser’s native color picker, or type a HEX code directly into the input field. Up to 5 colors can be mixed simultaneously.

Adjust ratios: Drag the slider or type a number for each color’s ratio. The ratio bar at the bottom gives a visual breakdown. Ratios don’t have to add to 100 — the tool normalizes them automatically to calculate the weighted mix.

Add more colors: Click + Add Another Color to add a third, fourth, or fifth color to the mix.

Copy values: Click any of the HEX, RGB, or HSL badges in the result panel to copy that color value to your clipboard.

Tints & Shades: The Tints panel shows the mixed color blended with white (lighter versions); the Shades panel shows it blended with black (darker versions). Click any swatch to use it.

Complementary color: The tool automatically calculates the color directly opposite on the color wheel. Click Use as Color 1 to swap it into the mix.

Color history: Every unique mixed result is saved automatically. Click any history swatch to reload it as your first color input.

Color Mixing Tips

Why ratios matter: A 90/10 mix produces a very different result from 60/40. Use the ratio bar to see proportions at a glance — small ratio changes near one extreme shift the result color dramatically.

Start with two, then add: Build complex mixes gradually. Start with your two dominant colors, confirm the mid-tone, then add a third color at a low ratio (10–20%) to add warmth or coolness without overpowering the blend.

Complementary for contrast: If your mixed color will appear alongside text or UI elements, the complementary suggestion gives you a mathematically opposite hue — ideal for accent buttons, borders, and highlights.

Tints for UI states: Design systems often use the same hue at multiple lightness levels for hover, focus, and disabled states. Use the tint generator to instantly derive those variants from your mixed base color.

Pick and convert colors visually → Color Picker

Generate full color palettes → Color Palette Generator

Check color contrast ratios → Color Contrast Checker