Color Mixing Basics: Additive (RGB) vs Subtractive (CMY) Explained

"Mix blue and yellow and you get green" — this rule everyone learns with paint actually does not hold inside a computer or smartphone screen. If you work with design or color schemes, you often run into the situation where "the mixed color did not turn out as I expected." The cause is usually that the rules of adding color are exactly opposite when you mix light versus when you mix paint or ink. This article walks through the basics of color mixing step by step.

What Is Color Mixing: Two Worlds of Mixing

Color mixing means combining several colors to create another color. It sounds simple, but there are two kinds of mixing with completely different natures. One is additive mixing (mixing light), and the other is subtractive mixing (mixing paint or ink).

The difference lies in "what the source of color is." Things that emit light themselves, like displays and spotlights, follow additive mixing, while things that reflect light, like ink and paint on paper, follow subtractive mixing. That is why you can see tiny red, green, and blue dots when you get close to a TV screen, whereas printed material is made of cyan, magenta, yellow, and black ink.

To quickly try what colors form in each world, it is easiest to actually mix two colors in the Color Mixer. By mixing while changing the values, you can grasp the feel of color mixing firsthand.

Additive Mixing: Light (RGB) Turns White

Additive mixing adds light itself together. The three base colors (the primary colors of light) are Red, Green, and Blue, abbreviated as RGB. Computer, smartphone, and TV screens all create color with this RGB.

The biggest feature of additive mixing is that the more colors you stack, the brighter it gets, and mixing all of them at maximum produces white. The state with nothing (all light at zero) is black, and you add light onto it. The representative combinations are as follows.

• Red + Green = Yellow
• Green + Blue = Cyan
• Blue + Red = Magenta
• Red + Green + Blue = White

If you are used to paint, you might feel that "mixing red and green would make a muddy color," but in the world of light, red and green mix into a vivid yellow. This is the counterintuitive fun of additive mixing. The white of a screen is not "nothing painted" but the result of lighting all three colors at full power.

Subtractive Mixing: Paint (CMY) Turns Black

Subtractive mixing creates color by absorbing (subtracting) light, like paint or ink. The three base colors (the primary colors of pigment) are Cyan, Magenta, and Yellow, called CMY. In printing, black (the Key plate = K) is added to make CMYK.

Subtractive mixing is exactly the reverse of additive: the more colors you stack, the darker it gets, and mixing all of them produces black (or something close to it). Ink absorbs part of the light and reflects the rest, so as you stack colors, more light is absorbed and it grows darker. The relationship is that the state with nothing painted (the white of the paper) is the brightest.

• Cyan + Yellow = Green
• Yellow + Magenta = Red
• Magenta + Cyan = Blue
• Cyan + Magenta + Yellow = Black (a near-black dark color)

Notice here that the colors "created by mixing" in additive mixing (yellow, cyan, magenta) become the "base primary colors" in subtractive mixing. RGB and CMY are two sides of the same coin. In actual printing, mixing all three rarely gives a true black and tends to yield a muddy dark brown, so a separate black ink (K) is commonly used to produce a crisp black.

Adding Colors on the Web and Making Intermediate Colors

Colors on websites and apps are all specified with additive RGB. The commonly used hex color code (e.g., #FF8800) expresses the strength of red, green, and blue with two digits each, in 256 steps from 0 to 255 (00 to FF in hex). For example, #FF0000 is full red with green and blue at zero, and #FFFFFF is all three at full power, which is white.

The handy thing about this code is that you can think of color as "addition." Raise red (R) and it becomes redder; lower blue (B) and it becomes less blue. When you want an intermediate color between two colors, averaging each component (R, G, B) gives you roughly the middle color. For instance, the midpoint of red #FF0000 and yellow #FFFF00 is around #FF8000 (orange), taking the middle of the green component.

However, since the human eye does not perceive brightness linearly, a simple numeric average does not always match the "visual midpoint." A logically derived intermediate color may look a bit dull. When you specify colors numerically or convert between RGB, hex, HSL, and other notations, the Color Code Converter makes the work smooth. To actually create several intermediate colors and line them up, try changing the mixing ratio little by little in the Color Mixer to see the differences clearly.

What Are Complementary Colors

Complementary colors are colors that sit at opposite positions on the color wheel (colors arranged in a circle). Examples include cyan against red and blue against yellow. Placing complementary colors side by side makes them enhance each other, creating vivid, eye-catching schemes. On the other hand, if you get the area balance wrong, they are prone to the flickering effect called "halation."

Complementary colors are also deeply tied to mixing. In additive mixing, mixing the light of complementary colors produces white (achromatic), which is the image of "completing white by making up for the missing color." For example, the complement of red is cyan (green + blue), and mixing red and cyan as light brings red, green, and blue together into white. The name "complementary" comes precisely from this property of making up for each other.

When planning a color scheme, inverting each component from the base color's RGB values gives you a rough idea of the complement. Fine-tune the actual hue while checking the numbers in the Color Code Converter to get closer to the impression you are aiming for.

Where Intuition and Reality Diverge

Finally, let us organize the "gaps with intuition" that trip people up in color mixing. Much of the confusion around color clears up once you grasp the following points.

"Blue and yellow make green" is a paint (subtractive) story; with light (additive), mixing blue and yellow makes something whitish. Even with the same material, the color you see on a screen differs from the color printed on a printer because the range of reproducible colors (the gamut) differs between RGB and CMY. Vivid, fluorescent-like colors can appear on a screen but tend to sink in print; this is not "poor print quality" but a fundamental limit.

Another gap is the one mentioned earlier: the numeric average does not match the visual midpoint. Because color has a physical quantity (light intensity) and a perceptual quantity (how bright it feels) that diverge, a computed intermediate color may look duller than expected. That is exactly why it matters to actually mix and check with your eyes, not just reason in your head. By mixing two colors in the Color Mixer and converting the result into another notation with the Color Code Converter, you can experience both the rules of mixing and the "gap with intuition" at once. Seeing and touching the mechanism is the shortcut to better color work.

Please note that this article is intended to provide general information. For printing or brand color management that require accurate color reproduction, results vary depending on the device, paper, and color profile used. In practice, make your decision after checking the latest official information and color management guidelines, and professional sources where needed.