افزودن و حذف فیلد درج فایل با jQuery And PHP
افزودن و حذف فیلد درج فایل با jQuery And PHP
11/12/1395
متحرک سازی یا انیمیشن در CSS3
متحرک سازی یا انیمیشن در CSS3
12/12/1395
نمایش همه

مدل رنگ HSL

مدل رنگ HSL

استفاده از متد های مدل رنگ HSL

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

 

  1. برگرداندن دستور های رنگ hexadecimal به RGB راحت مییباشد، ولی برگرداندن hexadecimal به HSL سخت است.
  2. میتوان مقادیر رنگ Hex و RGB در فتوشاپ را به صورت مستقیم به CSS منتقل کرد، ولی مدل رنگ HSB در فتوشاپ مثل HSL نیست.
  3. HSL طیف رنگ گسترده تری را به شما ارائه نمیدهد : به این معنی که همان محدوده رنگی را دارد که hex و RGB دارند.
با داشتن این محدودیت ها، افرادی که طراحی سایت را بر عهده دارند مدل رنگ HSL را ترجیح می دهند، و ما دراین قسمت به شما نشان می دهیم که دلیل این ارجحیت چه میباشد.
 مدل رنگ HSL

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

در اولین مرحله شما به عنوانی کسی که طراحی وب سایت را انجام میدهید به یک مدل ذهنی جدید برای سیستم نیاز رنگ دارید. اسلایدرها را فراموش کنید : میتوانید جایگزین آن روی چرخ رنگی که در آن قسمت مشاهده میکنید استفاده کنید. قادر هستید رنگ های قرمز، سبز و آبی را  به خوبی ببینید : قرمز در بالا روی درجه صفر قرار گرفته، سبز روی ۱۲۰ درجه و آبی روی ۲۴۰ درجه ، که چرخ رنگ را به سه قسمت تقسیم کرده اند. رنگ های زرد، فیروزه ای و ارغوانی هم به ترتیب در درجه های ۶۰، ۱۸۰ و ۳۰۰ قرار گرفته اند.
از بخش بالای چرخ رنگی شروع کنید و در جهت عقربه های ساعت حرکت کنید، ما در این مقاله از رنگ های رنگین کمان استفاده کرده ایم: ROY G BIV. برای بخاطر سپردن آن جمله “Young Guys Can Be Messy Rascals” را به یاد بسپارید. پس جزء اول از HSL راحت میباشد : تمشخصکردن درجه یک رنگ خاص در چرخ رنگی.
 مرحله بعدی Saturation است که شاید بهتر باشد آن را شدت رنگ معنی کنیم.در لبه های چرخ رنگ ها کاملا saturated یعنی اشباع شده اند. به این معنی که پر رنگ ترین حالت را دارند. زمانی که به سمت دایره حرکت میکنید رنگ ها کم رنگ تر میشوند هر کدام از رنگ ها HSL با saturation 0٪ همان رنگ روشن میباشد.