Maxwell – Color Mixer · Manual
1. Introduction
Maxwell is an interactive app for exploring additive and subtractive color mixing, observing emission spectra, and discovering the phenomenon of metamerism.
Named after James Clerk Maxwell, who in 1855 experimentally demonstrated that the human eye perceives all colors with just three types of receptors.
App Structure
The app has three sections, accessible via the sidebar (iPad/Mac) or the tab bar (iPhone):
- Mixing — Place color blobs on a canvas and watch them blend
- Light Sources — Explore light sources and build your own from Gaussian peaks
- Metamerism Gallery — Compare different light sources that produce the same perceived color
First Launch
A short onboarding introduces the three sections on first launch. You can skip it at any time and start experimenting right away.
Platforms
Maxwell is a universal app for Mac, iPad, and iPhone. The interaction is identical on all platforms — only the layout adapts to the screen size. On the Mac, there are additional keyboard shortcuts (e.g., Backspace to delete) and the system color panel for recoloring active blobs.
2. Color Mixing
The “Mixing” section is the heart of the app. Place color blobs on a canvas and watch how they blend.
Mixing Modes
Switch between two modes at the top left:
- Additive (Light): Colors add up. Red + Green = Yellow, Red + Green + Blue = White. The background is a dark canvas — you are projecting light onto it.
- Subtractive (Pigment): Colors absorb light. Cyan + Magenta = Blue, Cyan + Magenta + Yellow = Black. The background is paper — you are painting pigments on it.
You can switch between modes at any time. The blobs stay in place and are instantly recalculated using the new mixing method.
Color Palette
The toolbar shows two groups of color circles:
- Primary colors of the active mode (larger): RGB in additive, CMY in subtractive mode.
- Secondary colors of the other mode (smaller, slightly transparent): Always visible so you can also use colors from the other mode.
Tap a color circle to select it as the color for the next blob. If a blob is active, it will be deactivated — presets always only set the color for the next blob.
Placing and Editing Blobs
- New blob: Tap/click on an empty area of the canvas. The blob appears in the currently selected color.
- Move a blob: Drag an existing blob to a new position.
- Activate a blob: Tap on an existing blob. It becomes active and pulses slightly. On the Mac, the system color panel opens automatically, allowing you to change its color live.
- Recolor a blob (Mac): When a blob is active, the macOS color panel opens automatically. Any color change in the panel is immediately applied to the blob. The panel closes when the blob is deactivated.
- Remove a blob: Long-press a blob (approx. 0.5 s) or press Backspace when a blob is active.
- Deactivate a blob: Tap on an empty area or select a preset color.
Blob Size
The slider between the color selection and the trash button controls the size of all blobs simultaneously (existing and new). The default is 20% of the smaller canvas dimension. The range is 5% to 50%.
Clear Canvas
The trash button at the top right removes all blobs at once.
3. Light Source Lab
In the “Light Sources” section, you explore the emission spectra of various light sources and build your own from Gaussian peaks.
Layout
The view is split into two panes:
- Left: List of light sources (presets and custom)
- Right: Editor for the selected light source
Included Presets
Eight presets are included — all real light sources:
| Preset | Description |
|---|---|
| RGB Display | Three narrow peaks (B 460, G 530, R 620 nm) — like real subpixels |
| Daylight | Broad, even spectrum (D65-like) |
| Incandescent | Warm broadband (~2700 K), lots of red, little blue |
| Candle | Very warm (~1800 K), almost no blue |
| Warm White LED | Blue LED chip + yellow phosphor (~3000 K) |
| Cool White LED | Stronger blue peak + phosphor (~6500 K) |
| Fluorescent Tube | Five narrow lines — typical CFL spectrum |
| Sodium Lamp | A single peak at 589 nm — can only produce yellow |
The presets are freely editable. Your changes are transient — re-selecting a preset from the list resets it to its original state.
Custom Light Sources
- Create a new light source: Click the
+button at the bottom left. - Delete a light source: Select it and click the
-button, or swipe left in the list (iPhone/iPad).
Custom light sources are saved automatically and also appear in the Metamerism Gallery.
The Editor
The editor displays from top to bottom:
1. Name and Description
Free text field for the name. For presets, a short description of the light source appears below.
2. Emission Spectrum with Control Points
The spectrum (380–700 nm) shows the current emission as a bar chart. Interactive dots sit on top — one per Gaussian peak:
- Drag horizontally: Shift the wavelength (λ), snapped to a 5 nm grid.
- Drag vertically: Change the intensity.
- Ctrl + drag vertically (Mac): Change the width (σ).
- Click a dot: Activates it (larger, colored border).
- Backspace or
−button: Deletes the active dot. - Click on empty spectrum area: New peak at that position.
+button in the header: New peak at 550 nm.
The ring around each dot shows the current width (σ).
3. Width Slider (σ)
Below the spectrum: a slider for the active peak’s width (1–80 nm). Grayed out when no peak is active. Alternatively, the width can be changed with Ctrl+drag directly in the spectrum.
4. Cone Excitation
Shows the emission spectrum multiplied by the sensitivity of the three cone types (L, M, S) as semi-transparent filled curves. The area under each curve corresponds to the total excitation of that cone type. The cone sensitivity curves themselves are drawn as dashed reference lines (Red = L, Green = M, Blue = S).
Below: numerical L/M/S values — these three numbers determine the perceived color.
5. Perceived Color
A large color swatch shows the color your eye would perceive from this spectrum. The calculation uses a proper LMS→RGB matrix conversion, calibrated to the display’s primary colors.
4. Metamerism Gallery
The gallery shows multiple light sources side by side and demonstrates metamerism — the phenomenon where physically different spectra produce the same perceived color.
Target Color Bar
At the top, choose a target color from colored circles:
- Yellow, White, Magenta, Cyan, Red — predefined colors
Each light source is scaled so that its peak intensities reproduce the chosen target color as closely as possible. The spectrum shape visibly changes — only the peak heights are adjusted, not the wavelengths or widths.
Light Source Cards
Below, a grid displays four cards per row. Each card shows:
- Name and short description of the light source
- Spectrum — the emission distribution as a colored bar chart
- Perceived color — the color your eye would perceive from this spectrum
All cards have the same height so the perceived color swatches are visually comparable side by side.
“Cannot produce this color”
When a light source physically cannot reproduce the target color (e.g., the sodium lamp cannot produce blue, the candle cannot produce blue), this is shown honestly. This is itself a valuable lesson: not every light source can produce every color.
Experiencing Metamerism
The key effect:
- Choose a target color (e.g., Yellow).
- Observe: Multiple cards show the same perceived color at the bottom.
- Look up: The spectra are completely different.
That is metamerism. Your eye cannot tell whether the yellow comes from three narrow peaks (display), a broad plateau (incandescent), or a single peak (sodium lamp) — because your three cone types produce the same signals in all cases.
Jump to Light Source Lab
Click on a card to jump directly to the Light Source Lab. The light source is loaded there with the scaled peak intensities — exactly as they were set in the gallery for the chosen target color. This lets you examine the scaling in detail and continue experimenting.
Custom Light Sources
Light sources you created in the Light Source Lab automatically appear in the gallery. This lets you compare your own creations with the eight presets.
5. Background
Why Does Red + Green = Yellow?
Additive color mixing works like light: you superimpose light beams. Red and green light together stimulate your L and M cones equally — and your brain interprets that as yellow. Actual yellow light (e.g., 580 nm) stimulates the same cones at a similar ratio. To your eye, both are the same — a phenomenon shown in the app as metamerism.
Why Does Cyan + Magenta + Yellow = Black?
Subtractive color mixing works like ink on paper: each color absorbs part of the white light. Cyan absorbs red, magenta absorbs green, yellow absorbs blue. All three together absorb everything — no light remains.
In practice, the result is more of a dark brown, which is why printers add black ink (CMYK instead of CMY).
What is Metamerism?
Metamerism means: two physically different spectra produce the same perceived color. The yellow on your display consists of red and green light (two peaks in the spectrum). The yellow from a sodium lamp is monochromatic at 589 nm (one peak). Yet both look identically yellow — because your L and M cones produce the same signals in both cases.
Metamerism is not a defect of the eye. It is the reason displays, printers, and cameras work at all. Three subpixels (R, G, B) suffice because the eye cannot resolve more.
In the Metamerism Gallery, you can observe this effect directly: choose a target color and compare the spectra of the eight light sources.
Why Exactly Three Primary Colors?
Because your eye has exactly three cone types:
- L cones (long-wavelength, peak ~570 nm) — respond most strongly to reddish light
- M cones (medium-wavelength, peak ~540 nm) — respond most strongly to greenish light
- S cones (short-wavelength, peak ~445 nm) — respond most strongly to bluish light
Every color you see is a triplet (L, M, S) — three numbers. With three well-chosen primary colors, you can reproduce most of these triplets. In the Light Source Lab, you can observe the cone excitation for each light source in real time.
Animals with four cone types (e.g., many birds) see colors invisible to us and would need four primary colors.
The Eight Light Source Presets
| Light Source | Spectral Character | Notable Feature |
|---|---|---|
| RGB Display | 3 narrow peaks (B/G/R) | How every screen works |
| Daylight | Broad, even (D65) | Evolutionary reference for the eye |
| Incandescent | Broad, warm (~2700 K) | Blackbody radiation |
| Candle | Very warm (~1800 K) | Almost no blue |
| Warm White LED | Blue peak + phosphor | Modern everyday light |
| Cool White LED | Stronger blue peak | Daylight-like, but different |
| Fluorescent Tube | 5 lines (CFL) | Poor color rendering |
| Sodium Lamp | 1 line at 589 nm | Can only produce yellow |
How Accurate is This App?
Maxwell uses deliberate simplifications:
- Subtractive mixing: RGB multiplication instead of a full Kubelka-Munk model for pigments.
- Spectra: Gaussian profiles per primary color instead of measured subpixel spectra.
- Cone data: Simplified version of the Stockman & Sharpe (2000) Cone Fundamentals.
- Perceived color calculation: LMS→RGB via an inverted matrix of the display’s primary colors — physically correct, but tuned to the simplified Gaussian model.
These simplifications are physically plausible and sufficient for didactic purposes. The key claims — especially regarding metamerism and trichromacy — are correct.
Who Was James Clerk Maxwell?
James Clerk Maxwell (Edinburgh 1831 – Cambridge 1879) is best known for the Maxwell equations of electrodynamics. His contribution to color science is less famous but equally fundamental:
- 1855: Demonstrated with a rotating color disc that any color can be mixed from three primaries (trichromacy).
- 1861: Produced the first permanent color photograph (a tartan ribbon, captured through red, green, and blue filters).
Without Maxwell, there would be no displays, no digital cameras, and no color printing — at least not as we know them.