A playable field guide to color

How color actually works, in light and in ink

Every color on a screen is made by adding light. Every color in print is made by subtracting it. The two systems run in opposite directions, and that single fact explains nearly everything else, including why the colors never quite match.

Screens · add lightblack → white

Start in the dark. Add red, green, and blue light. Where all three pile up, you reach white.

Print · subtract lightwhite → black

Start with white paper. Add cyan, magenta, and yellow ink. Where all three pile up, you reach black.

The one idea · screensPixels begin black and emit light. More light means a brighter color, all the way up to white.
The one idea · printPaper begins white and reflects light. More ink means less escapes, all the way down to black.
First, what color even is

Color is light, and your eye keeps only three numbers

White light is a blend of every wavelength, from deep red to violet. Drag across the spectrum below. Your eye does not measure each wavelength on its own. It carries just three kinds of color sensor, tuned roughly to red, green, and blue.

540 nm · green
380 nm · violet490 · cyan540 · green620 · red700 nm · deep red

Every color you have ever seen is your brain reading three signals from those sensors. That is the loophole every screen exploits. It never reproduces a true wavelength. It just lights three dots, red, green, and blue, in the right proportion so your three sensors fire the same way they would for the real thing.

Long · "red"

Peaks in the yellow-red range. Carries most of the warmth in a scene.

Medium · "green"

Peaks in green. Your most sensitive channel, and where fine detail lives.

Short · "blue"

Peaks in blue-violet. The sparsest sensor, and the weakest in dim light.

01 · Screens · additive

On a screen, you add light to the dark

A pixel begins as black, emitting nothing. Behind it sit three tiny lights: red, green, and blue. Turn them up and the light adds together. Two at full make a bright secondary; all three at full make white.

A common surprise

Red plus green should make brown, right? In paint, yes. In light, red and green make yellow, because your red and green sensors both fire and your brain reads that combination as yellow. No yellow lamp is involved.

Demo 01 Add light, make a color
Drag R, G, B. Watch the three lights blend.
#7F7F7F
rgb(127, 127, 127)
R Red light127
G Green light127
B Blue light127
Neutral grayEqual red, green, and blue light always reads as gray. Push them apart to find a color.
R + G = yellow
R + B = magenta
G + B = cyan

Hold onto those three results. Yellow, magenta, and cyan, the colors a screen makes by combining its primaries, are exactly the three inks a printer starts with. The next section is the same wheel, read backwards.

02 · Print · subtractive

On paper, you take light away

Paper has no light of its own. White paper looks white because it reflects every wavelength back at you. Ink is a filter: each layer absorbs part of the light and returns less. Cyan absorbs red, magenta absorbs green, yellow absorbs blue. Stack all three and almost nothing escapes.

Demo 02 Add ink, take light away
Drag C, M, Y. Watch ink build toward black.
#FFFFFF
ink C0 M0 Y0 reflects 255, 255, 255
C Cyan ink0%
M Magenta ink0%
Y Yellow ink0%
Show real ink — imperfect pigments make a muddy near-black instead of true black
Bare paperNo ink at all. The paper reflects every wavelength, so you see white. Lay down ink to start subtracting.
Why CMYK has a fourth letter

In theory, cyan plus magenta plus yellow at full strength absorbs everything and gives black. Real pigments are imperfect, so all three together make a muddy dark brown and soak the paper. So printers add a dedicated black, the K in CMYK, for true blacks, crisp text, and far less ink.

The bridge

The two sets of primaries are mirror images

Screens build from red, green, blue. Print builds from cyan, magenta, yellow. These are not two unrelated lists. Each print primary is one screen primary taken away from white. Tap a color to see its opposite.

Red light Cyan ink
cyan = white − red

Cyan ink is whatever is left of white light once you remove red. That is why a printer needs cyan to control the red in an image, and why these two can never both be strong in the same spot.

Across the wheel: R↔C, G↔M, B↔Y. Opposite sides, same wheel.

03 · The mismatch

Why your screen and your printer disagree

A screen emits light, so it can reach colors that glow. Ink only redirects light that is already in the room, so it cannot. The full range a device can produce is its gamut, and screens have a wider one, especially for saturated blues, greens, and neons. Pick a color and watch what survives the trip to paper.

Below the line: print can match it Above the line: screen only Your color
On your screenRGB
#00B3FF
PrintedCMYK sim
#3F8FC0
Vibrancy lost in print0%
In gamut

This color sits inside what ink can reproduce. It should print close to what you see.

Hue197°
Saturation100%
Lightness50%
Try a tricky color

Simplified simulation for intuition, not a color-managed proof. Real results depend on the paper, the inks, and the printer profile. The map is drawn at one fixed lightness; the lightness slider still changes the two swatches.

In practice

What this means when you actually make things

The same image lives in two worlds. Here is how the light-versus-ink split shows up in everyday work.

Designing for screens

Screens work in RGB, almost always the sRGB standard. Use hex codes, lean on the brightest colors the screen allows, and trust that most modern displays will show them nearly the same.

Designing for print

Files print in CMYK. Expect saturated colors to come back calmer. Design in CMYK or soft-proof before you commit, so the dull surprise happens on your screen, not on the press run you already paid for.

Editing photos

That neon sign or electric sunset often sits outside the print gamut. Editors flag it as "out of gamut" and map it to the nearest ink color they can reach, which is why a print can look flatter than the glowing version on screen.

The black ink, K

K is the dedicated black. It gives deep shadows, sharp text, and uses less ink than stacking three colors. It is also why "rich black" in a design file mixes a little cyan, magenta, and yellow underneath the K for extra depth.

Check yourself

Six questions

Instant feedback, with the reason underneath. Retry as many times as you like.

Knowledge check Question 1 of 6
Why

Score 0 / 6