Studio Notan LEARNING HUB
Launch Studio
Color

Analogous

Neighbors on the wheel, close in hue.

Analogous takes a color and its two neighbors, 30° either side on the painter's wheel: from blue, blue-green and blue-violet; from red, red-orange and red-violet. The three sit close together, so the palette is calm and of a piece, and any contrast in the notan has to come from light and dark.

What it does

Press “Analog” under “Harmonies”. Its diagram is three dots on a short arc at the top of the wheel, joined like a shallow roof.

With a color locked, that color stays put and sits in the middle of the three. The next card in the order Front, Back, Ground is turned 30° one way around the wheel (toward yellow, from red), and the card after it 30° the other way. Both keep the locked color's saturation and lightness.

  • Front locked: the Back at +30°, the Ground at −30°.
  • Back locked: the Ground at +30°, the Front at −30°.
  • Ground locked: the Front at +30°, the Back at −30°.

With nothing locked, the selected card gets a random hue and the other two land either side of it, with saturation and brightness drawn at random and the ground kept pale. Here the randomness helps: it usually hands you some difference in lightness that a locked analogous palette will not.

The app's starting colors already hide an analogous palette. The front and back begin black and the ground white, but each carries a hue you cannot see yet: a blue, a blue-violet and a sky blue, close neighbors. Raise the saturation or brightness of any of them and you land on a color designed to sit with the others.

Why it works this way

Neighboring hues read as one family, as the colors of one material or one light: a single autumn leaf, a sunset, a brick wall. That gives a notan a quiet, unified surface, where the shapes carry the design and color does not compete with them.

The price is that hue stops doing any of the work. A notan is a design of light against dark, and three neighboring colors at one lightness make a design you can barely read. Locked, analogous deliberately leaves lightness alone, because the right answer depends on your design: darken the back so the flips stand out, or lighten the ground so the sheet does. While the harmony is armed you can change any color's brightness freely; it touches only that color.

The 30° is one step on a twelve-step painter's wheel, the size of wheel Itten taught with. The three colors are immediate neighbors: a hue and the two tertiary colors beside it.

The metaphor

“Analogous” comes from the Greek analogos, proportionate or corresponding, and in everyday English it means alike in some respect. The picture is of neighbors, or of a family resemblance: three colors that are clearly related without being the same.

The metaphor holds for hue, and fails the moment you look at anything else. Neighbors on a wheel can be far apart in lightness: yellow and yellow-orange are neighbors, but yellow is far lighter than most of its relatives, and a violet beside a blue-violet can look almost black next to a pale sky blue. The wheel is also not evenly spaced for the eye. On the painter's wheel Studio Notan uses, a step of 30° from red lands 15° away on the screen's hue scale in one direction and 40° away in the other; from blue, the steps are 60° and 20°. Equal on the diagram, unequal on the screen. Neighborliness is a property of the map you draw, not of the colors themselves.

A history

In art

When Chevreul sorted color harmonies in 1839, working from his years directing the dyes at the Gobelins tapestry works, he divided them into two great families, and one was the harmonies of analogy: colors alike in hue or in value, arranged so that their likeness shows. The other family, contrast, gets more attention in color classes, but analogy is the older and quieter habit of the eye.

Painting is full of it. Picasso's Rose Period, from about 1904 to 1906, is a palette of pinks, oranges and earthy reds after the cold blues of the years before. Mark Rothko's paintings for the Seagram Building, made in 1958 and 1959, stack maroons, dark reds and near-blacks so close in hue that the edges seem to breathe. In both, the calm of close hues is the point; the drama comes from somewhere else.

In printing

Printing found its own way to analogous color: the split fountain, also called the rainbow roll. The printer pours two or more inks side by side in the press's ink trough, and as the rollers turn, the inks blend where they meet into a band of intermediate colors. Every point of such a gradient is an analogous harmony with the points beside it. In the late nineteenth and early twentieth centuries it was the cheapest way to get colorful posters and bills from a single pass through the press, and in the 1960s it became a signature of psychedelic concert posters.

Japanese woodblock printers had a subtler version, bokashi: a gradation made by inking the block unevenly, so that a color fades into paper or into another color within a single impression. The deepening blues of the skies and water in Hiroshige's landscapes are the best-known examples.

In technology

On screens, the analogous question is really the question of gradients: how to get from one color to a neighbor without passing through anything ugly. Blend two colors by averaging their red, green and blue numbers and a pair of complements meets in a muddy, grayish middle; neighbors stay clean, because their path is short. Modern web color gives designers control over the route. The CSS Color Module Level 4 lets a gradient in a hue-based space travel around the wheel the shorter or the longer way, or always increasing or decreasing in hue. And perceptual color spaces such as OKLab, published by Björn Ottosson in 2020, aim to make equal steps look equal, which neither the paint wheel nor the screen's hue wheel quite manages.

Studio Notan does its analogous steps on the paint wheel, read back to screen color through straight lines between six named colors. That is a choice for teaching rather than for perceptual evenness: the harmony gives the neighbors a painter would name.

In professional software

Analogous is called analogous nearly everywhere. In professional work it is less often three separate swatches than a range: a gradient, a blend, a family of related colors for a background.

  • Adobe Color. ‘Analogous’ fans five colors across a short arc of its painter’s wheel. The site can also extract a gradient from a photograph: a sky or a leaf usually gives a run of neighboring hues.
  • Adobe Illustrator. The ‘Color Guide’ has ‘Analogous’ and ‘Analogous 2’. To fill in the steps between two neighbors, ‘Object › Blend › Make’ (⌥⌘B, or Alt+Ctrl+B on Windows) builds shapes in between, and ‘Blend Options’ sets how many.
  • Adobe Photoshop. The Gradient tool’s ‘Method’ setting chooses how the colors in between are worked out. ‘Perceptual’ aims for steps that look even; ‘Classic’ keeps the older blend.
  • Procreate. ‘Analogous’ in the ‘Harmony’ tab sets three reticles close together, so the palette stays warm or cool throughout.

What carries over. Analogous colors are what designers use for backgrounds, gradients and the quiet parts of a brand, where color should support the content rather than compete with it. The pitfall is the one this chapter warns of. Close hues at one lightness do not separate, so text or a key shape set on an analogous ground needs a clear step of light and dark. Run the pair through a contrast checker before you trust your eye.

Try this

  1. Lock the Front at a strong blue and press “Analog”. The back and ground become blue-green and blue-violet at the same lightness. Cut and flip a shape: it is hard to read.
  2. Now lower the back's brightness until the flips stand out clearly. The harmony stays armed; the other two do not move.
  3. Try the same on the warm side of the wheel, from a red-orange, and compare how different the two families feel.

Going further

Every chapter is about something you can do in the studio, free, in the browser.

Try it in the studio