ترکیب کردن دو رنگ با هم در جاوا اسکریپت

کار با رنگ ها یه مسئله به شدت کاربردیه و به ما اجازه میده رابط کاربری بهتری رو ارائه بدیم.

شاید تا الان از تابع mix() در sass استفاده کرده باشید، تابعی که به ما اجازه میده که دوتا رنگ رو با هم دیگه ترکیب کنیم، خوب این تابع واقعا یه تابع کاربردی حساب میشه اما یه بدی که داره اینه که استاتیکِ، یعنی ما نمیتونیم هر موقع که خواستیم از این تابع استفاده کنیم.

راه حل چیه؟ استفاده از جاوا اسکریپت، حالا من توی این ویرگول می خوام این تابع کاربردی sass رو با جاوا اسکریپت پیاده کنم.

بریم برای شروع:

راستی بگم که تابع ما باید چندین قابلیت داشته باشه، یعنی اگه کاربر اسم رنگ، کد RGB، کد HEX و حتی کد HEX سه رقمی هم به تابع داد بتونه کارشو انجام بده و با خطا مواجه نشه.

توی HTML ما 140 نام رنگ داریم، پس اولین کدی که می نویسیم کد تبدیل نام رنگ به کد HEX، برای این کار هم از کد زیر کمک میگیریم

برای اینکه حجم کدها توی این ویرگول زیاد نشه من همه رو ننوشتم ولی خوب تمام این کدها رو توی یه gist گذاشتم به این آدرس و می تونید از اونجا بردارید و استفاده کنید.

توی تابع بالا ما یه مقدار ورودی میگیریم و چک میکنیم اگه ورودی ما نام یکی از رنگ های HTML بود پس کد HEX رو برمیگردونیم در غیر این صورت همون مقدار ورودی رو بر میگردونیم.

کد بعدی کدیه که مقدار HEX رو بررسی میکنه، یعنی اگه کاربر کد رنگی #fc16d9 یا fc16d9 یا #f1d رو به تابع پاس داد کد ما دچار خطا نشه

این تابع هم که مشخصه کارش چیه، اگه ورودی تابع صحیح باشه که همون کد رنگ مورد نظر رو بر میگردونه در غیر این صورت کد رنگ مشکی رو بر میگردونه

و کد آخر هم کدی که رنگ های مورد نظر رو باهم ترکیب میکنه

خوب اینم که مشخصه دوتا رنگ به همراه میزان ترکیب شدن رو از ما میگیره دقیقا مانند تابع mix() در sass

اگه کاربر مقدار weight رو برابر صفر در نظر بگیره دقیقا کد رنگ دوم رو به ما بر میگردونه و اگه 100 در نظر بگیره دقیقا کد رنگ اول رو به ما بر میگردونه

خوب تا اینجا کد ما تقریبا تکمیله فقط مشکلی که هست کد رنگی RGB رو پشتیبانی نمیکنه که برای این کار هم می تونیم از تابع زیر استفاده کنیم

این تابع هم بررسی میکنه اگه ورودی یه کد رنگی RGB بود اونو تبدیل میکنه به کد HEX در غیر این صورت همون ورودی رو به ما بر میگردونه.

شما می تونید با این تابع پالت Tint & Shade یک رنگ رو تولید کنید، به تصویر زیر دقت کنید

برای اینکه یک رنگ رو تیره تر کنیم مقدار رنگ اول رو مشکی در نظر میگیریم و برای روشن تر کردن رنگ اول رو سفید در نظر میگیریم، مانند کد زیر

امیدوارم که لذت برده باشید و همینطور کاربردی بوده باشه برای شما، همچنین تمام این کد ها توی gist ام موجوده و میتونید از این آدرس اونو داشته باشید.

منتظر نظرات شما عزیزان هستم، همچنین اگه قطعه کد دیگه ای نیاز دارید در رابطه با جاوا اسکریپت توی نظرات بگین حتما براش یه ویرگول میذارم