Studio Notan LEARNING HUB
Launch Studio
Color

Monochromatic

One hue at three lightnesses.

Monochromatic keeps one hue and varies only its lightness. With a color locked, the other two are the same color 25 points darker and 25 points lighter: a shade, the color itself, and a tint. It is the closest a harmony comes to the pure dark-and-light of a black-and-white notan.

What it does

Press “Mono” under “Harmonies”. Its diagram is three dots in a straight vertical line: no angle at all, only a scale.

With a color locked, it stays put. The next card in the order Front, Back, Ground takes the same hue and saturation 25 points darker, on a lightness scale of 0 to 100 (HSL lightness, which none of the sliders shows directly); the card after that takes it 25 points lighter.

  • Front locked: the Back is darker, the Ground lighter.
  • Back locked: the Ground is darker, the Front lighter.
  • Ground locked: the Front is darker, the Back lighter.

The steps stop at the ends of the scale. Lock a color lighter than 75 and its tint is plain white; lock one darker than 25 and its shade is plain black. For three distinct values, lock a color near the middle.

A locked black, white or gray has no hue to share, so Mono builds the other two around a stand-in hue chosen at random, darker and lighter, and leaves the locked color exactly as it was. Lock the black front of a new design and press “Mono”, and the back and ground become two values of one new color.

With nothing locked, all three colors share one random hue, but their saturation and brightness are drawn at random for each, with the ground kept pale. The unlocked version is one hue, not an even staircase; the front and back can come out close in value. Press the button twice (release, arm) for another draw, or lock a color for exact steps.

Why it works this way

A notan is a design of value: light against dark. Hue can help or distract, and Mono takes it out of the question entirely, leaving only what notan is about. It is the harmony to reach for when you want the shapes, not the colors, to carry the design.

The steps are measured in HSL lightness, where a color sits halfway between black and white at 50. Stepping 25 either side of a middle color gives three values spread evenly across that scale, with room left at both ends. The saturation is kept, so the shade and tint still look like the same color.

One honest limit: HSL lightness is arithmetic, not perception. A yellow at lightness 50 looks far lighter than a blue at 50. Within a single hue, though, the steps always go the right way, darker and lighter, which is all a monochrome notan needs.

The metaphor

“Monochrome” is Greek: monos, single, and chrōma, color. The harmony borrows the painter's vocabulary of tints, a color with white added, and shades, a color with black added. (A tone, in the same vocabulary, is a color with gray.) Stepping lightness up and down is the digital version of reaching for the white or the black on the palette.

The metaphor holds for the idea and breaks in the paint. Real white does not simply lighten a color; it cools and chalks it, so a red with white added turns into pink, which is a color of its own. Real black does not simply darken: black mixed into yellow gives an olive green, not a dark yellow. Paint's shades and tints wander in hue. The app's do not, because its steps change lightness alone and hold the hue fixed, something no paint box can do.

A history

In art

Chinese ink painting built a whole art on one color. A principle usually traced to the ninth-century writer Zhang Yanyuan holds that ink has five colors: not five hues, but five tones of the same black, from dense to pale, enough to render distance, volume and weather. Japanese sumi-e grew from the same tradition.

In Europe the equivalent was grisaille, painting in grays. On the outer wings of the Ghent Altarpiece, completed in 1432, Jan van Eyck painted Saint John the Baptist and Saint John the Evangelist in grays so convincingly that they read as stone statues in niches. Picasso's Blue Period, from 1901 to 1904, pushed a single hue into a mood. And the court ladies of Heian Japan wore monochrome as clothing: among the layered color schemes of their robes was kōbai no nioi, a red plum gradation in which a red layer gave way through four ever paler pinks.

Notan itself belongs here. When Arthur Wesley Dow published Composition in 1899, he taught notan through exercises in two values and then three: a dark, a light and a middle. A locked Mono palette is exactly that exercise, in one hue.

In printing

Much of printing's history is monochrome, and printers learned to wring range out of a single ink. The duotone prints a grayscale photograph twice, usually once in black and once in a second color, to deepen the shadows and warm or cool the whole image; it is a monochrome harmony made on press. Chiaroscuro woodcuts of the sixteenth century printed several blocks in shades of one color, using the white of the paper as the lightest value.

Some processes are monochrome by nature. In 1842 John Herschel invented the cyanotype, which prints in a single Prussian blue. From 1843 the botanist Anna Atkins used it to make Photographs of British Algae, laying seaweed directly on sensitized paper in sunlight. It is generally counted the first book illustrated with photographic images, and every page is one hue in many values.

In technology

Computing was monochrome before it was anything else. Terminals glowed in green or amber on black; the original Game Boy of 1989 showed four shades of a greenish gray, and its designers drew worlds within those four values. Grayscale remains the working mode of much imaging, from medical scans to the value studies painters make on their phones.

The lightness scale Studio Notan steps along comes from the HSL model, published by Joblove and Greenberg in 1978. Color scientists prefer measures built on perception, such as the lightness of CIELAB, where equal steps are meant to look equal. HSL is simpler and predictable, which is why it serves here: a step of 25 is always a step of 25.

In professional software

Monochromatic goes by several names: ‘Monochromatic’, ‘Shades’, tints and shades, a color ramp. Print has a plainer name for it, a one-color job, where one ink printed at different strengths gives the whole range.

  • Adobe Color. It has two rules. ‘Monochromatic’ varies both saturation and brightness around one hue; ‘Shades’ keeps hue and saturation and varies only brightness, the closer of the two to this app’s steps.
  • Adobe Illustrator. The ‘Color Guide’ has ‘Monochromatic’, ‘Monochromatic 2’ and ‘Shades’, and the panel can also lay out tints and shades of every color in a harmony. Apply a global or spot swatch and the ‘Color’ panel shows a single tint slider for it.
  • Adobe InDesign. ‘New Tint Swatch’ in the ‘Swatches’ panel menu saves a percentage of an existing swatch. Edit the parent color and every tint made from it follows.
  • Adobe Photoshop. On a grayscale image, ‘Image › Mode › Duotone’ offers ‘Monotone’: the picture printed in one ink of your choice. For a quick one-hue study on screen, a Hue/Saturation adjustment with ‘Colorize’ ticked does the same.

What carries over. Monochrome is the cheapest color in print. One spot ink at full strength, at 60 percent and at 30 gives a three-value notan for the price of one plate, and a tint of a spot ink is still that ink. A darker shade is not: it needs black or a second ink. Interface design uses the same idea as a ramp, each brand color stored as numbered steps from pale to dark. The pitfall is the ends of the scale. On press, very light tints can drop out and very dark ones fill in, so keep the steps well inside the range.

Try this

  1. Lock the Ground at a mid-lightness blue and press “Mono”. The front becomes a darker blue and the back a lighter one. Flip a few shapes: a notan in one hue.
  2. Now make the locked ground very pale and watch the back go to white.
  3. Lock the black front of a new design and press “Mono” to see the stand-in hue at work.

Going further

  • Analogous lets the hue move a little; Color harmonies explains all five.
  • Front, Back and Ground explain where each value will show.
  • Books: Arthur Wesley Dow, Composition; Josef Albers, Interaction of Color.

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

Try it in the studio