The color theory
behind Place Itten

Johannes Itten & the Bauhaus

Johannes Itten (1888–1967) was a Swiss painter and one of the first masters at the Bauhaus, where he ran the famous preliminary course. His book The Art of Color (1961) laid out a practical grammar of color: a wheel to organize the hues, and a set of seven contrasts describing the distinct ways two or more colors can act on each other. Place Itten borrows both — the wheel supplies the colors, the contrasts decide how they're paired.

The 12-hue wheel (Farbkreis)

Itten's wheel starts from the three primaries — yellow, red, blue — mixes them into three secondaries, and fills the gaps with six tertiaries for twelve hues in all. Two facts about this ordering drive everything downstream: colors directly across the wheel (positions i and i + 6) are complementaries, and the wheel divides into a warm half (yellow → red-violet) and a cool half (violet → yellow-green).

The seven contrasts

Each contrast is a different relationship between colors. Place Itten implements all seven as palette generators; the live image beside each one is produced by this service right now. Force any of them with ?contrast=.

1 · Contrast of hue

The undiluted power of pure, saturated colors. Place Itten takes an evenly spaced triad from the wheel (positions i, i+4, i+8), so no hue dominates — at its purest, yellow / red / blue.

?contrast=hue

2 · Light-dark contrast

The interplay of brightness. A single hue is stepped through five values, from a 60% tint toward white down to a 60% shade toward black.

?contrast=light-dark

3 · Cold-warm contrast

Temperature. A color from the warm half of the wheel is set against one from the cool half — Itten called this the most expressive of the contrasts.

?contrast=cold-warm

4 · Complementary contrast

A hue and its exact opposite across the wheel (i and i+6). Mixed they cancel to gray; side by side they push each other to maximum vividness.

?contrast=complementary

5 · Simultaneous contrast

An optical illusion. A vivid hue sits beside a neutral gray nudged 12% toward its complement; the eye then makes the gray shimmer with a color that isn't physically there.

?contrast=simultaneous

6 · Saturation contrast

Intensity, not hue. The same color appears vivid versus muted — the muted version mixed 70% toward its own perceptual gray.

?contrast=saturation

7 · Contrast of extension (quantity)

How much area each color gets. Itten gave complementaries harmonious proportions — the brighter a color, the smaller its share. Place Itten weights each field by 1 / light value, so brilliant yellow takes a sliver while deep violet fills the rest.

?contrast=extension

From theory to PNG

Every request walks the same deterministic pipeline. The same URL always produces byte-identical pixels, which is what makes the images usable as stable mockup placeholders.

1. A seed is taken from ?seed=, or derived from the requested dimensions when none is given.
2. The seed is hashed (xmur3) into a 32-bit number that feeds a tiny seeded PRNG (mulberry32) — deterministic randomness.
3. That PRNG (or your ?contrast= override) picks one of the seven contrasts.
4. The contrast's generator pulls hues from the 12-hue wheel and returns a palette: a list of colors plus area weights.
5. A second, independent PRNG stream chooses a Bauhaus layout — weighted split, stripes, a Mondrian-style grid, a diagonal, or floating shapes. (The extension contrast always uses the weighted split, so its area ratios stay visible.)
6. pureimage rasterizes the composition and encodes it to a PNG — pure JavaScript, no native dependencies, happy on a serverless function.