The color wheel shows every hue around a circle, pale at the center and fullest at the rim, with your three colors on it as lettered markers: F for Front, B for Back and G for Ground. Drag a marker to change that color’s hue and saturation. The small slider under the selected marker sets its brightness. In RYB the wheel is a painter’s wheel; in the other color spaces it is a wheel of light.
What it does
The disc is a map of hue and saturation. Going around the disc changes the hue; moving from the center to the rim goes from white to the fullest version of that hue. The whole disc is drawn at full brightness.
- Markers. Each color sits on the disc as a dot in its own color, lettered F, B or G in black or white, whichever reads better. A white spoke joins it to the center. The selected color wears a colored ring. To select a color, press its marker or click its card.
- Dragging. Drag a marker to move that color. Press anywhere else on the disc and the selected color jumps there and follows your finger or pointer. You can drag past the rim: the color stays at full saturation and follows you around.
- Brightness. Under the selected marker, or above it when there is no room below, is a small slider from 0 to 100. Its track runs from black to the color at full strength. It is lettered V when the cards show HSV and B otherwise. It is an ordinary slider, so the arrow keys move it once it has focus.
- The arrows. ◀ and ▶ under the wheel turn the three colors around the three roles. ▶ (Rotate colors forward) moves Front’s color to Back, Back’s to Ground and Ground’s to Front; ◀ turns them the other way. Paint recipes travel with their colors.
Two wheels. When the cards show RYB, the disc is a painter’s wheel. Yellow is at the top, orange upper right, red lower right, violet at the bottom, blue lower left and green upper left. Red faces green, yellow faces violet and blue faces orange. In CMYK, HSV and RGB it is a wheel of light: going clockwise from yellow at the top come red, magenta, blue at the bottom, cyan and green, with red facing cyan. On both wheels the hue number increases counterclockwise. The colors are the same; only where each hue sits changes, so the markers move when you switch.
The harmony buttons always build on the painter’s wheel, whichever wheel is showing. That is why a triad’s spokes look evenly spaced in RYB and lopsided in the other three.
Why it works this way
A notan has three colors, and their relationships (opposite, neighboring, the same hue at different strengths) are easiest to see as positions. The wheel turns an abstract relationship into a shape you can see and drag.
The disc can show only two of a color’s three dimensions, so the third, brightness, gets its own slider. The slider follows the marker because brightness belongs to that color, not to the wheel.
There are two wheels because light and paint disagree about opposites. On a wheel of light, the opposite of red is cyan, and that is true: red and cyan light together make white. On a painter’s wheel, the opposite of red is green, and that is also true in its own world: a painter dulls a red with green. The app draws the wheel your sliders are speaking. The painter’s wheel is tied to the light wheel at six hues both of them name, red, orange, yellow, green, blue and violet, with straight lines between. The painter’s wheel gives the warm half more room: red to green is half of it, but only a third of the light wheel.
The arrows exist because in a notan the roles matter as much as the colors. The same three colors as face, reverse and ground make three different designs, and the arrows let you try all three in two clicks.
The metaphor
The wheel is a metaphor that has been made literal. Light has no circle: the spectrum is a line, from long red wavelengths to short violet ones. To close it into a ring you must add colors that are not in the spectrum at all, the purples and magentas, which the eye sees when red and blue light arrive together. The circle is a fact about the eye, not about light.
It holds for likeness and contrast: neighbors look related, opposites clash or balance. It breaks on three points. Which colors count as opposite depends on which wheel you use. Equal angles do not look like equal differences. And a disc drawn at full brightness hides the fact that the brightest yellow is nearly white while the brightest blue is dark. The distance between F and G on the disc tells you nothing about how well they will separate as light and dark.
A history
In art
Isaac Newton drew one of the first color circles, and the most influential, in his Opticks of 1704. He bent the spectrum into a ring of seven colors, sized its segments to the intervals of a musical scale, and worked out the color of a mixture of lights as a kind of center of gravity, with white at the center. Later in the eighteenth century Moses Harris drew wheels built around red, yellow and blue. Goethe’s Theory of Colours (1810) arranged its wheel so that each color faced the one the eye summons after staring at it. Michel-Eugène Chevreul, director of dyeing at the Gobelins tapestry works, published a wheel of 72 hues in 1839 while explaining why neighboring colors change one another. His ideas reached the Neo-Impressionists, Seurat among them. In 1961 Johannes Itten, who had taught color at the Bauhaus in the 1920s, published a twelve-part wheel built on yellow, red and blue. It is still the wheel many art students meet first.
In printing
On press, the wheel that matters is the light wheel. The process inks are cyan, magenta and yellow, and their overlaps make red, green and blue. Much color correction is a move across the wheel: to take a red cast out of a picture, a printer adds cyan, its opposite; a green cast is cured with magenta and a blue cast with yellow. A printer’s complementaries are the light wheel’s, not the painter’s, and the two sets of teaching still sit uneasily together.
In technology
HSV, devised in the mid-1970s, made hue an angle and turned the wheel into a control. By the 1990s pickers built on hue, some of them round, were common in operating systems and design programs. In 2006 Adobe launched Kuler, renamed Adobe Color in 2014, where color harmonies were drawn as shapes on a wheel around a base color. That idea is close to this app’s harmonies. Color science keeps the wheel too: in perceptual models such as CIE LCh and OKLCh, hue is still an angle, measured on a circle where equal steps are designed to look more equal.
In professional software
Professional color wheels do two jobs, as this one does: pickers use the wheel to choose one color, and harmony tools use it to plan several. What transfers from Studio Notan is reading relationships as positions, opposite, neighboring or evenly spaced, and knowing which wheel you are looking at.
- Adobe Color. The website, color.adobe.com, places five colors on a wheel and moves them together by a harmony rule such as ‘Analogous’, ‘Complementary’, ‘Triad’ or ‘Square’. Its wheel is laid out as an artist’s wheel, with red facing green, as on this app’s RYB wheel.
- Adobe Illustrator. ‘Edit › Edit Colors › Recolor Artwork’ shows the colors of a selection as markers on a wheel. While the harmony colors are linked, dragging one turns the rest with it, as this app’s markers do when a harmony is on; unlink them to move one alone. The ‘Color Guide’ panel suggests harmonies from the current color.
- Adobe Photoshop. The ‘Color’ panel (F6) can show a wheel: choose ‘Color Wheel’ from the panel menu in place of the default ‘Hue Cube’. It is a wheel of light, with red facing cyan, and it picks one color at a time.
- Procreate. The ‘Harmony’ view of the color panel puts linked dots on a disc for schemes from ‘Complementary’ to ‘Tetradic’. Drag the main dot and the others follow.
What carries over. Plan relationships on the wheel, then judge light and dark by eye or in gray, because every one of these wheels hides brightness. And check which wheel you are on before you trust a complementary pair: on an artist’s wheel red faces green, on a wheel of light it faces cyan. A harmony copied from one kind of wheel will look different when it is rebuilt on the other.
Try this
- Switch Color space between RYB and HSV and watch the markers slide to new places while the colors stay the same.
- Drag the G marker to the center of the disc. The Ground loses its saturation and becomes white, or gray if its brightness is below 100.
- Press ▶ three times. Each press gives a different notan from the same three colors; the third brings you back where you started.
Going further
The model the disc is drawn in is in HSV, and the painter’s wheel belongs to RYB: mixing paint. The shapes the harmonies make on the wheel are in Color harmonies, starting with Complementary and Triadic.
Books: Johann Wolfgang von Goethe, Theory of Colours; Michel-Eugène Chevreul, The Principles of Harmony and Contrast of Colours; Johannes Itten, The Art of Color.