Color Mixer
Mix two colors with adjustable ratio. See the result in HEX, RGB, and HSL with a gradient preview and intermediate steps. Free, 100% in your browser.
Reference
How does color mixing work?
This tool uses RGB linear interpolation to mix colors. Each RGB channel (red, green, blue) is blended independently based on the mix ratio. At 0% you get Color 1, at 100% you get Color 2, and at 50% you get an equal mix. This is the standard additive color mixing model used in digital design — it differs from subtractive mixing (like paint) where blue + yellow = green.
Color mixing models
Additive (RGB) — used in screens and digital design. Red + Green = Yellow, Red + Blue = Magenta, Green + Blue = Cyan. This tool uses additive mixing. Subtractive (CMYK) — used in printing and paint. Cyan + Magenta = Blue, Cyan + Yellow = Green. HSL blending — interpolates hue, saturation, and lightness separately, sometimes producing more perceptually uniform results.
Common use cases
Design systems — create intermediate colors between brand colors. Gradients — preview gradient steps before coding them in CSS. Theming — generate hover and active state colors by mixing with white or black. Data visualization — create color scales by mixing two endpoint colors. Art — experiment with digital color combinations.
Privacy
All calculations run 100% in your browser. No data is sent to any server.