Micro Tools
Advertisement

Color mixer

Pick two colors and a blend mode, and the mixer builds an even stepped palette between them, with tints and shades included. Click any swatch to copy its hex code.

Mix colors

Pick two colors and a blend mode. The mixer builds an even stepped scale between them.

Palette

Click any swatch to copy its hex code.

Advertisement

How the blend math works

Every color is a point in RGB space, three numbers from 0 to 255. Mixing walks a straight line between the two endpoints: at step 3 of 6 you are 40 percent of the way from color A to color B on each channel. Tints walk from your color toward pure white, shades walk toward pure black, which is how design tools build consistent scales.

When to use stepped palettes

Use a mixed scale when you need a family of related colors: button hover states, chart series, tag badges, or gradient stops that feel intentional. Designers typically work with 5 to 10 steps; fewer steps give bold contrast, more steps give subtle transitions for data visualization.

Related tools

Image compressorShrink images to a target size or quality. Compress to exact KB. HEIC to JPG converterConvert iPhone HEIC photos to JPG, right in your browser. WebP converterConvert WebP to PNG or JPG.

Color Mixer FAQs

How many steps should I pick for a palette?
For UI work, 5 to 7 steps is the sweet spot: a base color, two lighter tints and two darker shades, which covers backgrounds, borders, hover states and text. Data charts can use up to 10 steps when you need many distinguishable series.
What is the difference between tint, shade and mix?
Tint blends your color toward white, making it lighter and softer. Shade blends toward black, making it deeper. Mix blends two different colors together, which is how you discover new in-between hues like teal from blue and green.
Can I use the mixed colors in CSS directly?
Yes. Click any swatch to copy its hex code, then paste it into your stylesheet or design tool. The Copy all button gives you the whole scale as a comma-separated list, handy for pasting into a palette file.
Why do my mixed colors look muddy in the middle?
Mixing complementary colors, like orange and blue, passes through gray in the middle because RGB interpolation is linear. If you want vivid midpoints, pick two colors that sit near each other on the color wheel, like violet and cyan.
Does the mixer work offline?
Yes. All the blending math runs in your browser with plain JavaScript, so the tool works fully offline once the page has loaded.
Advertisement