CS Color Palette

Two-Color Mixer

Pick two colors and blend them with additive light (RGB), traditional paint (RYB) or a vivid HSL arc — with a 21-stop gradient you can copy from.

Three-step start

  1. 1
    Pick two colors: use the two color wells, or paste HEX values directly.
  2. 2
    Choose a rule: RGB for screen light, RYB to imitate paint, HSL for a vivid transition.
  3. 3
    Take the result: drag the ratio slider for the blend, click any gradient stop to copy it.

Mix two colors

Drag the ratio slider to blend live; the bar below shows all 21 intermediate stops.

A 50% · B 50%
#925F85
#925F85
rgb(146, 95, 133)
hsl(315, 21%, 47%)

Click any stop in the gradient bar to copy it; switching the rule re-interpolates the whole bar.

Why does red plus yellow give orange here but a washed-out tan in RGB?

Because the rules model different physical systems. RGB averages light channels, and red light plus green-ish yellow light lands on a desaturated mid-tone. The RYB mode first re-expresses both colors on the artist’s red-yellow-blue axes, interpolates there, and maps back — so the painter’s orange appears. Use RGB for screen effects and RYB whenever you are imitating paint.

Is the mixing exact? Why is a copied value slightly different after a round trip?

Interpolation happens in floating-point space and each channel is rounded to an integer on output, so the error stays within ±1/255 — invisible to the eye. Everything is computed locally in your browser; no color value is ever uploaded.

Which rule should I use for UI gradients?

For two analogous brand hues, RGB is fine. For hue pairs more than about 90° apart, prefer the HSL arc — a straight RGB line drags through gray. If the gradient should feel like inks or watercolors, use RYB.

Additive and subtractive color: two questions one mixer answers

“What do you get if you mix red and green?” has two correct answers, and which one you need depends on what is doing the mixing. Light adds — overlap two projectors and the result gets brighter. Paint subtracts — each pigment absorbs part of the spectrum, so every color you add takes light away and the mixture gets darker. A screen is the first world, a printer the second, and a UI gradient can be either, depending on the feeling you want.

The additive rule (RGB)

Linear RGB interpolation is the default of every CSS gradient: each channel is blended independently, so red (255,0,0) into green (0,255,0) passes through a dark olive at the midpoint, and blue into orange collapses through mud-gray. That is physically correct for light and still perfect for nearby hues, where the channels move together anyway.

The painter’s rule (RYB)

Traditional color education is built on red, yellow and blue because those were the available primaries for centuries of paint. Mixing happens inside that cube — so red plus yellow becomes a true orange, blue plus yellow a green, red plus blue a violet — before the result returns to sRGB. Expect mixtures to darken as more “pigment” joins, exactly like on a palette.

The vivid transition (HSL arc)

Blending hue along the shorter arc of the color wheel, with a small saturation bump in the middle, keeps a two-brand-color gradient alive instead of letting it sag through gray. It is the rule to reach for in banners, chart fills and loading bars — anywhere the gradient is the decoration, not the data.

Related

Start from a structured relationship instead of two arbitrary colors with the color wheel, or sample both colors off an image with the color picker.

Frequently asked questions

What is the difference between additive and subtractive mixing?

Screens mix light (additive): red plus green makes yellow, all three make white. Paint mixes pigments that absorb light (subtractive): every extra pigment makes the result darker and grayer. Red plus green on a screen is a bright yellow; on a palette it is a muddy brown. That is why this tool offers the two rules separately.

How does the RYB pigment mode work?

Your sRGB color is converted into the traditional RYB color cube (the artist’s red-yellow-blue axes), the two colors are interpolated inside that space, and the result is mapped back to sRGB. Only then do painterly facts like "red plus yellow makes orange" and "blue plus yellow makes green" hold — plain RGB interpolation cannot produce them.

When should I use the HSL arc mode?

A straight RGB blend between two hues passes through low-saturation territory, so the middle turns gray (try blue to orange). The HSL mode interpolates hue along the shorter wheel arc and compensates saturation and lightness, keeping the transition vivid — ideal for gradient bands between two brand colors.