تئوری رنگ‌ها - چگونه رنگ‌ها را با همدیگر ترکیب کنیم

گردآوری و تالیف : ارسطو عباسی
تاریخ انتشار : 23 اسفند 1396
دسته بندی ها : گرافیک

ما انسان‌ها توانایی دیدن رنگ‌های مختلف را داریم و این موضوع بدلیل وجود تواناییِ خاصی در قسمت شبکیه چشم است، این توانایی به ما این قابلیت را می‌دهد که بتوانیم فرکانس‌های مختلفی از نور را دریافت و تفکیک کنیم.

رنگ‌ها یا سایه های معین، احساسات افراد مختلف را برمی‌انگیزد. در این مطلب قصد دارم به صورت سریع شما را با تئوری رنگ‌ها، راه‌هایی برای ترکیب‌ آن‌ها و ابزارهایی برای طراحی رنگ آشنا کنم. این موارد باعث می‌شود که شما به عنوان یک طراح بتوانید طراحی‌تان را لذت بخش کنید و از فواید آن بهره ببرید.

بیاید شروع کنیم

حالت‌های متفاوت از رنگ‌های متفاوت نشئت می‌گیرد و شما با استفاده از این رنگ‌های متفاوت می‌توانید به پایان‌های متفاوتی دست پیدا کنید. 

۱- قرمز : رنگ قرمز از ابتدا نیز به عنوان یک نماد برای عشق، انرژی و شدت در نظر گرفته شده است. بنابراین امروزه می‌توانیم رنگ قرمز را -به هر میزانی- در بسیاری مواقع به مواردی که مرتبط به این موضوعات می‌شوند، دید.

۲- زرد : از رنگ زرد برای مواردی مانند شادی کردن، هشدار و یا عقل -زیرکی- استفاده می‌کنند. زرد رنگی است که فوق العاده سریع می‌تواند توجه‌های مختلفی را جلب کند. با این حال رنگ زرد هیچوقت برای پس‌زمینه یک اپلیکیشن و یا رنگ اصلی یک رابط کاربری مناسب نیست. رنگ زرد می‌تواند برای جلب توجه قسمتی از وبسایت برای مثال لوگو جذاب و انتخاب مناسبی باشد.

۳- سبز : رنگ سبز همواره با مفاهیمی مانند تازگی، امنیت و رشد آمیخته بوده است. درست به همین دلیل است که بیشتر شرکت‌های مربوط به غذای سالم و طبیعت از رنگ سبز استفاده می‌کنند.

۴- آبی : رنگ آبی نمادی از پایداری، اعتماد و آرامش است. هیچ تعجبی ندارد که وبسایت‌هایی مانند توییتر و فیسبوک از آن استفاده می‌کنند.

۵- بنفش : بنفش معمولا نمادی سلطنتی است اما برای ثروت و نمادی از زنانگی نیز استفاده می‌شود. بنفش بیشتر برای محصولاتی که مخاطب آن ها زنان است استفاده می‌شود. همچنین محصولاتی که لاکشری هستند.

برای اینکه بتوانیم این موارد را در عمل مشاهده کنیم، بیاید شروع به آنالیز یک تبلیغ کنیم. جدای از هرچیزی تبلیغات نقش اساسی در آزمایشات مربوط به ترغیب و دستکاری انسان‌ها از نظر روانی دارد.

دفعه بعدی که تبلیغاتی را مشاهده کردید،‌ سعی کنید این موضوع را کشف کنید که در آن از چه تکنیک و قاعده طراحی برای اینکه ظاهر خوبی داشته باشد استفاده شده است. همچنین به این موضوع پی ببرید که آن‌ها قصد دارند چه احساسی را در شما ترغیب دهند.

با این وجود انتخاب یک طرح رنگی همواره فقط به تبلیغات و جذب کردن نظر دیگران مربوط نمی‌شود. این موضوع همچنین به فروش محصول و جذاب کردن آن برای یکسری اهداف و یا مشتری‌های منحصر به فرد مربوط می‌شود. 

پس به یاد داشته باشید دفعه دیگری که خواستید یک طرح یا اپلیکیشنی را ایجاد کنید، به این موضوع فکر کنید که قصد دارید چه احساسی را تحریک کنید و می‌خواهید چه مفهومی را به افراد منتقل کنید، براین اساس سعی کنید یک طرح رنگی مناسب را ایجاد کنید.

چگونه رنگ‌های مختلف را برای ایجاد یک طرح رنگی ترکیب کنیم

مسلما شما در تمام قسمت‌های اپلیکیشن از یک رنگ خاص استفاده نمی‌کنید. شما نیاز دارید برای ایجاد یک طرح، رنگ‌های متفاوتی را که با همدیگر سازگاری دارند، در کنار هم قرار دهید، رنگ‌هایی که ظاهر بسیار زیبایی داشته باشند. 

چگونه رنگ‌های مختلف را برای ایجاد یک طرح رنگی ترکیب کنیم

برای ترکیب رنگ‌ها هنرمندان و طراحان از چیزی استفاده می‌کنند که ما آن را color wheel یا چرخ رنگ می‌خوانیم.راه‌های متفاوتی وجود دارد که در آن‌ها می‌توانید با استفاده از علم تئوری رنگ‌ها، رنگ‌های مختلفی را با همدیگر ترکیب کنید.

۱- طرح رنگی مشابه

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

طرح رنگی مشابه

۲- طرح رنگی مکمل

 برای چنین کاری ابتدا رنگی را انتخاب کرده و سپس رنگ متضاد آن را در آن سر چرخ رنگی انتخاب کنید. برای مثال قرمز و سبز در این حالت:

طرح رنگی مکمل

طرح رنگی مکمل بیشتری برای جلب توجه یک مخاطب از آن استفاده می‌شود و طرح‌بندی مناسبی برای اصل یک رابط کاربری و یا پس زمینه یک اپلیکیشن ندارد. بجای این‌کار بهتر است از آن‌ها برای قسمت لوگو و یا اسکرین‌شات‌ها استفاده کنید.

۳- طرح شکاف رنگ‌ها

برای این طرح شما ابتدا رنگی را انتخاب کرده و پس از آن دو رنگ مجاور با رنگ متضاد را انتخاب کنید. 

طرح شکاف رنگ‌ها

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

۴- طرح رنگی سه‌گانه

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

طرح رنگی سه‌گانه

این طرح رنگی از دهه ۹۰ به بعد استفاده می‌شده و در حال حاضر به نظر کمی قدیمی می آید. بسیاری از فست‌فود‌های زنجیره‌ای از همان موقع به بعد در طرح لوگوی خود از این حالت استفاده کرده‌اند. 

۵- طرح تک رنگ

 چنین طرحی بسیار مدرن است و به تازگی در حال رواج پیدا کردن هستند. طراحی‌های تک رنگ در صفحات نمایش مربوط به موبایل‌ها بسیار زیبا هستند. شما یک رنگ ساده را انتخاب می‌کنید و آن را با مقادیر مختلفی از رنگ سیاه یا سایه‌ها تلفیق می‌کنید. 

طرح تک رنگ

برای گرفتن بیشترین کنتراست می‌توانید تا هرچه‌قدر رنگ سیاه و یا سفید را با آن ترکیب کنید. این طرح رنگی بسیار جدید است و می‌تواند برای انتخاب‌های دیجیتالی مدرن مناسب باشد.

ابزارهایی برای طراحی رنگ

ما به این موضوع پی بردیم که به چه میزان طرح‌های رنگی متفاوت می‌توانند برای زیبا‌تر شدن و جلب توجه کردن تاثیر بگذارند. 

در اینجا تعدادی ابزار آنلاین وجود دارد که با استفاده از آن‌ها می‌توانید طرح رنگی مناسبی را پیدا کرده و یا آن‌ها را خودتان ایجاد کنید. بیشترین ابزارهایی که معمولا استفاده می‌شود شامل:

۱- Color Hunt. این محل جائیست که طراحان حرفه‌ای برای انتخاب و دسته‌بندی طرح های رنگی مورد علاقه‌شان به آن مراجعه می‌کنند. شما در آن می‌توانید طرح‌های رنگی پراستفاده، تصادفی و جذاب را پیدا کنید. در این سیستم براساس پروژه‌تان نیز می‌توانید طرح رنگی منحصر به فردی را داشته باشید.

۲- Flat UI Colors. در این وبسایت می‌توانید ۲۰ رنگ فرمول‌بندی شده که بیشتر در پلتفرم IOS استفاده شده را مشاهده کنید. برای پلتفرم آندروید نیز وبسایت Material Palette پیشنهاد می‌شود.

۳- ColorZilla. این مورد یکی از بهترین افزونه‌های مرورگر کروم است که با استفاده از آن می‌توانید کد HEX مربوط به هر رنگی را در صفحات مختلف وبسایت‌ها ببینید.

با استفاده کردن از این ابزارها، درک تئوری حالت‌های رنگی و ترکیب آن‌ها با همدیگر شما می‌توانید طرح رنگی را ایجاد کنید که برای وبسایت و یا اپلیکیشن‌تان بسیار مناسب است. این کار کمک می‌کند تا محصول‌تان برای جذب یک احساس خاص و یا ایده از طرف مشتری درست عمل کند.

منبع

مقالات پیشنهادی

حس اتوماتیک سازی کارهای front-end با gulp

سلام خدمت همه ای کاربرهای راکت ، این یک مقاله اختصاصی از وبسایت راکت هست امیدوارم مورد استفاده اتون قرار بگیره و بیشتر با زبان محاوره ای سعی به نوشتن...

چگونه یک منو واکنشگرا با FlexBox ایجاد کنیم

در این مطلب قصد دارم به شما شیوه ساخت یک نوار منو توسط FlexBox و قدرت Media queries را توضیح دهم. این نوار منو توانایی تطبیق یافتن با اندازه‌های مختلف...

Full-Stack Designer کيست و چرا بايد يکي از آنها باشيد

سريع بودن و موثر واقع شدن در مهارت ها و تمركز روي زندگي حرفه اي مون ارزش زيادي داره . عنواني كه ما استفاده ميكنيم ميتونه به شكل موثري به ديگران بگه ك...

چگونه یک وبسایت وردپرسی را به یک اپلیکیشن موبایل تبدیل کنیم

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