# HSL and HSV
**HSL** (hue, saturation, lightness) and **HSV** (hue, saturation, value, also known as HSB, hue, saturation, brightness) are two alternative representations of the [RGB color model](https://www.edgepedia.org/rgb-color-model), published at SIGGRAPH in 1978 so that people could pick and adjust colors more intuitively than with raw RGB values[1](https://colourwise.app/colour-systems/hsl-and-hsv). Instead of describing a color as a mix of red, green, and blue light, each model gives a hue angle on a color wheel plus two other numbers: saturation with lightness in HSL, or saturation with value in HSV[2](https://techterms.com/definition/hsl) • [3](https://gmao.gsfc.nasa.gov/media/gmaoftp/jkolassa/Matlab_scripts/colorspace.html).
| Key fact | Detail |
|---|---|
| Origin | Published at SIGGRAPH in 1978 as rearrangements of RGB for intuitive color picking[1](https://colourwise.app/colour-systems/hsl-and-hsv) |
| Geometry | Simple geometric transforms of the RGB cube, not models of human vision[1](https://colourwise.app/colour-systems/hsl-and-hsv) |
| Shared hue | HSL and HSV use the same definition of hue; the other two components differ[4](https://www.bioconductor.org/help/course-materials/2017/CSAMA/lectures/4-thursday/lecture-13-graphics-and-visualisation/lecture-13-viz-huber-compressed.pdf) |
| Hue wheel | Red is 0 (also 360) degrees, green 120, blue 240[5](https://www.w3.org/wiki/CSS/Properties/color/HSL) |
| Endpoints | In HSV, 100% value is the pure color; in HSL, 100% lightness is white and 0% is black[6](https://codekit.shore.qzz.io/blog/color-format-guide/) • [7](https://www.smashingmagazine.com/2021/07/hsl-colors-css/) |
| CSS status | `hsl()` is part of CSS; HSV is not, so `hsv()` cannot be written in a stylesheet[6](https://codekit.shore.qzz.io/blog/color-format-guide/) |
| Reversibility | Conversion is exact and reversible: an RGB to HSL to RGB round trip returns the original bytes within rounding[1](https://colourwise.app/colour-systems/hsl-and-hsv) |
## What the components mean
Hue is the color's position on the wheel, measured as an angle. By definition red is 0 (equivalently 360) degrees, and the other colors are spread around the circle, so green is 120 and blue is 240[5](https://www.w3.org/wiki/CSS/Properties/color/HSL). [Complementary colors](https://www.edgepedia.org/complementary-colors) sit on the same diameter of the wheel, so they can be produced by adding or subtracting 180 degrees from the hue[8](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/color_value/hsl).
Saturation runs from 0%, completely unsaturated, to 100%, fully saturated[7](https://www.smashingmagazine.com/2021/07/hsl-colors-css/). The third component is where the two models diverge. In HSL, lightness runs from 0% (black) to 100% (white), with pure colors at 50%[7](https://www.smashingmagazine.com/2021/07/hsl-colors-css/). In HSV, value runs from black at 0% to the pure color at 100%[6](https://codekit.shore.qzz.io/blog/color-format-guide/). Both models share the same definition of hue, but the other components differ[4](https://www.bioconductor.org/help/course-materials/2017/CSAMA/lectures/4-thursday/lecture-13-graphics-and-visualisation/lecture-13-viz-huber-compressed.pdf).
Geometrically, RGB is a rectangular color space with three axes, while HSL is a cylindrical color space in which colors are accessed with a hue angle and coordinates on two axes[9](https://developer.chrome.com/docs/css-ui/high-definition-css-color-guide?hl=en). If the RGB cube is tipped onto its black corner, the line through the cube from black to white defines the lightness axis[10](https://opticsoflife.org/pdfs/tech/colorconversion.pdf). Related models include HSV, HSI (hue, saturation, intensity), and HCI (hue, chroma, intensity)[10](https://opticsoflife.org/pdfs/tech/colorconversion.pdf).
## Conversion and use in software
Conversion between RGB and the two cylindrical models is a matter of simple formulas. Given red, green, and blue coordinates in the range 0 to 1, the same hue computation serves both HSL and HSV, and separate formulas give saturation and lightness or value[4](https://www.bioconductor.org/help/course-materials/2017/CSAMA/lectures/4-thursday/lecture-13-graphics-and-visualisation/lecture-13-viz-huber-compressed.pdf). Because the transforms are exact and reversible, nothing is lost by converting; they are just different coordinates on the same gamut[1](https://colourwise.app/colour-systems/hsl-and-hsv).
**In CSS**, the functional notation is `hsl(` followed by the hue in degrees and saturation and lightness as percentages[5](https://www.w3.org/wiki/CSS/Properties/color/HSL). Around 2010, browsers began supporting `hsl()` colors, and the legacy comma-separated syntax of `hsl()` and `hsla()` is retained for web compatibility alongside the modern space-separated form[9](https://developer.chrome.com/docs/css-ui/high-definition-css-color-guide?hl=en) • [11](https://www.w3.org/TR/2026/CRD-css-color-4-20261009/). HSV is not part of the CSS color specification[6](https://codekit.shore.qzz.io/blog/color-format-guide/).
**In design tools**, HSV is the model behind most classic color pickers: the familiar square-plus-hue-bar picker is an HSV slice, with saturation on one axis and value on the other[12](https://auricartisan.com/library/learn/articles/2026-06-01-hsl-hsv-hsb-color-models). Most design tools, including Photoshop, Figma, and Sketch, use HSV internally because it maps cleanly to how the picker interface works: pick a hue, then adjust saturation and brightness on a two-dimensional square[6](https://codekit.shore.qzz.io/blog/color-format-guide/). HSV color spaces are also often used by artists, who specify a hue angle, a chroma level, and a lightness level[13](https://learn.microsoft.com/en-us/windows/win32/wcs/hsv-color-spaces).
## Practical strengths in CSS workflows
Compared with RGB, HSL has the benefit of being much more intuitive: one can estimate a desired color and then adjust it.[5](https://www.w3.org/wiki/CSS/Properties/color/HSL) A hex code is hard to interpret from reading it, and altering a hex color usually requires opening a color picker; with HSL, changing one number changes one attribute[7](https://www.smashingmagazine.com/2021/07/hsl-colors-css/).
Common workflows exploit this. Keeping the hue and saturation fixed while varying lightness produces a set of shades of one color, useful for design systems and for a lighter shade of a navigation color[7](https://www.smashingmagazine.com/2021/07/hsl-colors-css/). Combining HSL with CSS variables lets a hover state darken a button by changing only the lightness value, and lets an entire theme change by editing a single hue degree[7](https://www.smashingmagazine.com/2021/07/hsl-colors-css/). HSL is also used for hue rotation, reducing saturation, and creating systematic lightness variants[14](https://colormapped.com/guides/hsl-color-model/).
## The lightness problem
Both models give the red, green, and blue channels identical weight, and thus overlook the fact that green has the greatest effect on how light a color appears, while blue has the smallest.[1](https://colourwise.app/colour-systems/hsl-and-hsv) The six fully saturated sRGB primaries and secondaries all have HSL lightness 50% and HSV value 100%, yet their measured perceptual lightness varies widely: CIELAB L* is about 97.1 for yellow, 87.7 for green, 91.1 for cyan, 53.2 for red, 60.3 for magenta, and 32.3 for blue, with OKLab L ranging from about 0.45 to 0.97[1](https://colourwise.app/colour-systems/hsl-and-hsv). Picking "the same lightness" in HSL therefore produces palettes in which text contrast and visual weight vary wildly by hue[1](https://colourwise.app/colour-systems/hsl-and-hsv).
HSL saturation has a related flaw: a very pale color can report 100% saturation while having almost no chroma[1](https://colourwise.app/colour-systems/hsl-and-hsv).
More broadly, despite their ease of use and ubiquity in computer interfaces, HSL and HSV are discontinuous and not perceptually uniform[15](https://www.frontiersin.org/journals/earth-science/articles/10.3389/feart.2019.00274/full). Comparative evaluations find that HSV, HSL, and HSI are quicker to compute and more intuitive, though perceptually less accurate, while CIELAB and CIELUV offer better uniformity but require more computation[16](https://link.springer.com/article/10.1007/s42452-025-08192-7).
## When each model fits
HSL and HSV remain useful where speed and familiarity matter more than accuracy: color pickers, quick hue rotation, simple generative effects, and CSS, where `hsl()` is supported everywhere[1](https://colourwise.app/colour-systems/hsl-and-hsv). In such cases, where tasks like accessible palettes, data-visualization scales, or lightening a set of hues uniformly by 10% hinge on perceived lightness or [colorfulness](https://www.edgepedia.org/colorfulness), OKLCH and CIE LCh offer the same convenient format of a hue plus two other numbers, but their dimensions are tied to how we actually see.[1](https://colourwise.app/colour-systems/hsl-and-hsv) CSS Color Module Level 4 accordingly adds device-independent spaces, including CIE Lab and LCH and Oklab and OkLCh, alongside the existing `hsl()`[11](https://www.w3.org/TR/2026/CRD-css-color-4-20261009/).
## References
1. [HSL and HSV, Colourwise](https://colourwise.app/colour-systems/hsl-and-hsv)
2. [HSL (Hue, Saturation, Lightness) Definition, TechTerms](https://techterms.com/definition/hsl)
3. [Colorspace Transforms, NASA GMAO](https://gmao.gsfc.nasa.gov/media/gmaoftp/jkolassa/Matlab_scripts/colorspace.html)
4. [Conversion from RGB to HSL or HSV, lecture notes, W. Huber, CSAMA 2017, Bioconductor](https://www.bioconductor.org/help/course-materials/2017/CSAMA/lectures/4-thursday/lecture-13-graphics-and-visualisation/lecture-13-viz-huber-compressed.pdf)
5. [CSS/Properties/color/HSL, W3C Wiki](https://www.w3.org/wiki/CSS/Properties/color/HSL)
6. [HEX, RGB, HSL, HSV: Understanding Color Formats for Web Development, CodeKit](https://codekit.shore.qzz.io/blog/color-format-guide/)
7. [Using HSL Colors In CSS, Smashing Magazine (Ahmad Shadeed, 2021)](https://www.smashingmagazine.com/2021/07/hsl-colors-css/)
8. [hsl() CSS function, MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/color_value/hsl)
9. [High definition CSS color guide, Chrome for Developers](https://developer.chrome.com/docs/css-ui/high-definition-css-color-guide?hl=en)
10. [HSL (Hue Saturation Lightness), color conversion notes, opticsoflife.org](https://opticsoflife.org/pdfs/tech/colorconversion.pdf)
11. [CSS Color Module Level 4, W3C Candidate Recommendation Draft](https://www.w3.org/TR/2026/CRD-css-color-4-20261009/)
12. [HSL, HSV, and HSB: The Cylindrical Color Models Explained, Auric Artisan](https://auricartisan.com/library/learn/articles/2026-06-01-hsl-hsv-hsb-color-models)
13. [HSV Color Spaces, Win32 apps, Microsoft Learn](https://learn.microsoft.com/en-us/windows/win32/wcs/hsv-color-spaces)
14. [HSL Color Model: Hue, Saturation and Lightness, Colormapped](https://colormapped.com/guides/hsl-color-model/)
15. [Well-Posed Geoscientific Visualization Through Interactive Color Mapping, Frontiers in Earth Science (2019)](https://www.frontiersin.org/journals/earth-science/articles/10.3389/feart.2019.00274/full)
16. [Color models in image processing: a review and experimental comparison, Discover Applied Sciences (2025)](https://link.springer.com/article/10.1007/s42452-025-08192-7)
---
*Topic: Encyclopedia › Physical world and mathematics › Physics › Classical physics › Waves and optics › Color: perception, colorimetry, and color science*
*Initially written Sep 17, 2026 · Reviewed: Sep 30, 2026; Oct 21, 2026 · Edited: Sep 30, 2026; Oct 21, 2026; Oct 25, 2026 · Last review: Oct 21, 2026*
*Copyright 2026 EdgeChat AI, a subsidiary of Biostate AI.*
License: Edgepedia Community License 1.0, https://www.edgepedia.org/edgepedia/license