Mix two or more colors together to see the resulting blend with adjustable ratios and color space options.
Color Mixer combines two or more entered colors into one calculated blend. You adjust each color's relative share and choose the color space used for interpolation, then inspect the resulting color. The important surprise is that identical source colors and ratios can produce different blends when the color space changes. A 50:50 ratio means equal numeric influence in the selected space, not necessarily a shade that looks visually halfway between the inputs.
A concrete input and expected output from the current implementation.
Input
Color 1: #336699 Color 2: #336699 Ratio: 1:1 Color space: sRGB
Expected output
#336699
Both inputs have sRGB channels (51, 102, 153). Their equal-weight channel averages remain (51, 102, 153), which converts back to #336699.
Each entered color has a relative share in the blend. Equal shares give the inputs equal weight, while increasing one share moves the result toward that color. When more than two colors are included, every active input contributes according to its share, so changing one ratio can alter the relative influence of all the others.
The selected color space determines which color coordinates are interpolated. Different spaces encode lightness, chroma, and channel values differently, so switching spaces can change the result without changing the source colors or ratios. This is a calculation between digital color values, not a simulation of pigments being physically stirred together.
The equal weighting is applied to coordinates in the selected space, and different spaces assign different coordinates to the same visible colors. The interpolation therefore follows a different path between the endpoints. Neither result is universally correct; each represents the midpoint defined by that particular color space.
No. The mixer interpolates digital color values, while physical mixtures depend on pigment absorption, ink density, substrate, illumination, and other material properties. Use the result for screen-color exploration. For paint or print production, make a physical test or use measurements and a color-managed production workflow.
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.