Short answer
HSL and HSV are rearrangements of RGB into a hue angle plus two other numbers — saturation and lightness, or saturation and value — published at SIGGRAPH in 1978 so that people could pick and adjust colours more intuitively than with raw RGB. They are simple geometric transforms of the RGB cube, not models of vision, so their lightness and value ignore how light each hue actually looks: pure yellow and pure blue both have HSL lightness 50%.
Convert any colour into this system with the colour converter
In 1978 Alvy Ray Smith described the HSV 'hexcone' transform, and in the same SIGGRAPH proceedings George Joblove and Donald Greenberg described colour spaces for computer graphics including the double-cone model that HSL follows. Both tackled the same problem: artists using early paint systems found it hard to think in amounts of red, green and blue, and wanted to choose a hue, then make it paler, darker or greyer. Both transforms tilt the RGB cube onto its grey diagonal and measure hue as an angle around it, which is why HSL and HSV share the same hue value for a given RGB colour.
In HSV, value is simply the largest of the three RGB channels, and saturation measures how far the smallest channel is below it; every fully saturated colour and white have value 100%. In HSL, lightness is the average of the largest and smallest channels, so fully saturated colours sit at 50% and white at 100%, and saturation is defined so that the space forms a double cone. HSV suits a picker where you choose a pure hue and then darken it (the value slider mimics adding black); HSL suits one where 50% is the 'pure' colour and lightness moves towards black or white.
Because both models treat red, green and blue channels as equally weighted, they ignore that green contributes most to perceived lightness and blue least. The table on this page shows six fully saturated sRGB colours: HSL calls all of them 50% light and HSV all 100% value, yet their CIELAB L* ranges from about 32 for blue to about 97 for yellow, and OKLab L from about 0.45 to 0.97. Picking 'the same lightness' in HSL therefore produces palettes where text contrast and visual weight vary wildly by hue. HSL saturation has a related flaw: a very pale colour can report 100% saturation while having almost no chroma.
They remain useful where speed and familiarity matter more than accuracy: colour pickers, quick hue rotation, simple generative effects, and CSS where hsl() is supported everywhere. They are also exact and reversible transforms of RGB, so nothing is lost by converting. What they should not be used for is anything that depends on perceived lightness or colourfulness: accessible palettes, data-visualisation scales, or 'make this 10% lighter' across a range of hues. For those, OKLCH or CIE LCh provide the same hue-plus-two-numbers convenience with dimensions that relate to vision.
| Colour | HSL lightness | HSV value | CIELAB L* (0–100) | OKLab L (0–1) |
|---|---|---|---|---|
| Red (#ff0000) | 50.0% | 100.0% | 53.2 | 0.628 |
| Yellow (#ffff00) | 50.0% | 100.0% | 97.1 | 0.968 |
| Green (#00ff00) | 50.0% | 100.0% | 87.7 | 0.866 |
| Cyan (#00ffff) | 50.0% | 100.0% | 91.1 | 0.905 |
| Blue (#0000ff) | 50.0% | 100.0% | 32.3 | 0.452 |
| Magenta (#ff00ff) | 50.0% | 100.0% | 60.3 | 0.702 |
Why: Equal HSL steps are unequal perceptual steps, differently for each hue.
Fix: Generate tints in OKLCH or CIE LCh.
Why: Yellow and green are much lighter than blue and red at the same HSL value.
Fix: Choose each colour by measured contrast, not by HSL lightness.
Each statement is labelled by kind — established fact, a standard’s requirement, observed market data, a convention, or Colourwise’s own interpretation or analysis — with the strength of the evidence behind it.
FactStrong evidence
Alvy Ray Smith's 'Color gamut transform pairs', which defined the HSV transform, and Joblove and Greenberg's 'Color spaces for computer graphics' were both published in the proceedings of SIGGRAPH 1978.
Source: Color gamut transform pairs (A. R. Smith, SIGGRAPH 1978); Color spaces for computer graphics (G. H. Joblove and D. Greenberg, SIGGRAPH 1978)
Colourwise analysisStrong evidence
Fully saturated sRGB primaries and secondaries all have HSL lightness 50% and HSV value 100%, while their CIELAB L* ranges from about 32 (blue) to about 97 (yellow).
Based on: Computed by Colourwise with its converters; see the table on this page.
Source: CIE 015:2018 Colorimetry, 4th edition; International Electrotechnical Commission (IEC) webstore and catalogue; Color gamut transform pairs (A. R. Smith, SIGGRAPH 1978)
StandardStrong evidence
CSS defines hsl() colours as sRGB, so an hsl() value is a different way of writing an sRGB colour, not a separate colour space.
Source: CSS Color Module Level 4
Reviewed 29 September 2026. Colourwise summarises its sources in its own words and does not reproduce standards text or proprietary colour data. Spotted an error? Tell us.