toolhq.io

All posts
4 min readby Jameel Haider

HSL vs HSV color models

HSL and HSV both start with the same hue wheel and both promise to be more intuitive than raw RGB, so people often assume they are the same thing with different letters. They are not. The third component means something different in each, and that difference shows up most sharply at the light and dark ends of the range.

The shared idea

Both models arrange color in a cylinder. Hue is the angle around the wheel, from 0 to 360 degrees, where red, green, and blue sit at 0, 120, and 240. Saturation is how far the color is from gray. The models agree on hue and share the name saturation, though they compute it differently. The disagreement is entirely in the third axis.

  • HSL uses Lightness, where 0 is black, 1 is white, and 0.5 is the most vivid version of the hue.
  • HSV uses Value (sometimes called Brightness, so HSB), where 0 is black and 1 is the brightest, most saturated version of the hue. There is no built in path to white.

Why they differ at the extremes

The clearest way to see the difference is to look at what full saturation and maximum third axis produce.

HSL  hue=0  sat=100%  light=50%  -> pure red
HSL  hue=0  sat=100%  light=100% -> white

HSV  hue=0  sat=100%  value=100% -> pure red
HSV  hue=0  sat=100%  value=50%  -> dark red

In HSL, pushing lightness to its maximum always gives white, no matter the hue or saturation, and pushing it to the minimum always gives black. The vivid color lives in the middle. In HSV, maximum value gives the pure vivid color, and you never reach white by raising value alone; you reach white by also dropping saturation to zero. Black sits at value 0 in both models.

This is why a lightness slider and a value slider behave so differently near the top. Raising HSL lightness washes a color toward white; raising HSV value brightens it toward its most saturated form.

When each is the intuitive choice

Neither model is correct in an absolute sense; each fits a different mental task.

  • HSV fits picking a color from scratch. You choose a hue, then set how vivid and how bright it is. Many graphics applications use an HSV style square with a hue strip because it matches how people think about selecting a paint.
  • HSL fits reasoning about tints and shades. Because lightness is symmetric around a vivid midpoint, HSL makes it natural to build a palette of lighter and darker variants of one hue by moving lightness up and down. It also maps cleanly to CSS, where hsl() is a first class syntax.

You can convert a color and watch all three of HEX, RGB, and HSL update together in the Color Converter & Contrast Checker, which runs locally so your values never leave the browser. For a model built for perceptual uniformity rather than these older cylinders, see OKLCH and modern CSS colors.

The practical takeaway: HSL and HSV share a hue wheel but split on the third axis. Use HSV to pick a single vivid color and HSL to build lighter and darker variants of one, and expect them to diverge most as you approach white.