Mix two or more colors together with adjustable ratios in RGB, HSL, or LAB color space.
Color Mixer Tool calculates one color from two or more selected colors, with each source contributing according to its assigned ratio. Mixing can be performed in RGB, HSL, or LAB coordinates. That choice matters because identical colors and ratios can produce different results in different spaces. The most common misconception is expecting the result to behave like mixed paint. This tool interpolates digital color values, not physical pigments, so its output models a numerical color mixture rather than subtractive paint or ink mixing.
A concrete input and expected output from the current implementation.
Input
#fe0000 and #0000fe; RGB color space; ratio 1:1
Expected output
rgb(127, 0, 127), equivalent to #7f007f
With equal RGB weights, each channel is averaged independently. Red is (254 + 0) / 2 = 127, green remains 0, and blue is (0 + 254) / 2 = 127.
Each ratio specifies the relative contribution of its color. A 1:1 ratio gives two colors equal influence, while 2:1 gives the first color two shares for every one share from the second. For an RGB mixture, the weighted calculation is applied separately to the red, green, and blue channel values.
RGB mode mixes red, green, and blue coordinates. HSL mode mixes hue, saturation, and lightness coordinates, while LAB mode mixes L*, a*, and b* coordinates. These systems describe color differently, so switching the selected space can change the resulting color even when every input color and ratio remains unchanged.
A 50:50 setting averages coordinates, but RGB, HSL, and LAB assign different coordinates to the same visible colors. Their midpoints therefore need not describe the same resulting color. The ratio still gives the inputs equal weight; changing the space changes what a numerical midpoint means.
No. Paint and ink involve subtractive mixing, pigment spectra, concentration, opacity, and material properties that are not represented by ordinary RGB, HSL, or LAB interpolation. Use this result for digital color planning. Physical mixtures should be tested with the actual pigments and substrate.
The example and behavioral notes were checked against the browser implementation. Standards and primary references below define the relevant format, formula, or platform behavior.
Pick colors visually and convert between HEX, RGB, HSL, and CMYK formats.
Preview how screen colors translate to print with CMYK simulation and proofing.
Preview any Google Font at various sizes, weights, and with custom sample text.
Create linear, radial, and conic CSS gradients with a visual editor and code output.
Generate harmonious color palettes from a base color using color theory rules.
Simulate how colors appear to people with various types of color vision deficiency.