Mix two colors together with different blending modes
Mix any two colors together using different blending modes. Adjust the ratio to control how much of each color appears in the result. Supports Normal, Multiply, Screen, and Overlay blend modes. Copy the resulting HEX, RGB, or HSL values for use in your designs.
Color mixing is fundamental to design, art, and branding. Digital color mixing follows additive rules (mixing light, not paint) — combining red and green light creates yellow, not brown. This tool lets you blend two or more colors at any ratio, useful for creating transition colors between brand colors, finding midpoints for gradients, generating tints and tones, or exploring color relationships. The mix is calculated in perceptually uniform color space for results that look natural to the human eye. Unlike simple RGB averaging (which can produce muddy results), perceptual mixing maintains vibrancy. Whether you're designing a gradient, creating a color scheme from a logo, or exploring color theory, this mixer gives you precise, predictable results.
Screens use additive color (light) where RGB primaries combine to white. Paint uses subtractive color where pigments combine to dark brown/black. Red + green light = yellow; red + green paint = brown. This tool uses additive (digital) mixing.
Yes — mix colors sequentially. The order doesn't matter mathematically (mixing A+B then adding C gives the same result as B+C then adding A), though the ratio slider controls the proportion of each addition.
Mix your color with white for tints (lighter) and black for shades (darker). A 20/80 mix with white creates a subtle tint; 80/20 creates a very pale version. This is how design systems create color scales.
Mixing colors far apart on the color wheel through RGB averaging can cross through desaturated regions. This tool uses perceptual color space to minimize this, but extreme mixes (e.g., blue + orange) will naturally produce muted results.
CSS gradients interpolate between colors — essentially mixing them across a space. This tool shows you what any point in that gradient looks like. Use it to preview gradient midpoints before coding them.