HSL, HSV, and HSB: The Cylindrical Color Models

HSL, HSV, HSB, and HWB are easy to talk about because they turn RGB into dials. The hidden cost is that each dial means something different depending on the model. This workbench lets you move one coordinate set through all four systems, then asks the production questions: what does the swatch become, how stable is the ramp, how even is the lightness, and which model should own the next edit?

A monitor mixes three lights - red, green, and blue - so the most direct way to drive it is to name those three amounts. That is RGB, and it maps perfectly onto the hardware. The trouble is that the three numbers are device coordinates, not human ones. The triple (214, 92, 92) tells you nothing about whether the color is light or dark, vivid or muted, warm or cool, until you compute it in your head.

When people describe color in words, they almost never reach for primaries. They say "a deep teal," "a washed-out pink," "the same blue but brighter." Those three intuitions - which color, how pure, how bright - are exactly the three axes of the cylindrical models. HSL and HSV take the RGB cube and twist it into a cylinder so that one axis is the hue you can name, one is how saturated it is, and one is a brightness-like value you can raise or lower on its own.

Picture the RGB color cube standing on its black corner with white at the top. Tilt it so the black-to-white diagonal becomes vertical, then look down the axis: the six other corners - red, yellow, green, cyan, blue, magenta - fan out into a ring. That ring is the hue circle. Squash the projection into a smooth disc and stack discs along the vertical axis, and the cube becomes a cylinder. The three cylindrical coordinates are:

The shape that height axis carves out is the giveaway. HSV is a cone (sometimes drawn as a cylinder with a dark tip): the disc is full size at the top and shrinks to a single black point at the bottom. HSL is a double cone, or bicone: it pinches to black at the bottom and to white at the top, with the widest, most saturated ring in the middle. Hold that picture - it explains every behavioral difference between the two.

HSL stands for hue, saturation, lightness. Its defining trait is that L behaves symmetrically: L = 0% is always black, L = 100% is always white, and L = 50% is where the pure, fully-saturated hue lives. Saturation then says how far from a neutral gray of that same lightness the color sits.

This makes HSL pleasant for building tints and shades. Keep H and S fixed, push L up toward 100% and you get progressively paler tints; pull it down toward 0% and you get darker shades - the kind of swatch ramp a design system wants. It is also why HSL is the model CSS chose first: hsl(210 80% 45%) reads almost like a sentence.

HSV stands for hue, saturation, value - and HSB (hue, saturation, brightness) is the very same model under a different name, the one Adobe tools prefer. Here the third axis, V, measures how close the color is to the brightest light the display can give for that hue. V = 0% is black; V = 100% with full saturation is the most vivid version of the hue. Crucially, value alone never produces white - you only reach white by also pulling saturation down to zero at V = 100%.

That geometry mirrors how a painter or a screen actually behaves: turning the "brightness" up on a saturated red gives you a brighter, still-saturated red, not pink. This is why HSV is the model behind most classic color pickers - the big square-plus-hue-bar picker is an HSV slice, with saturation on one axis and value on the other.

The single most asked question about these models is "what is the difference?" The honest short answer: they share H, but their S and the third axis mean different things. A saturation of 100% in HSL is not the same number as 100% in HSV unless you are at the very top of HSV (V = 100%) or the exact middle of HSL (L = 50%). And the third axis diverges hard at the extremes.

Because hue is an angle, it is naturally drawn as a wheel - the artifact every color picker, harmony tool, and paint app puts front and center. The angle gives the hue; the distance from the center gives the saturation; a separate slider sets the value (or lightness). Two colors 180° apart are complementary; three colors 120° apart form a triad; small offsets give analogous schemes. All of color harmony is, at bottom, arithmetic on this one angle.

Both models start from the same three quantities computed on the normalized RGB triple (each channel scaled to 0–1): the channel maximum, the minimum, and their difference, the chroma C = max − min. Hue comes from which channel is on top and by how much; everything else follows.

The third axis is where they split. HSV's value is simply the maximum channel; its saturation is chroma relative to that maximum. HSL's lightness is the midpoint of max and min; its saturation is chroma relative to how far lightness is from the nearest end of the scale.

Going back from HSL or HSV to RGB inverts these. A clean way to write the reverse is the chroma form: recover chroma C, find a base color from the hue sector, then add a per-model offset m to lift it into place.

HWB - hue, whiteness, blackness - was proposed by Alvy Ray Smith in 1996 as an even more intuitive picker and was adopted into CSS Color 4 as hwb(). It keeps the same hue, then asks two plain questions: how much white is mixed in (W), and how much black (Bl). Pure hue is W = 0%, Bl = 0%. If W + Bl ≥ 100%, the hue washes out to a gray equal to W / (W + Bl).

It is the same cone geometry as HSV seen from a tint/shade angle, and it converts cleanly: whiteness is the channel minimum, blackness is one minus the channel maximum. Whether you prefer HWB is mostly taste - but it is now a first-class CSS citizen, so it is worth being able to read.

For all their intuitiveness, HSL and HSV carry a flaw that bites the moment you trust the numbers too much: they are not perceptually uniform. They were built from sRGB with simple algebra, with no model of human vision in the loop. Equal numeric steps do not produce equal visual steps.

None of this makes HSL or HSV wrong - it makes them the right tool for fast, human-readable adjustment and the wrong tool for measurement. Knowing the boundary is the whole skill.

The cylindrical models earn their keep anywhere a human or a small piece of code needs to manipulate color by intent rather than by primary. A few of the most common, durable uses:

A practical pattern worth stealing: author your base colors in HSL for readability, but run your contrast checks and your shade ramps through a perceptual space so the results are honest. Use each model for what it is good at.

Six questions on the cylindrical models. Instant feedback, no scores recorded - a wrong answer comes with a short explanation pointing you back to the right section.

These pieces sit directly upstream and downstream of the cylindrical models. The numbers reflect each article's position in the editorial roadmap of 113.