()hsl

از تابع hsl() برای اعمال رنگ با فرمت HSL استفاده می شود.

این تابع سه مقدار که توسط ویرگول از هم جدا می شوند می پذیرد. این سه مقدار به ترتیب گرمای رنگ (Hue), اشباع رنگ (Saturation) و درخشندگی یا روشنایی رنگ (Lightness) می باشند.

 

Hue

Hue به عنوان زاویه بر روی چرخه رنگ ها مطرح می شود. زاویه صفر در این چرخه نشان دهنده رنگ قرمز است.

می توانید رنگ های اصلی و زاویه یا همان Hue مخصوص به آنها را مشاهده کنید:

 

 

همانطور که مشاهده می کنید برای رسیدن به رنگ آبی باید Hue را برابر 240 درجه قرار دهیم. اما چون با دایره و درجه سروکار داریم می توانیم با دور زدن بر روی دایره با زاویه های دیگر هم به آبی برسیم مثلا:

 

blue = 240
blue = 600  /* 360 + 240 */
blue = -120 /* 240 - 360 */

 

درست است که همیشه زاویه را با واحد deg نمایش می دهیم ولی اینجا نیازی به نوشتن واحد برای Hue نیست.

 

Saturation

مقدار دوم در تابع hsl نشان دهنده میزان خلوص رنگ است. این مقدار می تواند از 0 درصد تا 100 درصد باشد. جایی که 0 نشان دهنده حداقل اشباع رنگی است که ما را به سمت بی رنگی یا همان خاکستری می برد. و 100 نشان دهنده آن رنگ در حالت خالص آن است.

 

Lightness

و در نهایت مقدار سوم تنظیم کننده روشنایی یا درخشندگی می باشد. که می تواند از 0 درصد تا 100 درصد باشد, بطوریکه 0 نشان دهنده تاریکی کامل (سیاه) و 100 بیانگر روشنایی مطلق (سفید) می باشد.

برای اینکه به روشنایی کامل رنگ مورد نظرتان برسید باید این مقدار را بر روی 50% قرار دهید.

آیا می توانید با توجه به دایره بالا بگویید HSL زیر چه رنگی را نشان می دهد؟

 

body {
  background-color: hsl(270, 100%, 50%);
}

 

برتری که استفاده از تابع هایی همچون rgb و hsl دارند در این است که بعد از کمی تجربه با یک نگاه به مقادیر آنها می توانیم حدس بزنیم با چه رنگی رو برو هستیم یا اینکه به راحتی می توانیم رنگ را به چیزی که دلخواه ما است در بیاوریم. مثلا می خواهیم رنگ را کمی روشن تر کنیم. یا کمی رنگ را به سمت سردی سوق دهیم.

 

در دموی زیر با تغییر مقادیر HSL به درک بهتر آنها کمک کنید:
 

See the Pen hsl() by Mojtaba Seyedi (@seyedi) on CodePen.

 

 

پشتیبانی مرورگر ها

مقادیر رنگی در تمام مرورگرهای اصلی پشتیبانی می شود.

اما hsl(), hsla(), rgba(), transparentو currentColor از اینترنت اکسپلورر نسخه 9 به بعد (شامل 9) پشتیبانی می شوند.