HSL

HSL
Name	HSL
Caption	Hue, Saturation, Lightness model representation
Type	Color model
Introduced	1970s–1990s
Components	Hue, Saturation, Lightness
Related	HSV, CIELAB, RGB, CMYK, HCL

HSL

HSL is a cylindrical-coordinate representation of color defined by three components: hue, saturation, and lightness. It provides an intuitive mapping between perceptual attributes and mathematical parameters that are used across digital graphics, printing, and color science. The model bridges device-oriented systems such as sRGB and perceptually oriented models such as CIELAB and is widely cited alongside HSV in textbooks, software, and standards.

Definition and Overview

HSL encodes color with a circular hue angle, radial saturation, and a vertical lightness axis. Influential systems and organizations such as X Window System, CSS Color Module Level 3, W3C, SVG and applications like Adobe Photoshop, GIMP and Inkscape adopt or reference HSL-style notation for authoring and manipulating color. Academic work by researchers at institutions including Apple Inc. engineers, groups at Xerox Palo Alto Research Center, and color scientists who have published in venues associated with SIGGRAPH and Journal of the Optical Society of America have examined HSL’s usability compared with device primaries like Rec. 709 and colorimetric targets like CIE 1931.

Color Model and Mathematics

HSL is derived mathematically from a three-channel linear or non-linear RGB triplet through conversion formulas that calculate chroma, hue angle, and lightness. Conversion typically computes max and min channel values from a given sRGB or linear RGB input then defines hue as an angle in degrees around the color wheel used by artists and color theorists such as Johannes Itten and Josef Albers. Saturation is often computed relative to chroma and lightness, while lightness is the arithmetic midpoint of maximum and minimum channel intensities. Variants and precise formulae appear alongside transforms between HSL and HSV, CIELUV, CIECAM02, and XYZ color spaces used in publications by International Commission on Illumination and researchers affiliated with MIT, Stanford University, University of Rochester, and corporate labs such as Microsoft Research.

Applications in Digital Imaging and Design

Designers and developers employ HSL for intuitive color picking, gradient generation, theming, and accessibility evaluations in tools like Figma, Sketch, Adobe Illustrator, and browser engines in Mozilla Firefox and Google Chrome. HSL facilitates tasks such as generating harmonious palettes via hue rotation, adjusting perceived brightness via lightness, and producing saturation ramps for branding and UI systems used by companies such as Apple Inc., Google, and Microsoft. In image processing pipelines encountered in research from institutions like ETH Zurich, University of Oxford, and Carnegie Mellon University, HSL can be used for color segmentation, histogram equalization, and retargeting when combined with machine learning frameworks like TensorFlow and PyTorch.

Comparison with Other Color Spaces

Relative to HSV, HSL conflates value and lightness differently, producing distinct behavior at midtones and highlights; comparisons are common in resources produced by W3C, color science texts used at RIT (Rochester Institute of Technology), and publications from NIST. Compared with perceptually uniform models such as CIELAB and CAM02-UCS, HSL is simpler but less consistent with human color difference metrics used in standards like ISO 3664 and ISO 12647. In printing workflows that reference CMYK processes and profiles created under ICC specifications, conversions from HSL via XYZ or Profile Connection Space introduce gamut mapping considerations addressed by practitioners at Kodak and Pantone.

Implementation and Software Support

HSL conversion routines appear in graphics libraries and languages including HTML5, CSS, OpenGL, Direct3D, Skia Graphics Engine, libpng, ImageMagick, and runtime environments for JavaScript, Python, C++. Browser support for CSS hsl() and hsla() is documented in specifications from W3C and implemented in engines like WebKit and Blink. Color management systems in professional applications such as Adobe Photoshop, Affinity Designer, and DaVinci Resolve provide UI controls that map to HSL-like sliders while internally converting to color-managed profiles specified by ICC.

History and Development

HSL emerged from efforts in the 1970s–1990s to create more intuitive color models for human operators and digital systems, influenced by antecedents in painterly color wheels attributed to Isaac Newton and 20th-century color theorists like Johannes Itten. Academic and engineering contributions came from research groups in universities including MIT Media Lab, Cornell University, and corporate labs at Xerox PARC and Bell Labs. Standardization and web adoption were driven by organizations such as W3C and software vendors including Adobe Systems and Mozilla Foundation, which refined notation and semantics that appear in modern style guides like those used by Google Material Design and accessibility frameworks advocated by World Wide Web Consortium working groups.

Category:Color models