مدل رنگی HSL بر اساس سه پارامتر سایه رنگ، غلظت (اشباع) و درخشندگی تعریف می‌شود. این سیستم سعی می‌کند تا درک بصری بهتری از رنگ به ما بدهد و کمک می‌کند تا رنگ‌های سیستم RGB را به‌راحتی و با تغییر ویژگی‌های یک رنگ روشن‌تر یا تیره‌تر کنیم. این مدل رنگی مانند سیستم RGB برای ساخت رنگ‌های دیجیتال (صفحات وب و...) کاربرد دارد. تفاوت بین سیستم RGB و HSL در ساختاری است که هر یک، رنگ را تعریف می‌کند کار کردن با سیستم RGB نیازمند دانش کافی در زمینه چگونگی ترکیب رنگ‌ها برای ایجاد یک رنگ خاص است. در سیستم HSL ساخت رنگ‌های مختلف ساده‌تر بوده و زمان‌بر نیست.

در دایره مربوط به مدل رنگ HSL رنگ‌های قرمز، آبی و سبز را می‌توان دید. رنگ قرمز در بالاترین قسمت دایره و در مبدأ یعنی صفر درجه قرار دارد. رنگ قرمز در 120 درجه، رنگ آبی روی 240 درجه، دایره رنگ را به سه قسمت تقسیم می‌کنند. در بین این سه قسمت رنگ‌های زرد، سایان و مژنتا(رنگ‌های سیستم CMYK) به ترتیب بر روی 60، 180 و 300 درجه قرار می‌گیرند. اگر از مبدأ صفر درجه شروع کنیم و در جهت عقربه‌های ساعت به‌اندازه 360 درجه حرکت کنیم هر رنگ بر روی دایره روی یک درجه قرار خواهد گرفت. برای مثال رنگ بنفش بین 240 درجه (رنگ آبی) و 300 درجه (رنگ مژنتا) قرار دارد؛ بنابراین در مدل HSL کد های رنگ بنفش (50، 100 ،270) خواهد بود که 270 درجه تک‌رنگ بنفش(H) را مشخص می‌کند. اگر بخواهیم رنگ بنفش بیشتر به آبی تمایل داشته باشد باید در خلاف جهت عقربه‌های ساعت به سمت 240 درجه رنگ آبی حرکت کنیم. در این صورت کد رنگ موردنظر می‌تواند عدد (255،100،50) باشد.

به معنی غلظت یا اشباع رنگ است و خلوص رنگ را نشان می‌دهد. در بیرونی‌ترین لبه این دایره غلظت رنگ در حداکثر میزان خود است یعنی رنگ کاملاً اشباع است و با حرکت به سمت مرکز از غلظت رنگ کم شده و رنگ به سمت خاکستری می‌رود. هر رنگ HSL با غلظت 0 درصد دقیقاً طیفی از رنگ خاکستری است. به‌بیان‌دیگر مؤلفه S به معنی فاصله از مرکز دایره رنگ است.

 به معنی درخشندگی یا روشنایی، میزان تیرگی رنگ را مشخص می‌کند اینکه رنگ مورد نظر چقدر از سفید یا سیاه دور است. برای مثال درخشندگی 50 درصد یعنی رنگ به‌خوبی بین بازه سیاه ‌و سفید قرارگرفته است و میزان سیاهی و سفیدی آن در حال تعادل است. کم شدن میزان درخشندگی رنگ را تیره‌تر می‌کند بنابراین درخشندگی صفر درصد، رنگ را کاملاً سیاه می‌کند جدا از اینکه رنگ موردنظر چه تک‌رنگی دارد.

این سه سیستم بسیار شبیه به هم هستند و درعین‌حال تفاوت‌های جزئی باهم دارند. تفاوت عمده آن‌ها در تعریف یک رنگ در درخشندگی (Luminosity) روشنایی (Brightness) و ارزش (Value) آن رنگ است. در نرم‌افزارهای گرافیکی مانند فتوشاپ، با سیستم HSB مواجه می‌شویم. مجموعه برنامه های آفیس ماکروسافت مانند برنامه پاور پوینت معمولاً از مدل HSL استفاده می‌کنند. مدل HSB و HSV یکسان هستند اما مدل HSL نسبت به دو مدل دیگر کمی متفاوت است. حرف اختصاری آخر آن به‌جای ارزش رنگ یا تاریکی، میزان سفیدی رنگ را نشان می‌دهد؛ یعنی با اضافه شدن آن، رنگ موردنظر به رنگ سفید خالص نزدیک‌تر می‌شود. در حالیکه در مدل HSB که در فتوشاپ با آن مواجه هستیم اضافه شدن روشنایی میزان سیاهی رنگ را کاهش می‌دهد و برای سفید یا کم‌رنگ‌تر شدن رنگ موردنظر میزان غلظت رنگ و روشنایی را هم‌زمان باید تنظیم کنیم. در مدل HSL اشباع رنگ از طیف‌های خاکستری‌ معادل رنگ به سمت رنگ اصلی حرکت می‌کنند اما در مدل HSB این مؤلفه از رنگ مایه اصلی به سمت سفید متغیر است. همچنین در پارامتر روشنایی (Lightness) حرکت آن طولی و از سیاه به سمت رنگ اصلی و سپس به سمت رنگ سفید است، اما در مدل HSB این پارامتر فقط تا نیمه (از سیاه به رنگ انتخاب‌شده) رفته است.

1- سیستم رنگ HSL برای ساخت رنگ‌های ایده آل روش سریع‌تری است. به‌ویژه برای افرادی که خیلی با تئوری رنگ آشنایی ندارند و می‌توانند با چند دستور ساده یک سری رنگ هارمونیک بسازند. با کم‌وزیاد کردن اشباع رنگ، می‌توان طیف‌های متفاوت از یک رنگ را ساخت بدون اینکه مایه رنگ تغییر کند.

2- امکان تنظیم رنگ سریع از مزایای مهم این سیستم رنگ است. برای مثال برای یک طراح بارها ممکن است پیش بیاید که کارفرما سؤال کند که می‌توان رنگ پس‌زمینه را روشن‌تر کرد؟ در سیستم RGB برای روشن‌تر کردن یک رنگ باید سه مؤلفه رنگ هم‌زمان باهم تنظیم شوند تا رنگ روشن‌تر از یک رنگ به دست بیاید؛ اما در سیستم HSL برای روشن یا تیره‌تر کردن رنگ، فقط مؤلفه L یعنی درخشندگی رنگ را می‌توان کم یا زیاد کرد.

3- برای ساخت یک شیب رنگ که از تیره به روشن یا برعکس حرکت کند با انتخاب یک رنگ پایه با غلظت مشخص، تنها با تغییر میزان درخشندگی با فواصل درصدی مشخص، می‌توان یک شیب رنگ هماهنگ ساخت. یا با ثابت نگه‌داشتن غلظت رنگ و درخشندگی و تغییر درجه رنگ یک شیب بارنگ‌های مختلف مثلاً رنگ‌های رنگین‌کمان ساخت و دیگر مؤلفه‌ی رنگ‌های قرمز و سبز و آبی دخالتی در ساخت رنگ ندارند.

مدل رنگ HSB درواقع زیرمجموعه‌ای از سیستم رنگ RGB است و رنگ‌های ساخته‌شده در هر دو سیستم یکسان هستند. مدل HSL تنها از روش متفاوتی است که از مقادیر رنگ (خصوصیاتی که یک رنگ دارد؛ مانند غلظت و روشنی یا تاریکی) به‌جای ارزش رنگی استفاده می‌کند. تمامی سیستم‌های رنگ درواقع روشی برای ترکیب رنگ‌ها و ساخت رنگ‌های جدید هستند. سیستم RGB با ترکیب رنگ‌های قرمز و سبز و آبی 16 میلیون رنگ تولید می‌کند که مدل HSL نیز می‌تواند همین تعداد رنگ را با سه مؤلفه H، S، L را بسازد.

برای درک تفاوت این دو سیستم رنگ، مثالی از یک رنگ می‌تواند کمک کند. برای مثال رنگ قرمز سیستم RGB با کد (R:255 G:0 B:0) که هیچ ‌چیزی جز رنگ قرمز وجود ندارد. در سیستم HSL رنگ قرمز روی صفر درجه قرار دارد بنابراین مؤلفه H آن عدد صفر است. غلظت رنگ قرمز نیز در بالاترین حد اشباع است بنابراین مؤلفه S بالاترین عدد یعنی 255 است. از نظر روشنایی نیز در حد وسط قرار دارد یعنی نصف عدد 255 بنابراین کد این رنگ قرمز سیستم RGB در سیستم HSL با اعداد (H:0 S:255:L:128) تعریف می‌شود.