Color Mixer

Mixing two colors gives a different result depending on the method

Mix blue #0000FF and yellow #FFFF00 half and half and the difference shows up right away. Averaging the RGB values on screen gives gray #808080, and shining the two lights together at half strength each gives a light gray, #BCBCBC. Mixed like paint, the pair becomes a teal-ish #217D90, and raising yellow to 75% moves it toward the green #81B265. Mixing in OKLab, the default of CSS color-mix(), gives a sky blue, #6CABC7.

The calculator above shows these five methods side by side. Enter two colors and a ratio, and each method gets a strip from A to B plus the color at the current ratio. For the method you pick, you can then get HEX, RGB, HSL and OKLCH values, CSS code and a step palette. The mixing path map below shows why the colors travel different routes and why a result turns dull or stays vivid.

Why work out a mixed color in advance, and when it helps

The right mixing method depends on where the color will be used. Expect a paint result from a color meant for the screen, or judge a paint mix from a plain screen average, and you will get a color you did not expect.

• Web and app design: Check the resulting HEX before you build a slightly darker hover color or a pale background from a brand color plus white with CSS color-mix().
• Charts and gradients: Split the range between two colors into 5, 7 or 9 steps to make an ordered color ramp. Choosing a method whose midpoint does not turn muddy matters here.
• Painting, crafts and house paint: Before mixing real paint, get a rough idea of which color the mix will lean toward and how much white or black to add.
• Teaching and explaining: Show with the same two colors why mixing light (additive) and mixing paint (subtractive) give different results.

How to use the calculator

1. In the Color A and Color B fields, enter a HEX code such as #3498db, 3498db or #f80, or a CSS notation such as rgb(52 152 219), hsl(204 70% 53%) or tomato. Click the swatch at the left of a field to use a color picker; the button in the middle swaps A and B.
2. The B share is the portion of B in the mixed color. Enter 30 and you get A 70%, B 30%. You can also drag the vertical marker over the five-row strip, or click the strip and nudge it 1% at a time with the left and right arrow keys.
3. Click a method name on the left to use that method for the result card and the step palette. The HEX button on the right copies only that method's result.
4. On the result card, copy the HEX, RGB, HSL and OKLCH values and the CSS color-mix() code. CSS has no matching function for the paint method, so use its HEX.
5. In the step palette, choose the number of steps and take the result away as a HEX list, CSS variables or a PNG image. Click one cell to copy that color's HEX.

Five ways to mix colors

All five methods take the same two colors and the same ratio, but they differ in which values they average. The last column shows the result of mixing blue #0000FF and yellow #FFFF00 50 : 50.

The sRGB average is what older HEX blenders did, so its results feel familiar, but two near-complementary colors bend sharply toward gray. The light method always comes out equal to or brighter than the sRGB average for the same two colors. HEX numbers are light intensity squeezed through a gamma curve, so averaging the intensity itself and converting back to HEX makes the midpoint brighter.

Why paint mixes differently from a screen

A screen builds color by adding red, green and blue light (additive mixing). Paint works the other way: it absorbs some wavelengths of the incoming light and sends back the rest (subtractive mixing). Blue paint mainly sends back short wavelengths and yellow paint sends back middle and longer ones, so mixing them leaves only the wavelengths near green that both send back. That is why blue + yellow, which becomes gray in an sRGB average, becomes a green-ish color in paint.

The paint method in this calculator follows the procedure published by Scott Allen Burns. First, each color is turned into 36 reflectance values, covering visible light from 380 to 730 nm in 10 nm steps. Because infinitely many curves produce the same RGB, it picks the smoothest one (the curve with the smallest sum of squared log differences between neighboring values and reflectance between 0 and 1). The two curves are then mixed wavelength by wavelength with a weighted geometric mean, that is, reflectance A^{1 − t} × reflectance B^t (t is the B share), and sRGB is computed again using the CIE 1931 color-matching functions and D65 daylight.

A geometric mean is a product, so the darker color has more influence. Blue #0000FF reflects less than a tenth as much light (relative luminance) as yellow, so a half-and-half mix is still on the blue side, a teal. As you add more yellow, it moves toward green.

Color mixing chart for popular pairs

Every result in the table below is a 50 : 50 mix. Even in the same row the colors differ a lot from method to method, so look at the column that matches where you will use the result. Clicking a pair under "Popular pairs" in the calculator above loads the same combination.

In the Paint column, red + green gives brown and red + blue gives a dark purple. The direction matches what you usually see when you mix two real paints. The Light column is equal to or brighter than the sRGB average for every pair.

Why mixing on screen turns colors muddy

A muddy color is one with low chroma. The mixing path map looks down on color space as the OKLab a-b plane, so the closer to the center, the grayer the color, and the closer to the outer band, the more vivid. The sRGB average joins A and B with a straight line inside the RGB box, so for near-complementary colors the path runs through the gray in the middle. OKLCH travels around the rim of the color wheel and keeps its chroma.

The figure in parentheses is the ratio to the average chroma of the two colors. When every step needs to stay distinct, as in a chart, OKLCH is the better pick. The light method keeps chroma for pairs that are not complementary, such as red + blue, but turns complementary pairs such as blue + yellow gray, just like the sRGB average. Between two vivid colors, though, OKLCH easily travels to colors a screen cannot show, so a clipped value can come out, as with the OKLCH blue + yellow in the table above.

When you mix in white or black (tints and shades)

A color lightened with white is called a tint, and one darkened with black is called a shade. The sRGB average lightens evenly as the white share grows, while the paint method needs quite a lot of white before red turns pink.

Black, on the other hand, is very strong in the paint method. Add just 10% black to white and you get #A9A9A9, at 25% you get #595959, and half and half gives an almost black #191919. The same ratios in an sRGB average give #E6E6E6, #BFBFBF and #808080. With real paint, too, black usually goes in a little at a time.

Using CSS color-mix()

In CSS you write the space to mix in and the two colors, as in color-mix(in oklab, #3498DB, #E74C3C). The CSS line on the result card builds this code with the space that fits the method you chose (srgb-linear, srgb, oklab or oklch). Percentages are normalized as shown below.

The CSS Color 5 draft says to mix in oklab when the space is omitted, but with older browsers in mind it is safer to write in oklab out in full. Polar spaces (oklch, hsl) take the shorter way around the hue circle, and writing in oklch longer hue takes the longer way.

Common mistakes

• Trusting a HEX average as the paint result: Blue + yellow coming out gray is not a calculation error; it is how a screen average behaves. If you want the paint result, look at the Paint row.
• Reading the ratio backwards: In this calculator and in CSS alike, a B share of 30% means A 70%. In color-mix(), a percentage belongs to the color right before it.
• Thinking of light mixing as addition: Turning on red light and green light together gives yellow #FFFF00, but the light method here is an average of two lights, each turned on in proportion to the ratio, so it gives #BCBC00.
• Taking an OKLCH result at face value: Between two vivid colors the path easily leaves sRGB. If the result card says the value was clipped, the color you actually see on screen is that HEX.
• Adding too much black: In the paint method, mixing 30% black into white is already a dark gray, #474747, and just 10% black in red darkens it to #AA0D0B (the sRGB average gives #E60000). To darken a color, start under 10% and add a little at a time.
• Expecting pastels from a few drops of white: In the paint method, turning red into pink takes around 75% white.

Limitations and cautions

• The paint method treats a screen color as a hypothetical paint with the "smoothest reflectance" and mixes it as an approximation. Real paints differ in reflectance curve and tinting strength (how strongly they pull the mix toward their own color) from pigment to pigment, so the same HEX gives different results by brand and pigment.
• A channel of 0 is replaced by 0.0001 for the calculation, so even pure black #000000 is treated as a very dark paint with a reflectance of 0.0001. The end ratios 0% and 100% return the color you entered unchanged.
• If a result falls outside the screen (sRGB) gamut, the channels are clipped to 0-255 for display. This matches how Chrome 151 renders color-mix() results, and may differ from the chroma-reduction approach CSS Color 4 recommends.
• Transparency is ignored and the two colors are mixed as opaque. If you enter a semi-transparent color, a notice says its transparency is ignored.
• Colors on screen can look different depending on the monitor's gamut and brightness settings. If you need a print color, check it with an RGB-to-CMYK converter under your printing conditions.

Basis: the paint method uses Scott Allen Burns's reflectance curves (380-730 nm, 10 nm) plus weighted geometric mean procedure, with the CIE 1931 2° color-matching functions and D65 daylight; the other four methods follow the color-mix() definitions in CSS Color 4 and 5. CSS results were checked in Chrome 151 on October 21, 2026.

Sources

• 01Scott Allen Burns — Subtractive Color Mixture ComputationThe procedure that turns RGB into reflectance curves, mixes them with a weighted geometric mean and converts back to RGB, with the blue + yellow example
• 02Scott Allen Burns — Generating Reflectance Curves from sRGB Triplets36 points from 380 to 730 nm at 10 nm, the smoothest curve (LLSS, ILLSS), reflectance 0 to 1
• 03W3C — CSS Color Module Level 5color-mix() syntax, oklab when the method is omitted, percentage normalization and alpha when the sum is under 100%
• 04W3C — CSS Color Module Level 4Oklab as the default interpolation space, shorter as the default hue interpolation, the sRGB transfer function and OKLab conversion matrices
• 05CIE — CIE 1931 colour-matching functions, 2 degree observerColor-matching function data for turning a reflectance curve into XYZ
• 06CIE — Components of relative spectral distribution of daylightThe S0, S1 and S2 components that build the D65 (6504 K) daylight spectrum
• 07Björn Ottosson — A perceptual color space for image processingDefinition and design intent of the OKLab color space
• 08MDN — color-mix()Syntax examples and browser support (Chrome 111, Firefox 113, Safari 16.2)

Frequently asked questions

Tools to use with this one