Blend 2+ colors using perceptual square-mean RGB (not linear RGB mud). Part of the DevTools Surf developer suite. Browse more tools in the Color collection.
Use Cases
Designers blending brand colors to create harmonious midtones
Frontend developers computing intermediate colors for gradient steps
Artists finding the perceptual average of multiple reference colors
Design system engineers generating token colors from primary palette blends
Tips
Add two or more colors to blend them using perceptual square-mean RGB
Perceptual mixing avoids the muddy browns that linear RGB averaging creates
Experiment with different color combinations to find unexpected new hues
Fun Facts
Linear RGB averaging produces perceptually incorrect results because human vision responds logarithmically to light — gamma-corrected mixing better matches what our eyes expect.
The science of color mixing dates to 1855 when James Clerk Maxwell demonstrated that any color could be created by mixing three primary lights in different proportions.
Perceptual color spaces like CIELAB (created in 1976) were specifically designed so that equal numerical distances correspond to equal perceived color differences.
FAQ
Why does linear RGB mixing produce mud?
Averaging RGB values mixes brightness poorly. Yellow + blue in RGB = dull gray, not green. Perceptually-uniform spaces avoid this artifact.
What's 'perceptual square-mean'?
Average the squares of each channel, then square-root. Approximates what the human eye perceives when colors blend. Much better than plain average.
Can I mix more than 2 colors?
Yes — weight each. Useful for generating intermediate palette colors or matching a specific brand blend.
Does alpha affect the mix?
Yes — alpha weights the contribution of each color to the final mix. Two 50%-alpha colors blend differently than two 100%-alpha colors.
