مدل رنگ HSL

مرورگرهای مدرن از متد رنگ HSL به خوبی پشتیبانی می کنند اما کد نویسان تا حدودی این متد را نادیده می گیرند. شاید به این دلیل که HSL با مدل های رنگ CSS کاملا متفاوت است :

برگرداندن کدهای رنگ hexadecimal به RGB آسان است ، اما برگرداندن hexadecimal به HSL سخت است.
میتوان مقادیر رنگ Hex و RGB در فتوشاپ را مستقیما به CSS انتقال داد، اما مدل رنگ HSB در فتوشاپ مانند HSL نیست.
HSL طیف رنگ گسترده تری را در اختیار شما قرار نمی دهد : یعنی همان محدوده رنگی را دارد که hex و RGB دارند.

با وجود این محدودیت ها، طراحان سایت مدل رنگ HSL را ترجیح می دهند، و ما در اینجا به شما نشان می دهیم که دلیل این ارجحیت چیست.

آشنایی با یک سیستم رنگ جدید

در درجه اول شما به یک مدل ذهنی جدید برای سیستم رنگ دارید. اسلایدرها را فراموش کنید : بجای آن روی چرخ رنگی که در تصویر بالا می بینیم تمرکز کنید. می توانید رنگ های قرمز، سبز و آبی را مشاهده کنید : قرمز در بالا روی درجه صفر قرار گرفته، سبز روی 120 درجه و آبی روی 240 درجه ، که چرخ رنگی را به سه قسمت تقسیم کرده اند. رنگ های زرد، فیروزه ای و ارغوانی هم به ترتیب در درجه های 60، 180 و 300 قرار گرفته اند.

از قسمت بالای چرخ رنگی شروع می کنیم و در جهت عقربه های ساعت حرکت می کنیم، ما از رنگ های رنگین کمان الهام گرفته ایم : ROY G BIV. برای حفظ کردن آن جمله “Young Guys Can Be Messy Rascals” را بخاطر بسپارید.

بنابراین جزء اول از HSL آسان است: تعیین درجه یک رنگ خاص در چرخ رنگی.

برای مثال رنگ صورتی بین آبی (°240) و ارغوانی (°300) قرار گرفته است، بنابراین کد HSL آن برابر با : (hsl (270,100%,50% می باشد.

برای اینکه رنگ صورتی ما بیشتر متمایل به آبی شود باید در جهت خلاف عقربه های ساعت روی چرخ رنگ حرکت کنیم، کد HSL آن می شود : (Hsl (255,100%,50%

قسمت بعدی saturation می باشد که بهتر است آن را "شدت رنگ" معنی کنیم. در لبه های چرخ، رنگ ها کاملا اشباع شده (saturated) هستند : یعنی در پررنگ ترین حالت ممکن قرار دارند. هرچقدر که به سمت داخل دایره حرکت کنیم رنگ ها کم رنگ تر می شوند. هر رنگ HSL با saturation 0٪ دقیقا همان رنگ روشن است، همه چیزهای دیگر مساوی است.

در hsl علامت درصد باید هم برای مقدار saturation و هم برای مقدار luminosity گذاشته شود، حتی اگر آن مقدار 0 باشد.

Luminosity یا درخشندگی مشخص می کند که رنگ چقدر از سیاهی و سفیدی فاصله دارد. درخشندگی 50% به این معنی است که میزان تیرگی و روشنی رنگ متعادل است و اساسا بدون تغییر باقی می ماند . کم کردن میزان luminosity رنگ را تیره می کند: تمام رنگ های HSL با میزان luminosity صفر کاملا سیاه هستند. زیاد کردن luminosity رنگ را روشن می کند : در luminosity 100 % ، تمام رنگ های HSL سفید هستند.