El model HSL (de l'anglès Hue, Saturation, Lightness – Tonalitat, Saturació, Luminància), també anomenat HSI (de l'anglès Hue, Saturation, Intensity – Tonalitat, Saturació, Intensitat), defineix un model de color en termes dels seus components constituents. El model HSL es representa gràficament com un con doble o un doble hexàgon. Els dos vèrtexs en el model HSL es corresponen amb el blanc i el negre, l'angle es correspon amb la tonalitat, la distància a l'eix, amb la saturació i la distància a l'eix blanc-negre es correspon amb la luminància. Com el model HSV, és una deformació no lineal de l'espai de color RGB.

Els valors (R, G, B) s'han d'expressar com nombres del 0 a l'1. MAX equival al màxim dels valors (R, G, B), i MIN equival al mínim d'aquests valors. La fórmula es pot escriure així:

${\displaystyle H={\begin{cases}60\times {\frac {G-B}{MAX-MIN}}+0,&{\mbox{if }}MAX=R\\&{\mbox{and }}G\geq B\\60\times {\frac {G-B}{MAX-MIN}}+360,&{\mbox{if }}MAX=R\\&{\mbox{and }}G<B\\60\times {\frac {B-R}{MAX-MIN}}+120,&{\mbox{if }}MAX=G\\60\times {\frac {R-G}{MAX-MIN}}+240,&{\mbox{if }}MAX=B\end{cases}}}$

${\displaystyle S={\begin{cases}{\frac {MAX-MIN}{MAX+MIN}}={\frac {MAX-MIN}{2L}},&{\mbox{if }}L\leq {\frac {1}{2}}\\{\frac {MAX-MIN}{2-(MAX+MIN)}}={\frac {MAX-MIN}{2-2L}},&{\mbox{if }}L>{\frac {1}{2}}\end{cases}}}$

${\displaystyle V={\begin{matrix}{\frac {1}{2}}\end{matrix}}(MAX+MIN)}$

HSL és similar al model HSV però reflecteix millor la noció intuïtiva de la saturació i la luminància com dos paràmetres independents, i per tant és un model més adequat per als artistes. L'especificació dels fulls d'estil en cascada (CSS) en la seva versió 3 prefereixen HSL perquè és simètric a l'eix llum-foscor, cosa que no passa amb el model HSV ("Els avantatges d'HSL són que és simètric a la claredat i a la foscor (que no és el cas d'HSV per exemple)..."). Significa que:

• A HSL, la component de la saturació va des del completament saturat fins al gris equivalent, mentre que a HSV, amb V al màxim, va des del color saturat fins al blanc, cosa que no és molt intuïtiva.
• La luminància a HSL sempre va des del negre fins al blanc passant per la tonalitat desitjada, mentre que a HSV la component V es queda a mitjan camí, entre el negre i la tonalitat escollida.

En les aplicacions de tractament de color, els models HSV i HSL es representen com una àrea lineal o circular per a la tonalidtat i la saturació i una àrea bidimensional, com un quadrat o triangle, per al valor/luminància. En aquesta representació les diferències entre HSV i HSL són irrellevants. Això no obstant, algunes aplicacions permeten escollir el color mitjançant lliscadors lineals o entrades numèriques. En aquests casos solament s'usa un dels dos models, normalment HSV. Alguns exemples:

• Aplicacions que usen HSV:
  • Apple Mac OS X system color picker (disc de color per a H/S i un lliscador per a V)
  • The GIMP
  • Xara X
  • Paint.NET (disc de color per a H/S i lliscador per a V)

• Aplicacions que usen HSL:
  • L'especificació CSS3
  • Inkscape (des de la versió 0.42)
  • Macromedia Studio
  • Microsoft Windows system color picker (i MSPaint)
  • Paint Shop Pro

• Aplicacions que utilitzen HSV i HSL:
  • Les aplicacions gràfiques d'Adobe (Illustrator, Photoshop, i altres)
  • Pixel image editor (des de la Beta5)

• Teoria del color
• SCART
• S-Video
• Espais de color
• Models de color:
  • Model de color RGB usat en monitors en color
  • Model de color CMYK per a impressió en color
  • Model de color HSV
  • Model de color HSL
  • Model de color RYB el modelo tradicional usat pels artistes.
  • YUV per a televisió PAL
  • YIQ per a televisió NTSC