cyan / magenta

An independent study in color

Not arithmetic. Color.

One plus one is approximately three. Two colors. A third possibility.

Two colors. A third possibility.
The interesting part is in between.

Move a plate. See what happens.

The working surface

The first encounterOverprint: #31B9C8 and #E64F83; their digital multiply intersection is #2C3967. Plate two is shifted 0 units horizontally and 0 vertically, at -18 degrees. Both plates are visible.CYAN / MAGENTAOVERPRINT / 01STUDY 001TWO PLATES / ONE SURFACEX +0 Y +0

Drag to move the second plate. With this surface focused, use arrow keys to move it, or Shift and an arrow for a larger step. Escape cancels an active drag. The registration sliders provide the same controls. Use the plate buttons to inspect each color separately.

Plates
CM—001The first encounter

02 / A few places to begin

Follow a different thread.

Four starting points, not four answers.
Each one is yours to change.

03 / A small observation

Same color.
Different company.

Both small squares are #AE8FA5. Exactly the same color. Change their surroundings above, then look again.

Identical centers / different surroundingsNo tricks.

A moment worth keeping

Give it a name.

The colors, the position, the happy accident. Saved in this browser.

From experiment to something useful

Out into the world.

The first encounterNot a screenshot of an interface.
The actual composition, ready for your next idea.

The study travels in the link.
Nothing is uploaded.

Your collection

A record of looking.

Kept in this browser. Export a copy to keep elsewhere.

A Cyan / Magenta JSON file, including studies from the original workspace.

The first encounter

Drag, or use the arrow keys. Shift moves further.

The field notes

A reason to look twice.

A color on its own is a specification. Put it next to another, and it becomes a relationship.

01 / The experiment

Move the second plate. Give it a quarter turn. Hide a color to understand its part in the whole. The overprint looks for new shapes; interference looks for new patterns. Spectrum takes two routes between your colors. Type asks whether they can carry a sentence.

The squares at the bottom have identical color values. Their different surroundings are the entire experiment. Use “Reveal the connection” to join them with that same color.

02 / What the color means

Overprint is a digital sRGB multiply: each pair of color channels is multiplied, then divided by 255. Its intersection is drawn as explicit vector geometry, not a transparent layer over the paper. Interference uses the same rule. Neither is a simulation of physical ink, pigment, or a particular printing process.

Spectrum interpolates in sRGB or Björn Ottosson’s OKLab. The continuous gradient uses 65 evenly spaced samples plus the exact end stops. Coincident stops make a hard edge. Colors outside sRGB are channel-clipped. The displayed swatches and exported SVG use those same calculations.

Type uses the WCAG 2.2 contrast calculation for the two opaque ink colors: 4.5:1 for normal text, 3:1 for large text. Large means at least 24 CSS pixels regular or about 18.7 bold. Thresholds use the unrounded result. This is a test of the pair, not an accessibility certification of an entire design. Texture is omitted from the type specimen so its colors remain exact.

03 / Built to leave with you

One HTML file. System fonts, inline SVG, and plain JavaScript. No libraries, analytics, accounts, external assets, or requests to a server. The reference links above are optional and need an internet connection.

Changes and your collection are stored in this browser when storage is available. They are not a backup. JSON preserves an editable study; HTML preserves the whole instrument, your current study, and the collection. Download the HTML and open it directly to work offline. Visiting the hosted address again while offline is not guaranteed; this file does not install a service worker.

SVG stays editable. PNG is rendered at 2400 × 1632 pixels. Exported type uses system fonts, so its exact letterforms can differ on another device. All rendering and export happen here.

04 / A keyboard is enough

Move plate 02 (surface focused)
← ↑ ↓ →
Move ten units at a time
Shift + arrow
Cancel a drag in progress
Esc
Undo / redo a study change
Ctrl / ⌘ + Z / Shift + Z
Choose a focused tab
← → / Home / End
Close a dialog
Esc

Text fields keep their own editing shortcuts. Every drag has a slider equivalent. Motion only starts on request, pauses when the page is hidden, and is unavailable when reduced motion is requested.