Studio Notan LEARNING HUB
Launch Studio
Color

Color harmonies

How the color-wheel harmonies choose your three colors.

A harmony is a rule for choosing colors by where they sit on a color wheel. Press one of the five buttons under “Harmonies” and your three colors, front, back and ground, are set in that relationship at once. With nothing locked, a harmony invents a whole palette each time you arm it; lock one color and the harmony is built around that color instead.

Three colors, evenly spaced

This is a triad, one of five harmonies. Each keeps its colors at a fixed angle on the color wheel, so the palette stays balanced.

What it does

The row under “Harmonies” on the Color tab (on a phone, in the color sheet) holds five buttons: “Mono”, “Analog”, “Comp”, “Split” and “Triad”, each with a small diagram of the shape its colors make on the wheel.

Pressing a button arms it: it stays highlighted, and your three colors are set in its relationship. Press it again to release it; the colors stay, but nothing holds them together any more.

What arming does depends on the padlocks on the three color cards.

  • Nothing locked. This is how the app starts. The harmony invents a palette: a random hue, the harmony's angles laid out from whichever card is selected, and a saturation and brightness drawn at random for each color. The ground is kept pale (saturation roughly 16 to 42 percent, brightness 88 to 100), because it is what the sheet is read against. A note says so: “Random harmony — click a lock to build on that color.” For another palette, press the button twice: once to release it, once to arm it again.
  • One color locked. The harmony is built around the locked color, which does not move. The other two are that color carried around the wheel: same saturation, same lightness, new hue. (Complementary and Monochromatic also step the lightness.) A locked black, white or gray has no hue to share, so the other two are built around a stand-in hue chosen at random, and the locked color stays exactly as it was.

An armed harmony keeps holding. Drag one color's hue and the other two turn with it by the same amount, like a rigid shape turned by one of its corners. A locked color is the one corner the harmony never moves: drag it and the other two turn with it, but drag either of the others and only that pair turns, leaving the locked color where it is. Change one color's saturation or brightness and the other two are left alone. Lock a different color while a harmony is armed and the other two are rebuilt around it. Unlocking repaints nothing.

Which color takes which place follows a fixed order, Front, Back, Ground and round again, starting from the locked color (or, with nothing locked, the selected one). Each harmony's chapter says what lands where.

A sixth harmony, the four-color tetrad, is in the app's color math but not offered: a notan has three colors, so one of the four always had nowhere to go.

Why it works this way

A paper notan has exactly three colors, so every harmony here is a rule for three. Each is a starting point, not a verdict: it hands you hues that belong together and leaves you to decide which is light and which is dark, which in a notan is most of the decision.

The invented palette exists because a new design starts black, black and white. A harmony built from black has no hue to work with, so the buttons used to look broken until you had moved a slider. The alternative, building round whichever color you touched last, was rejected as a guess that could quietly throw away a color you liked. A lock is how you say “keep this one”, and only one color can be locked, because a harmony is built round exactly one.

The painter's wheel is used because these harmonies are a painter's lesson. On a screen's hue wheel the color opposite red is cyan, and a student who picks blue and asks for its complement would be handed yellow. The lesson says orange. So the app reads each hue onto a red-yellow-blue wheel, turns it there, and reads it back.

An armed harmony turns as one piece because two of the five, split complementary and analogous, do not treat their three colors alike; rebuilding round whichever color you grabbed made the others jump.

The metaphor

“Harmony” is borrowed from music, and the loan is old. Isaac Newton sized the seven segments of his color circle after the intervals of a musical scale. Johannes Itten called combinations of colors chords: dyads, triads, tetrads, hexads.

The metaphor holds in one real way: some combinations feel settled and some restless, and trained eyes, like trained ears, tend to agree. It breaks at the foundations. A musical interval is a ratio of frequencies; an octave is a doubling you can measure. Color has nothing like that. The spectrum is a line, not a circle: the wheel only closes because the eye mixes red and violet into purples that match no single wavelength of light. Even “opposite” depends on which wheel you draw. A harmony is geometry on a diagram: useful, teachable, and not a law of nature.

A history

In art

Newton's circle appeared in Opticks in 1704, joining red to violet. Some decades later the English entomologist and engraver Moses Harris published The Natural System of Colours (usually dated 1766, though its dedication places it between 1769 and 1776), with a printed color wheel built from three “primitive” colors: red, yellow and blue. That scheme of three, rather than Newton's seven, is the one painters came to teach.

In 1810 Goethe's Theory of Colours argued that colors diametrically opposite on his circle call each other up in the eye, and treated harmony as something the eye itself demands. In 1839 the chemist Michel Eugène Chevreul, director of dyeing at the Gobelins tapestry works in Paris, published his law of simultaneous contrast and sorted color harmonies into two families: harmonies of analogy, from colors that are alike, and harmonies of contrast, from colors that are not. The same division still runs through the harmony rules of modern software: analogous and monochromatic on one side, complementary, split and triad on the other.

In 1961 Itten, who had taught at the Bauhaus from 1919 to 1923, published The Art of Color, with a twelve-part wheel and the rule that complementary pairs, and triads forming equilateral or isosceles triangles on it, are harmonious. Two years later Josef Albers's Interaction of Color showed that one color can look like two, depending on its neighbors. Itten gives you rules; Albers tells you to trust your eyes over them.

In printing

The red-yellow-blue wheel is also a printer's inheritance. In 1719 the painter and engraver Jacob Christoph Le Blon, working in London, was granted a patent for printing pictures from three mezzotint plates inked blue, yellow and red, printed one over another in register; his pamphlet Coloritto (1725) explained it. Three colors making many was, for him, a theory and a production line.

Printing also taught harmony as economy. Every ink is another plate and another pass through the press, so a jobbing printer's palette is part taste, part budget. Once designers could name an exact ink (the Pantone Matching System dates from 1963), a harmony chosen at a desk could be matched on a press anywhere.

In technology

In 1978 two papers in the same issue of Computer Graphics turned the wheel into coordinates: Alvy Ray Smith's HSV, and Joblove and Greenberg's HSL. Once hue is an angle, a harmony is arithmetic: add 180 for a complement, 120 and 240 for a triad. Adobe's web tool Kuler, previewed in November 2006 and later renamed Adobe Color, put a harmony wheel in a browser; Illustrator CS3's Color Guide (2007) offered 23 harmony rules.

The catch is that HSV's hue is a wheel of light, so its arithmetic gives light's answers. Studio Notan ties the two wheels together at the six colors both name, red, orange, yellow, green, blue and violet, and draws straight lines between them. The painter's wheel spends half its circle on the warm hues from red to green; the screen's spends a third.

In professional software

Design programs call these harmony rules, or color harmonies, and they all work the same way. You choose a base color and a rule, and the program places the other colors at fixed angles on a wheel. Then you adjust by eye.

  • Adobe Color. The color wheel at color.adobe.com offers ‘Analogous’, ‘Monochromatic’, ‘Triad’, ‘Complementary’, ‘Split Complementary’, ‘Double Split Complementary’, ‘Square’, ‘Compound’ and ‘Shades’, plus ‘Custom’ for no rule at all. Adobe works its harmonies out on a red-yellow-blue wheel, as Studio Notan does, so red’s complement is a green. A theme holds five colors, not three.
  • Adobe Illustrator. ‘Window › Color Guide’ builds a harmony from the current color, with more than twenty rules in its menu. Its button for editing the colors opens ‘Recolor Artwork’, where the harmony’s markers can be linked so that they turn around the wheel together, much like an armed harmony here.
  • Adobe Photoshop and InDesign. Harmonies usually arrive from outside. Save a theme from Adobe Color to a Creative Cloud library and it appears in the ‘Libraries’ panel, ready to add to your swatches.
  • Procreate. The ‘Harmony’ tab of the color panel offers ‘Complementary’, ‘Split Complementary’, ‘Analogous’, ‘Triadic’ and ‘Tetradic’. Move the main reticle and the others follow it.

What carries over. The lock is the base color. In every one of these programs you start from the one color you are sure of, a brand color or a paper you already own, and let the rule suggest the rest. Watch which wheel you are on. Adobe’s harmony tools use a painter’s wheel, but a plain hue slider turned 180° works on the wheel of light and gives red a cyan partner. And trim a five-color theme to three before it goes near a notan.

Try this

  1. With nothing locked, press “Triad”, then press it twice more (release, arm) and watch a new palette arrive each time.
  2. Lock the Ground, press “Comp”, then drag the ground's marker around the wheel. The other two colors turn with it.
  3. Arm “Triad” and switch “Color space” between RYB and HSV. In RYB the wheel is the painter's and the three spokes sit a third of the way around from each other; in HSV it is the light wheel, and the same three colors look lopsided.

Going further

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

Try it in the studio