Free Color Mixer

Mix two or more colors together with adjustable weights. See the resulting color in HEX, RGB, and HSL.

Mixed Result

How Color Mixing Works

This tool uses additive color mixing in the RGB color space. Each color's RGB components are averaged according to their weights. This simulates how light colors mix (like overlapping spotlights), as opposed to subtractive mixing (like mixing paint).

Can I mix more than two colors?

Yes! Click "+ Add Color" to add up to 8 colors. Use the weight sliders to control how much each color contributes to the mix.

How It Works

  1. Pick your colors: use the color pickers to choose each color. Click + Add Color to add more slots (up to 8).
  2. Set each color's weight: drag the slider under each color to control how much it contributes to the final mix.
  3. Preview the result: the mixed color is shown live with its hex, RGB, and HSL values.
  4. Copy the mixed color: click to copy the resulting hex or RGB value to use in your design or code.

Why Use Color Mixer?

Blending colors is a fundamental operation in design, creating tints (mixing with white), shades (mixing with black), tones (mixing with grey), or harmonious mid-colors between two brand colors. Designers use it to generate palette variants, find mid-tones for gradient stops, ensure accessible contrast ratios between adjacent colors, and create hover/focus states that relate clearly to base colors.

The three things people mean by "mixing colors"

When a non-specialist says "mix two colors," they almost always mean one of three completely different operations. Choosing the wrong model is the single biggest source of confusion in color tools.

Additive mixing is what happens when beams of coloured light overlap. Two flashlights, one red and one green, pointed at the same patch of white wall, produce a yellow patch. A third blue flashlight added on top produces white. The mixing model is "more light = brighter," and the three primaries are red, green, and blue because human cones have peak sensitivities roughly in those bands. Every screen, phone, monitor, television, projector, uses additive mixing. Each pixel contains three subpixels (R, G, B), and turning all three to maximum produces white. This is why the web's default color model is RGB: the medium is emissive, and the math matches the medium.

Subtractive mixing is what happens when colorants absorb wavelengths from white light. A cyan ink absorbs red light and reflects green and blue. A yellow ink absorbs blue and reflects red and green. Layer cyan on top of yellow and the only wavelengths that survive both filters are green ones. The model is "more pigment = darker," and the three subtractive primaries are cyan, magenta, and yellow. CMY in theory mixes to black at full strength, but in practice the pigments are imperfect and the result is a muddy brown, so commercial print added a separate black ink (the K in CMYK) for true blacks. A color mixer running on a screen cannot truly perform subtractive mixing because the screen itself is additive; it can only simulate the appearance.

Traditional artist color theory taught us that the primary colors are red, yellow, and blue. The painting tradition, and Goethe's 1810 Theory of Colours, and Itten's 1961 Bauhaus textbook The Art of Color, codified RYB as the foundation of artist palettes. RYB is not physically accurate. The true subtractive primaries that maximise the gamut are CMY, not RYB. But RYB has held on for centuries because real paints are not pure subtractive filters: a tube of cadmium red and a tube of ultramarine blue mix into a recognisable purple, and the system "works" well enough at the easel to teach generations of students. This tool is an additive RGB blender, which is what the web actually does, so "red plus green" gives yellow, not the brown that a paint mixer would produce.

Color spaces, sRGB, Display P3, Rec. 2020, Adobe RGB

A color model (RGB, CMYK, HSL) tells you what dimensions you have. A color space tells you exactly which physical colours each numeric triple corresponds to: it pins down the chromaticity of the primaries, the white point, and the transfer function. Two displays both speaking "RGB" can produce visibly different reds for the same code if they target different color spaces.

Perceptual color spaces, and why mixing in sRGB gives muddy midpoints

The sRGB and HSL coordinates in which most web tools store and manipulate color are not perceptually uniform. A unit step in the L channel of HSL doesn't correspond to a unit step in how light the colour looks. This is the deep reason why mixing two colours by averaging their channels gives unintuitive results.

The canonical example: take pure red #ff0000 and pure green #00ff00. Average the RGB channels componentwise: red goes from 255 to 127, green goes from 0 to 127, blue stays at 0. The result is #7f7f00, an olive that looks dull, dark, and slightly murky. It is nothing like the brilliant yellow #ffff00 you'd get if you actually shone a red and a green flashlight at the same patch of wall. Two compounding problems explain this.

First, sRGB is gamma-encoded. The number stored as 127 doesn't represent half the light that 255 represents. The transfer function is non-linear: 127 in sRGB corresponds to roughly 21% of the linear light intensity, not 50%. So when you average gamma-encoded values you're averaging something like square-root-of-intensity, not intensity itself, and the result comes out much darker than it should. The fix for that problem alone is to convert sRGB to linear-RGB before averaging, then convert back. With linear-RGB averaging, red plus green divided by two becomes a much brighter, more credible yellow-green.

Second, even linear-RGB doesn't match perception. Equal steps in linear-RGB are still not equal steps in perceived brightness or chromaticity. The midpoint of red and blue in linear-RGB is a desaturated lavender, not the rich purple a designer expects. The fix for that deeper problem is to mix in a perceptually uniform space, Lab, Oklab, OKLCH. Convert both endpoints to Oklab, linearly interpolate the L, a, and b channels, convert back to sRGB. The midpoint of red and green in Oklab is a vivid, believable yellow. The midpoint of red and blue is a saturated magenta. The midpoint of yellow and blue is a clean neutral grey instead of the swampy green you get from naive RGB.

This tool currently averages in gamma-encoded sRGB, the simplest model and the one that produces those muddy midpoints. It's correct for that simple case but doesn't match what physical light or human perception actually does. If you're picking gradient stops or palette mid-tones and you don't want the muddy-grey trap, use the new CSS color-mix() function described below or one of the colour-math libraries.

CIE Lab, Oklab, OKLCH, the perceptual stack

CIE Lab (also written CIELAB) was published by the International Commission on Illumination in 1976. It has three axes: L* for lightness from 0 (black) to 100 (white), a* for the green-to-red chromatic axis, and b* for the blue-to-yellow chromatic axis. Designed so that equal numerical differences correspond to roughly equal perceived differences. For half a century it was the standard perceptual space in graphics, vision science, and colour management. Known weaknesses: blues become unnaturally purplish when interpolated; the lightness axis doesn't perfectly track perception for highly saturated colours.

CIE LCH is just CIE Lab expressed in polar coordinates: L for lightness, C for chroma (distance from the neutral axis), H for hue angle. More useful than raw a*/b* for designers because operations like "shift hue 30 degrees" or "drop chroma to 0" map directly to natural mental models.

Oklab, by Björn Ottosson, was published in December 2020 in an essay titled "A perceptual color space for image processing" on bottosson.github.io. Ottosson is a Swedish engineer who had been working on colour in the games industry. Oklab fixes most of the known shortcomings of CIE Lab, particularly the blue-purple shift in interpolation and the over-prediction of chroma differences in saturated colours. The W3C adopted Oklab into CSS Color Module Level 4 within roughly a year of Ottosson's blog post, extraordinarily fast standardisation for a new colour space. Today every major browser supports oklab() natively.

OKLCH is Oklab in cylindrical coordinates: L for lightness 0 to 1, C for chroma 0 to roughly 0.4, H for hue 0 to 360 degrees. It's becoming the most-recommended colour space for design-system palettes precisely because operations on its axes map cleanly to designer intuitions, and because interpolation between two OKLCH colours produces the smoothest, most pleasing gradients of any space currently available in CSS.

The CSS color-mix() function, JS-free perceptual mixing

CSS Color Module Level 5 introduced color-mix(), which takes two colours, an interpolation colour space, and optional weights, and returns the mixed result computed entirely by the browser. The syntax is color-mix(in oklch, red 50%, blue 50%). You can swap the space (in srgb, in oklab, in lch, in hsl longer hue, etc.) and the math runs in that space. Browser support arrived in early 2023:

A JavaScript-free, CSS-native colour mixer has been broadly available for over two years now. Any tool building on top of color-mix() gets perceptually correct results "for free", the browser handles the conversion stack. CSS Color Module Level 4 itself reached Candidate Recommendation status in 2022 and is supported broadly across modern browsers.

JavaScript libraries for colour math

Three libraries dominate when you can't or don't want to rely on color-mix():

A short history of colour theory

Western colour theory begins with Isaac Newton in 1665. While quarantined from Cambridge during the plague, Newton passed sunlight through a prism and identified seven distinct colours (red, orange, yellow, green, blue, indigo, violet). He then arranged these on a closed circle, Newton's colour wheel, connecting the spectral extremes (violet and red) through a non-spectral magenta. The wheel was published in his Opticks in 1704 but worked out in 1665-1666.

Johann Wolfgang von Goethe published Theory of Colours (Zur Farbenlehre) in 1810. Where Newton was a physicist, Goethe was a poet investigating the psychology of colour: how colours felt, contrasted, and combined in the mind of the viewer. His work was scientifically wrong on many points but introduced ideas about complementary colours, colour afterimages, and the affective character of warm and cool palettes that are still taught today.

Johannes Itten, a Bauhaus master, published The Art of Color (Kunst der Farbe) in 1961. Itten's twelve-spoke RYB colour wheel and his seven contrasts of colour (hue, light-dark, cold-warm, complementary, simultaneous, saturation, extension) became the dominant teaching framework for design education in the second half of the twentieth century.

Pantone was created by Lawrence Herbert, who joined Pantone Inc. as an employee in 1956 and bought the company in 1962. In 1963 he launched the Pantone Matching System (PMS): a standardised library of spot-colour inks identified by number, with printed swatch books that allowed a designer in New York and a printer in Hong Kong to specify and reproduce the exact same colour without ambiguity. Pantone is not a colour space in the technical CIE sense, it's a proprietary catalogue of physical ink mixtures, but its influence on professional colour workflows is enormous.

HSL and HSV were introduced by Alvy Ray Smith in his 1978 paper "Color Gamut Transform Pairs," published in the SIGGRAPH proceedings while he was at Xerox PARC (Smith later co-founded Pixar). He was looking for colour coordinates that mapped more naturally to artist intuition than RGB. HSL became the default "designer-friendly" colour model on the web and remains the most widely-recognised non-RGB notation in CSS. It is, however, perceptually nonuniform, OKLCH is its modern successor.

Contrast and accessibility, WCAG 1.4.3

When a designer mixes two colours to create a third, a hover state, a tinted background, a gradient stop, the resulting colour still has to meet contrast requirements against any text or icon placed on top of it. WCAG 2.x success criterion 1.4.3, "Contrast (Minimum)," requires:

Contrast ratio is computed using relative luminance, the linear-RGB conversion described above and a weighted sum of the linearised channels (L = 0.2126·R + 0.7152·G + 0.0722·B). The ratio between two colours is (L_lighter + 0.05) / (L_darker + 0.05). A practical implication: intermediate stops along a gradient may pass contrast checks at the endpoints but fail dramatically in the middle. If a brand mixes a dark navy with a bright yellow to produce a hover-state olive, that olive may sit in the WCAG fail zone against both white text and black text.

More questions

Why does red plus green not give me brown?

Because this tool, like every screen, uses additive RGB mixing, and red light plus green light gives yellow. Brown is what you get when you mix red and green paint, which is subtractive: each pigment absorbs different wavelengths and the surviving wavelengths look brownish. To simulate "paint mixing" on a screen accurately you'd need a spectral or pigment-aware model (Procreate and Adobe Fresco do this for art apps); generic web colour mixers, including this one, are honest additive RGB blenders and will give you yellow, not brown.

My midpoints look muddy, what's the fix?

Two layers of fix. The minimal correctness step is linear-light blending: convert sRGB to linear-RGB before averaging, then back. That alone makes red+green→yellow look much brighter and more credible. The full perceptual fix is to mix in OKLCH or Oklab, convert both endpoints to OKLCH, interpolate, convert back. The browser's CSS color-mix(in oklch, red, green) does exactly this in one line and works in every browser shipped after May 2023. For JavaScript pipelines, culori.js is the reference library.

What's the right colour space to mix in for design-system palettes?

OKLCH is the current consensus answer. It's perceptually uniform, has clean axes that match designer intuition (lightness / chroma / hue), produces gradient interpolations without muddy midpoints, and ships in every modern browser via oklch() in CSS Color 4 and color-mix(in oklch, ...) in CSS Color 5. Design systems built in 2024-2026 are increasingly switching from HSL-based palettes to OKLCH-based ones for exactly this reason.

Will my mixed colour pass WCAG contrast checks?

This tool doesn't currently surface the contrast ratio of the result, but you can compute it: WCAG luminance is L = 0.2126·R + 0.7152·G + 0.0722·B after linearising the sRGB channels, and the contrast ratio between two colours is (L_lighter + 0.05) / (L_darker + 0.05). The targets are 4.5:1 for normal text and 3:1 for large text or UI components. The Color Contrast Checker in the related-tools area runs this calculation directly.

Related Tools

Color Shades Generator

Generate tints and shades.

Color Converter

Convert between color formats.

Color Palette Generator

Generate color palettes.