برای ایجاد یک ترکیب رنگ درست در وب سایت و یا هر اثر هنری دیگری ابتدا باید شناختی از رنگها داشت. ما در اینجا صرفا اصول کلی برای انتخاب ترکیب رنگ وب سایت را بحث خواهیم کرد. قبل از ترکیب رنگ باید رنگ های اصلی ، رنگ های فرعی و رنگ های ثانویه را شناخت و سپس به نحوه ایجاد ترکیب رنگ های زیبا از این رنگ ها پرداخت.
رنگ های اصلی :
سه رنگ قرمز، آبی و زرد را بعنوان رنگ اصلی میشناسیم. برای معرفی رنگ های اصلی از دایره ای رنگی استفاده میشود که این سه رنگ را در قسمت های مساوی نشان میدهد.
رنگ های ثانویه:
برای ایجاد رنگ های بیشتر این سه رنگ را باهم ترکیب می کنیم. نتیجه ای که بدست می آید سه رنگ بنفش ، سبز و نارنجی است که به رنگ های ثانویه معرف هستند.
برای ساخت سایر رنگها از ترکیب رنگ های اصلی و رنگهای فرعی و یا رنگ های فرعی با یکدیگر استفاده میشود. رنگهای حاصل از این ترتکیب را رنگهای ترکیبی میخوانیم.
رنگ های مکمل : رنگ های مکمل به رنگهایی گفته میشود که در دایره رنگها روبروی یکدیگر قرار میگیرند. بعنوان مثال میتوان موارد زیر را نام برد.
مکمل قرمز: سبز
مکمل آبی: نارنجی
مکمل زرد: بنفش
در نرم افزار فتوشاپ از دایره رنگ HSL استفاده می کنیم که تن رنگ ، شدت رنگ و نور رنگ را نیز مورد بررسی قرارمیدهد.
چگونه یک ترکیب رنگ مناسب پیدا کنیم
برای یافتن ترکیب رنگ مناسب مبحثی به نام هارمونی رنگها را مطرح میکنیم. در هارمونی رنگها بیان میشود که یکی از عوامل هارمونی رنگها ترکیب آنها است. یعنی اگر دو رنگ وجود داشته باشند که در ساختار خود از یک رنگ مشترک استفاده کرده باشند به نظر ما دارای هارمونی می آیند. از جمله ترکیب رنگ های دارای رنگ مشترک میتوان به ترکیب رنگ های : سبزو زرد – بنفش و قرمز- آبی و دودی اشاره کرد.
عامل دوم در ایجاد ترکیب رنگ های زیبا در وب سایت استفاده از رنگ های مکمک است. در بالا توضیح دادیم که رنگ های مکمل رنگهایی هستند که در دایره رنگ روبروی یکدیگر قرار دارند این رنگ ها در کنار هم ترکیب زیبایی ایجاد می کنند.
رنگ های مشابه :
برای انتخاب عناصری که یک وب سایت را به هم متصل می کنند میتوان از رنگهای مشابه استفاده کرد. میتوان هدر سایت را با رنگ قاب دور تگ ها مشابه انتخاب نمود.
از الگوهای دیگر رنگی که میتوان برای ترکیب رنگ وب سایت ها استفاده کرد، میتوان به الگوهای رنگ مثلثی ، مستطیلی و مربعی اشاره:
ابزارهای انتخاب ترکیب رنگ وب سایت
از سایت های ارائه دهنده ابزار های انتخاب رنگ ابتدا به سایت ادوبی اشاره می کنیم. شما در زیر دامنه color.adobe.com میتوانید براساس قوانین ترکیب رنگ که در ابتدای همین مقاله توضیح مختصری از آن بیان شد، طیف رنگی دلخواه خود را انتخاب و در وب سایت خود بکار گیرید.
سایت ادوبی بعنوان برترین سایت انتخاب ترکیب رنگ وب سایت در بسیاری از سایت ها و شبکه های اجتماعی معرفی شده است. ولی حقیقت امر این است که اگر ما دید گرافیکی وسیعی داشته باشیم که بتوانیم خودمان نحوه استفاده از پالت های رنگ این سایت را دریابیم، یعنی اینکه بدانیم کدام رنگ پالت برای پس زمینه و کدام برای فونت و کدام برای دکمه مناسب است. خودمان هم میتوانیم پالت رنگ سفارشی برای خود ایجاد کنیم. اساس نیاز به ابزار انتخاب ترکیب رنگ وب سایت این است که از میان ترکیب رنگها در قسمت های مختلف سایت چگونه استفاده کنیم.
ابزار انتخاب رنگ وب سایت به تفکیک موضوع
سایت material.io/color را مشاهده کنید. این سایت برای کاربران اندروید استودیو طراحی شده است ولی میتواند برای طراحی قالب سایت ایده های خوبی به شما بدهد. برای بدست آوردن نتیجه نهایی شاید بهتراست از سایت ادوبی و سایت متریال همراه با پیچیده ترین کامپیوتر دنیا یعنی مغز خود بصورت همزمان استفاده کنید.
برای داشتن یک وب سایت زیبا ابتدا رنگ سازمانی خود را به انتخاب کنید. سپس با ابزار انتخاب رنگ وب سایت ادوبی رنگ های که ترجیح میدهید کنار آن بکار ببرید را ببینید. سپس به سراغ سایت متریال رفته و ببینید این سایت به شما چه پیشنهادی میدهد از تلفیق این سه ابزار میتوانید براحتی رنگ های دلخواه خود را انتخاب کنید.
اگر میخواهید با ابزار های بیشتری برای ترکیب رنگ وب سایت آشنا شوید. در زیر چند ابزار پرکاربرد در زمنیه ترکیب رنگ برای وب سایت را معرفی کرده ایم.
ابزار های محبوب انتخاب رنگ وب سایت :
Colormind :
این ابزار که در سایتی به همین نام قرار دارد. ابزاری بسیار مناسب برای طراحان وب است. تمام رنگ های پیشنهادی این سایت با استاندارد وب مطابقت کامل دارند و کارکردن با آن بسیار ساده است با ورود به سایت ، رنگ اصلی سایت خود که در وسط جعبه رنگ قرار دارد را انتخاب می کنید. سپس دکمه Generate را میفشارید تا سایت سایر رنگها را در اختیارتان قرار دهد. بعد از اینکه رنگهای مد نظر خود را یافته و یا ایجاد کردید، سایت به شما پیشنهاد میدهد که کدام رنگ ها را برای سایه ها ، کدام را برای پس زمینه و غیره استفاده کنید. به این ترتیب این سایت سومین پیشنهاد ما برای انتخاب رنگ وب سایت میباشد.
Color Safe:
همانطور که از نام این ابزار مشخص است، تمرکز اصلی آن برروی نمایش صحیح رنگ های انتخابی است. هنگامی که با ابزارههایی مانند Color safe برای انتخاب رنگ کار می کنید. دلیلی برای نگرانی از نحوه نمایش رنگ انتخاب شده نخواهید داشت.
اگر هنگام طراحی یک سایت متوجه شدید که رنگ شما مرده است و یا بیش از حد شاداب است و نمی دانستید چگونه باید این مشکل را حل کنید، ابزار انتخاب رنگ سایت Color safe بهترین ابزار برای شماست. شما میتوانید در سایت color safe براحتی صدها طیف از رنگ مد نظر خود را مشاهده و مقایسه کنید. تا در نهایت به رنگ دلخواه خود برسید.
سایت Color Safe به طراحان وب امکان میدهد که بر اساس رنگ انتخابی خود رنگ نوشته، پس زمینه و غیره را نیز مشاهده و یا انتخاب کنند، این امکان علاوه بر کمک به انتخاب رنگ برای گرافیست ها، انتخاب رنگ برای افراد عادی را هم سهل و راحت می کند و این ابزار را به چهارمین ابزار پیشنهادی ما برای انتخاب رنگ وب سایت تبدیل می کند.
Coolors:
در سایت Colors شما با بینهایت پالت رنگ روبرو خواهید شد که انواع و اقسام ترکیب رنگ ها را به شما پیشنهاد خواهد داد. اگر یک ایده کلی از رنگهای خود در نظر دارید و بدنبال چیدمان زیبایی از رنگ های مد نظر خود هستید ابزار انتخاب رنگ وب سایت colors بهترین ابزار برای شماست. در این سایت میتوانید برای سلیقه خود صدها مثال از ترکیبات مختلف را بیابید و بین آنها یکی را انتخاب کنید و یا حتی چندین پالت رنگ را باهم ترکیب کنید. بسیاری از گرافیست ها این سایت را برای انتخاب رنگ به سایت های دیگر ترجیح میدهند. زیرا که یک گرافیست اغلب میداند چه رنگهایی میخواهد و بدنبال نمونه هایی از چیدمان این رنگها با سایر رنگها جستجو میکند.
Paletton:
این ابزار که در سایتی به همین نام قرار دارد و بسیار شبیه ابزار Color شرکت ادوبی است و به شما امکان استفاده از انواع ترکیب رنگ ها را میدهد. این سایت همچنین امکان مشاهده ترکیب رنگ انتخابی بصورت شماتیک را میدهد که میتواند بعنوان ایده اولیه بکارگیری آن در وب سایت استفاده شود. در این ابزار شما میتوانید رنگ ها را در انواع دستگاه ها چک کنید، تا مطمئن شوید که رنگ توسط همه مخاطبان سایت شما به یک صورت دیده میشود.
هنگام انتخاب ابزار ترکیب رنگ وب سایت باید به خاطر داشته باشید که این شما هستید که باید ایده اولیه رنگ را انتخاب کنید. رنگ اصلی سایت خود را انتخاب کنید. سپس به کمک ابزارهای انتخاب رنگ برای آن رنگ های مکمل و یا مشابه انتخاب کنید و یا بکمک ابزار های انتخاب ترکیب رنگ وب سایت رنگ اصلی خود را کمی ویرایش کنید.
مثالی که برای انتخاب ابزار ترکیب رنگ وب سایت میزنیم به این صورت است که :
فرض کنید میخواهید در سایت خود از رنگ خاکستری بعنوان تم اصلی استفاده کنید. اگر تمام ابزار های انتخاب ترکیب رنگ را هم بکارببرید ولی در انتها تصمیم بگیرید که بعنوان مثال پس زمینه دکمه های شما خاکستری ساده ای باشد، که به هاور موس هم پاسخی ندهد، شما گرافیک خوبی برای سایت انتخاب نکرده اید. زیرا که بیننده ممکن است فرض کند که دکمه غیر فعال است و روی آن کلیک نکند.
هنگام انتخاب رنگ های اصلی سایت خود به نکات روانشناسی رنگ و اصول UI دقت کنید.