HSV describes a color by three plain questions. Which hue is it? That is H, an angle around the color circle from 0 to 360. How pure is it? That is S, saturation, from 0 to 100. How bright is it? That is V, value, from 0 to 100. HSV is the model the color wheel is drawn in, and the one the app uses to hold every color behind the scenes.
What it does
With HSV chosen under Color space, each card shows three sliders, H, S and V. Hover the HSV button and it reads Hue / Saturation / Brightness. The third slider is lettered V, for value, because B already means Blue in RYB and RGB, and Back on the wheel. In HSV the wheel’s brightness control says V too; in the other models it says B.
- H is an angle. Its track is a rainbow: red at 0, yellow at 60, green at 120, cyan at 180, blue at 240, magenta at 300, and red again at 360.
- S runs from gray to the fullest version of the hue. Its track goes from the gray at your color’s brightness to the pure hue at that brightness.
- V runs from black to the color at its brightest. Its track goes from black to your hue and saturation at full strength.
The color wheel is HSV laid flat: hue is the angle around the disc, saturation the distance from the center. Brightness, the one thing a flat disc cannot show, has its own small slider under the selected marker.
HSV has holes in it. A gray has no hue, and black has neither hue nor saturation. The app keeps each color’s hue anyway. Drag S to 0 and the color turns gray, but H keeps its number; drag S back up and the same hue returns. A gray typed as a hex code, or reached through the CMYK or RGB sliders, keeps the hue the color already had, so its marker on the wheel does not jump to red.
Why it works this way
HSV was invented because the screen’s own language, amounts of red, green and blue light, is hard to think in. Ask someone to make a dusty olive in RGB and watch them struggle. HSV splits a color into the questions people actually ask, and each slider answers one without disturbing the others.
The V slider speaks to the heart of a notan, which is designed in light and dark. But V is not lightness as the eye sees it. Pure yellow and pure blue both have V 100. Yellow looks nearly as light as white; blue looks nearly as dark as a shadow. V means only “as bright as the screen can make this hue”. When you are judging light against dark, trust your eyes. Better still, look at the colors in gray. The Trace panel’s Luminance setting under Gray from weights the three lights as the eye does, with green counting about ten times as much as blue.
The app stores colors in HSV because the wheel and the sliders both need hue and saturation, and because only HSV can remember the hue of a black. That is why the black sheet you start with already carries a hue. On the starting palette (Reset, then Colors, brings it back), raise Front’s V and a deep blue rises out of the black, not a gray.
The metaphor
HSV borrows the painter’s working vocabulary. Painters speak of a hue, of tints (a hue with white added), shades (with black added) and tones (with gray added). HSV maps closely onto those moves: lower S for a tint, lower V for a shade, both for a tone. Its inventor pictured it as a hexcone, a six-sided cone standing on its point: black at the tip, white at the center of the flat top, and the pure hues around the top edge.
The metaphor holds for navigation: hue is a place on a circle and saturation is a distance from gray. It breaks as soon as you compare colors across the circle. Equal numbers are not equal to the eye; yellow at V 100 is far lighter than blue at V 100. The spacing of hues is the screen’s, not the painter’s. On the light wheel, red’s opposite is cyan, not green. And V 100 is not “white”: it is only the brightest version of a hue.
A history
In art
The three dimensions belonged to painters long before engineers named them. Albert Munsell, a painter and teacher in Boston, published A Color Notation in 1905. It described every color by hue, value and chroma, each on a measured scale; his Atlas followed in 1915. Value, the word his system used for light and dark, is still the painter’s word.
In 1899 Arthur Wesley Dow, drawing on the Japanese art he had studied as assistant to Ernest Fenollosa, published Composition. He taught design through three elements: line, notan and color. Dow described notan as the massing of tones of different value. It is the idea this app is named after, and in HSV terms it is almost entirely V.
Painters have long worked in value alone. Grisaille, painting in grays, was used for underpainting and for whole pictures. Jan van Eyck painted grisaille figures, like carved statues, on the outer wings of the Ghent Altarpiece. A grisaille is a picture with the hue and saturation sliders at zero.
In printing
The link to printing is thin: printers do not specify colors by hue, saturation and brightness but by ink. The nearest craft is tone. A halftone exists to turn value into dots. In four-color work with heavy gray replacement, the black plate carries much of the light and dark while cyan, magenta and yellow carry the hue, which is roughly HSV’s split between V and H. The warning above matters most in print: a picture printed in one ink shows each color’s real lightness, not its V. Two colors of equal V can print as very different grays.
In technology
HSV was born at Xerox PARC in the mid-1970s. Alvy Ray Smith, working with Richard Shoup on SuperPaint, one of the first color paint programs, devised it so that artists could pick screen colors in their own terms. He described it formally in 1978 in the SIGGRAPH journal Computer Graphics, in a paper called “Color Gamut Transform Pairs”. The same issue carried the closely related HSL model of George Joblove and Donald Greenberg of Cornell. In 1979 Tektronix built HSL into its graphics terminals. Smith later co-founded Pixar.
By the 1990s hue-based pickers were in nearly every program. Photoshop’s picker labels the model HSB, B for brightness. Web stylesheets offer the related hsl() and hwb() but not HSV itself. Perceptual models such as OKLCh also describe hue as an angle, but measure lightness the way the eye does, so that equal numbers look more equally light.
In professional software
Most programs call this model HSB, for hue, saturation and brightness. HSV and HSB are the same model under two names. HSL, hue, saturation and lightness, is a different model that shares the H, and knowing which of the two a picker uses saves a good deal of confusion.
- Adobe Photoshop. The ‘Color Picker’ lists H, S and B above the RGB numbers; click the button beside one to put it on the tall slider. H is in degrees, S and B in percent, as here. The ‘Hue/Saturation’ adjustment, ⌘U (Ctrl+U), is different: its third slider is ‘Lightness’, and full lightness is white.
- Adobe Illustrator. Choose HSB from the ‘Color’ panel menu for the same three sliders, with hue in degrees.
- Figma. The color picker’s model menu offers Hex, RGB, CSS, HSL and HSB. Choose HSB to match this chapter. Choose HSL and the same color reads with a different S, because the two models measure saturation differently.
- Procreate. ‘Classic’ gives hue, saturation and brightness sliders with a square picker, and ‘Value’ shows the HSB numbers beside RGB and hex.
- Autodesk AutoCAD. The ‘True Color’ tab of the ‘Select Color’ dialog offers HSL, not HSV, beside RGB. In HSL a pure hue sits halfway up the luminance scale, and the top of the scale is white.
- Blender. By default the picker is a wheel of hue and saturation with a value slider beside it. Its numbers can be RGB or HSV, or HSL if you choose an HSL picker in the Preferences, all written from 0 to 1 rather than in degrees and percent.
What carries over. The three questions, which hue, how pure, how bright, work in all these pickers. The pitfall is the third letter: B and V are the same, L is not. In HSL full lightness is always white, so numbers copied from an HSB field into an HSL field give another color. And in all of them brightness is not how light a color looks: judge light against dark by eye, or in gray.
Try this
- Pick a vivid color, switch to HSV and drag S to 0. The color goes gray, but H keeps its number. Drag S back up and the same hue returns.
- Set Front to H 60, S 100, V 100 (yellow) and Back to H 240, S 100, V 100 (blue). Same V, yet one reads as light and the other as dark. For a notan, that difference is the design.
- Move H slowly and watch the Front marker on the wheel travel around the rim; move S and it slides in toward the white center.
Going further
The disc HSV is drawn on is in Color wheel. For judging light and dark in gray, see Gray from. The harmony that varies only V is Monochromatic.
Books: Arthur Wesley Dow, Composition; Albert Munsell, A Color Notation; Alvy Ray Smith, A Biography of the Pixel.