Studio Notan LEARNING HUB
Launch Studio
Color

Color space

The four ways the color cards can describe a color.

The Color space switch chooses the language the three color cards speak: RYB (paint), CMYK (printing ink), HSV (hue, saturation and brightness) or RGB (the screen’s light). Switching never changes a color by itself. It changes which numbers you use to reach one, and which kind of color wheel you see.

What it does

Beside the Color space heading on the Color tab sits a row of four buttons. On a phone the same row is in the color sheet that opens from the round color chip. Press one and all three cards, Front, Back and Ground, relabel their sliders at once:

  • RYB: five sliders, Red, Yellow, Blue, White and Black, each 0 to 100. They are parts of paint, mixed as pigments mix. This is where the app starts.
  • CMYK: four sliders, Cyan, Magenta, Yellow and Black, each 0 to 100 percent of ink.
  • HSV: three sliders. H is a hue angle from 0 to 360 degrees; S (saturation) and V (value, or brightness) run from 0 to 100.
  • RGB: three sliders, Red, Green and Blue, each 0 to 255: the screen’s own lights.

Rows a model does not need are put out of the way. Hover a button for its full name. Each slider has a number box beside it: type an exact value and press Enter, or click elsewhere, to apply it. Escape abandons the edit. A number out of range is pulled back to the nearest one allowed.

Each slider’s track is painted as a ramp: every color you would get at every position of that slider, with the others held still. You can aim at a color instead of hunting for it.

Two other things follow the switch. In RYB the color wheel is drawn as a painter’s wheel; in the other three it is a wheel of light. The letter on the wheel’s brightness control reads V in HSV and B in the rest. The hex code under each color’s name does not change, because the color does not change.

Why it works this way

A color is one thing; a color model is a way of writing it down. The app keeps each color in one place, and the cards translate it into whichever language you have chosen. That is why you can flip between CMYK, HSV and RGB as often as you like without the color drifting: #3366CC reads as C 75, M 50, Y 0, K 20 in CMYK and comes back as the same #3366CC.

RYB is the exception, and a deliberate one. Many recipes of paint make the same color, so there is no single recipe to read back from a color. The paint sliders are a way of making a color rather than a reading of it, and the recipe is kept beside the color. If a color arrives some other way and the five paints cannot make it exactly, the card says Nearest mix.

Why four? Each one answers a different question a notan maker asks:

  • RYB: what would I mix? A notan is made of paper, and colored paper gets its color from pigments and dyes.
  • CMYK: what would a printer print? Notans end up on posters, cards and pages.
  • HSV: which hue is it, how intense, how light? The last question is the notan question.
  • RGB: what is the screen actually doing? This is the only one of the four that describes the device in front of you.

They are listed from the most material to the least: paint, ink, a description made for people, and finally bare light.

The metaphor

The word “space” is itself a metaphor, and a productive one. It treats colors as places in a room: every color has a position, near colors are neighbors, and there are directions you can travel in, toward blue, toward gray, toward dark. That picture works because human color vision has three kinds of cone cell, so for most people three numbers are enough to pin a color down. It is why HSV and RGB have three sliders each.

The metaphor holds for finding and naming. It breaks in two places. First, the room is warped: equal steps in the numbers do not look like equal steps to the eye, and each model bends the room differently. RGB is a cube; HSV is a cone. Second, CMYK and RYB have more sliders than there are dimensions. Four inks or five paints describing a three-dimensional thing means that many different settings land in the same place. That redundancy is exactly why a paint recipe cannot be recovered from a color.

A better everyday comparison might be map projections. Mercator and a polar projection draw the same globe. Each keeps something true and distorts something else, and a navigator picks the one that suits the question. The color cards work the same way.

A history

In art

For most of history painters did not need a color space. They had pigments, each a material with its own price, source and temper. The urge to arrange all colors in order came later and mostly from scholars. Isaac Newton bent the spectrum into a circle in his Opticks of 1704. In 1810 the painter Philipp Otto Runge published a color sphere with white and black at its poles and the pure hues around its equator, one of the earliest attempts to give every color a place in three dimensions.

The American painter and teacher Albert Munsell went further. In A Color Notation (1905) he described every color by three measured scales, hue, value and chroma, and his Atlas of 1915 turned the scales into painted charts. Munsell wanted students to be able to name a color as precisely as a musician names a note.

Then came the counter-argument. In Interaction of Color (1963), Josef Albers showed again and again that the same paint looks different on different grounds. Numbers fix a color; they do not fix what you see. Both lessons apply to a notan, where three colors are always seen against each other.

In printing

Printing split early into two traditions. In the first, every color is its own ink. Japanese color woodblock prints, which flourished from the 1760s, cut a separate block for each flat color. Pantone’s numbered inks, launched in 1963, carry the same idea into modern presses: these are spot colors. In the second tradition, every color is built from a few primaries laid over one another. Jacob Christoph Le Blon was granted a royal patent in England in 1719 for printing pictures from three plates, red, yellow and blue. His method is the ancestor of four-color process printing, CMYK.

A paper notan belongs to the first tradition: three flat colors, each one exactly itself. Describing it in process inks is a translation, and it is worth knowing when you are translating.

In technology

The first standard to link measured light to the colors people see, a color space in the strict sense, was published by the CIE, the International Commission on Illumination, in 1931. It was built from color-matching experiments in which observers matched test colors with mixtures of three lights. Everything since stands on it. In the 1970s computer graphics researchers invented HSV and its cousin HSL, to give people who were not engineers a way to choose screen colors. Photoshop added a CMYK mode in 1991. In 1993 eight companies formed the International Color Consortium to write the profiles that translate color between devices. In 1996 Hewlett-Packard and Microsoft proposed sRGB, a standard meaning for the numbers a monitor is sent; it became an international standard in 1999, and it is still what the web assumes. A picker that switches between models, like this one, is the software descendant of Munsell’s atlas: many doors into the same room.

In professional software

Every professional program has a switch like this one, usually called a color mode. What transfers from Studio Notan is the idea underneath it: a color is one thing, and a mode is a way of writing it down.

  • Adobe Illustrator. The ‘Color’ panel (F6) has a panel menu of modes: Grayscale, RGB, HSB, CMYK and Web Safe RGB. They change the sliders you work with, as the Color space switch does. The document has a color mode of its own, set with ‘File › Document Color Mode’, which decides what every color in the file is stored as.
  • Adobe Photoshop. The ‘Color Picker’, opened from the foreground color in the toolbar, shows one color as HSB, RGB, Lab and CMYK numbers side by side. ‘Image › Mode’ is a different kind of switch: choosing ‘CMYK Color’ or ‘Grayscale’ there converts every pixel, and converting back does not recover what was lost.
  • Adobe InDesign. Each swatch has a ‘Color Type’, Process or Spot, and a ‘Color Mode’ such as CMYK, RGB or Lab. When a document is separated for print, process colors come out as CMYK whatever mode defined them.
  • Autodesk AutoCAD. The COLOR command opens the ‘Select Color’ dialog, with three tabs: ‘Index Color’, the 255 numbered colors of the AutoCAD Color Index; ‘True Color’, set by HSL or RGB; and ‘Color Books’, named colors such as Pantone’s. The index number often matters more than the color, because a plot style table can turn each number into a line weight on paper.
  • Cricut Design Space and LightBurn. In cutting software a color is often an instruction. Design Space sends each color in a project to its own mat, and each color in LightBurn’s palette is a layer with its own cut settings.

What carries over. Choose the model that answers your question: HSB to choose, CMYK to talk to a printer, RGB or hex to talk to a screen. Watch for the two kinds of switch. A panel’s mode, like the Color space switch here, changes only the numbers you read. A document’s mode changes the colors, so set it before you begin: RGB for screens, CMYK for print.

Try this

  1. Choose a color on the Front card, then press RYB, CMYK, HSV and RGB in turn. Watch the numbers change and the swatch stay put. The hex code under the name never moves.
  2. In RYB, type #00FFFF into a card’s hex field. Screen cyan is more vivid than any mix of these five paints, so the sliders show the nearest recipe, mostly white with a little yellow and blue. Nearest mix appears; click it to take the paint’s version of the color.
  3. Switch between RYB and HSV and keep an eye on the wheel. The markers move around the disc although no color has changed. The chapter on the wheel explains why.

Going further

Each language in turn: RYB: mixing paint, CMYK: printing ink, HSV, RGB: light, and the code that stays the same through all four, Hex color codes. The two wheels are in Color wheel.

Books: Josef Albers, Interaction of Color; John Gage, Colour and Culture; Philip Ball, Bright Earth: The Invention of Colour.

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

Try it in the studio