How to use the color mixer
- Enter or pick the first color and the second color. Type a hex code such as #1D4ED8, with three or six digits, or use the color picker beside it.
- Set the share of the second color from 0 to 100 percent. At 50 percent, the two colors are mixed in equal parts.
- Choose a blend method: screen colors (sRGB), light (linear RGB) or around the hue wheel.
- Read the mixed color as hex, RGB and HSL, then use the ladder to see the steps between the two colors. Copy the hex or all steps.
Formula
sRGB: each channel = A + (B - A) x share
Linear RGB: convert each channel to linear light, blend, then convert back
Hue wheel: blend hue by the shorter way around the circle, and blend saturation and lightness
Channels are rounded half up to whole numbers from 0 to 255
The share is the part of the second color in the mix, so 0 gives the first color and 100 gives the second.
Red and blue at 50 percent, and a blue with amber
Red #FF0000 and blue #0000FF mixed half and half give #800080 in sRGB, a dark purple. The linear method gives a brighter purple, #BC00BC, because it averages the light itself rather than the encoded values. The hue wheel method goes from hue 0 to hue 240 the short way through 300 degrees and gives the bright magenta #FF00FF.
Blue #1D4ED8 and amber #F59E0B at 50 percent give #897672 in sRGB, #B57E9F in linear RGB and #E714C0 around the hue wheel. The hue wheel result is bright and saturated, while the sRGB average of two opposite colors is a muted gray-brown.
Three ways to mix, three different answers
Screens store colors as encoded numbers, not as amounts of light. Averaging those numbers (sRGB) is simple and is what most design tools do by default, but it makes mid-points a little too dark. Blending in linear light follows how light adds in the real world and gives brighter, more natural mid-tones. Blending around the hue wheel travels through the colors in between, so mixing red and blue passes through magenta instead of a duller purple. None of them copies paint mixing, where pigments absorb light and the result is usually darker.
To pick a color from an image or the screen, the Color Picker shows every common format. For a palette that works together, use the Color Palette Generator.
Checking the result
A mixed color that looks right can still fail as text or a background. Check that text on it is readable with the Color Contrast Checker, because mid-tones often fail on both white and black text. For a smooth transition between two colors on a web page, the ladder gives you the steps, and the CSS Gradient Generator turns them into a gradient. The page text on each swatch shows the hex value, so you never have to rely on color alone to tell the steps apart.
Assumptions and limits
- Colors are 8-bit sRGB values given as hex codes with three or six digits.
- Channels are rounded half up to whole numbers after blending.
- The ladder includes both end colors and an even spread of shares between them.
- Everything is mixed in your browser and nothing is uploaded.
Frequently asked questions
How do I mix two hex colors?
Enter both hex codes and the share of the second color, and the tool blends the red, green and blue channels. At 50 percent each channel is the average of the two.
Why do the three methods give different colors?
sRGB averages the encoded values, linear RGB averages the light, and the hue wheel method blends the hue angle, saturation and lightness. They agree at 0 and 100 percent and differ in the middle.
Does this match mixing paint?
No. Paints absorb light and tend to give darker, muddier mixes. This tool mixes the light that a screen shows.
Can I enter a three-digit hex code?
Yes. #ABC is the same as #AABBCC. The tool also accepts the code without the # sign.