Color Mixer
Mix two to eight colors and get the result as a hex code with its closest color name. Paint mode mixes like real pigment, so blue and yellow make green. Switch to Light (RGB) to average the colors on screen instead.
How to use the color mixer
- Pick your colors. Click the hex field on a card to open the color picker, or type a hex code. Use Add color for up to eight colors.
- Set the parts. The minus and plus buttons set how many parts of each color go into the mix, from 1 to 12. Two parts red and one part yellow gives more red than yellow.
- Choose how to mix. Paint is the default. Light (RGB), LAB, LCH, OKLCH, and HSL blend the numbers in different color models.
- Use the result. Click the hex code or the RGB, HSL, and OKLCH values to copy them. Copy link copies a URL that reopens this exact mix, and Open in palette generator starts a palette with the result and its ingredients.
Paint mixing vs. light mixing
Paint and light mix differently. Pigments absorb light, so every color you add takes something away and mixes get darker and duller. That is why blue and yellow paint make green. Averaging the red, green, and blue values of two screen colors does something else: blue (0, 0, 255) and yellow (255, 255, 0) average to (128, 128, 128), a plain gray.
Paint mode uses spectral.js, which models pigments with Kubelka-Munk theory, so its results follow what happens on a palette. Treat them as a close guide rather than an exact match: real paints vary by brand, pigment, and how much water or medium you add.
Here is how the same pairs come out in each mode, one part of each color. Click a pair to load it.
| Colors | Paint | Light (RGB) |
|---|---|---|
| Blue + yellow | Green #398F54 | Gray #808080 |
| Red + yellow | Red-orange #FF440F | Orange #FF8000 |
| Red + blue | Dark plum #4A182B | Purple #800080 |
| Red + green | Brown #834B17 | Olive #808000 |
| Red + yellow + blue | Red-brown #803B2D | Dusty red #AA5555 |
What the other modes do
- LAB averages in CIELAB, a model designed so equal steps look roughly equally different. Midpoints are smoother than RGB but still lose saturation.
- LCH blends lightness, chroma (colorfulness), and hue separately, so mixes stay vivid instead of turning gray.
- OKLCH is the same idea built on OKLab, a newer model with more even hue steps. It is also the color model behind
oklch()in CSS. - HSL blends hue, saturation, and lightness, so the hue travels around the color wheel between your colors.
For web work, OKLCH and LCH give the most even blends between two brand colors. For anything you plan to paint, stay on Paint.
How the color name is chosen
The mixer compares the result against a list of more than 4,000 named colors and shows the closest one by RGB distance. Names are a description, not an exact match, so check the hex code when the precise value matters.
Share or save a mix
The page URL updates as you mix, so the address bar always holds the current colors, parts, and mode. A link looks like this:
colorkit.co/color-mixer/?mix=ff0000-0000ff&ratios=2-1&space=paint
mix lists the hex codes, ratios lists the parts in the same order, and space is the mode. A link without space opens in Paint mode. To keep building, open the result in the color palette generator or make lighter and darker versions of it with the color shades generator.
What colors make brown, purple, and other shades?
The mixer works forward from colors you have. To work backward from a color you want, the recipe guides list which colors to combine: brown, purple, green, orange, pink, gray, turquoise, black, red, yellow, and blue.
Have feedback on the mixer? Let us know on the contact form.