هماهنگی رنگ: چطور پالت‌هایی بسازیم که واقعاً کار کنند

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

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

وقتی هندسه را ببینید، انتخاب رنگ دیگر حسی نیست که دنبالش بگردید، بلکه تصمیمی است که می‌گیرید. این یک سیستم است، نه یک mood board.

هماهنگی رنگ واقعاً یعنی چه

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

چرا اهمیت دارد؟ چون قضاوت سریع و بی‌رحمانه است. طبق Interaction Design Foundation، با استناد به تحقیقات دانشگاه بازل و Google، مردم جذابیت یک طراحی را در حدود ۱۷ تا ۵۰ میلی‌ثانیه قضاوت می‌کنند، و این قضاوت آنی عمدتاً بر اساس رنگ و ترکیب‌بندی صورت می‌گیرد. فرصت دوم برای اولین تأثیر وجود ندارد.

هماهنگی معنا هم حمل می‌کند. همان‌طور که Joann و Arielle Eckstut می‌گویند، "رنگ‌ها می‌توانند احساساتی را نمادین کنند که با شخصیت یک برند همسو هستند"، به نقل از Interaction Design Foundation. این رابطه احساس را قبل از خواندن یک کلمه می‌سازد. اگر می‌خواهید لایه عمیق‌تر آنچه هر رنگ منتقل می‌کند را بدانید، ما آنچه هر رنگ واقعاً نشان می‌دهد را جداگانه بررسی می‌کنیم.

چرخه رنگ تمام بازی است

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

این افسانه نیست. همان‌طور که Sensational Color توضیح می‌دهد، هماهنگی‌های کلاسیک "ترکیب‌هایی از رنگ‌ها هستند که طیف را متوازن می‌کنند"، و می‌توانید "از اشکال هندسی برای تجسم رابطه رنگ‌ها روی چرخه رنگ استفاده کنید." شکل دستور العمل است. چرخ آشپزخانه است.

سه رابطه بیشترین بار را حمل می‌کنند:

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

این سه را تسلط داشته باشید و ۹۰٪ طرح‌هایی را که برندها واقعاً ارائه می‌دهند پوشش داده‌اید.

شش طرحی که اهمیت دارند

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

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

مکمل: حداکثر کنتراست، حداقل تلاش

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

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

FedEx مثال کتاب درسی است: یک wordmark بنفش و نارنجی، دو رنگی که روبروی هم روی چرخ قرار دارند. کنتراست آنقدر تمیز است که در هر اندازه‌ای باقی می‌ماند، حتی در فلش فضای منفی پنهان شده.

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

مجاور: آرام، منسجم، کم‌ریسک

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

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

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

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

سه‌گانه: انرژی متوازن بدون آشوب

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

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

تله این است که سه رنگ پرشور با قدرت مساوی سریعاً سیرک می‌شوند. سه‌گانه فقط وقتی متوازن می‌ماند که یک رنگ پیشرو باشد و دو تای دیگر پشتیبانی کنند. هندسه تعادل موقعیتی می‌دهد، نه تعادل تناسبی. تناسب هنوز کار شماست.

این رشته مشترک هر طرح است: چرخ رابطه را به شما می‌دهد، شما تصمیم می‌گیرید چقدر از هر رنگ بریزید.

برندهای واقعی چطور طرح خود را انتخاب می‌کنند

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

Spotify مثال انضباط است. هویت روی یک سبز واحد سوار می‌شود که از طریق رنگ‌های روشن‌تر و تیره‌تر به جای رنگ‌های جدید متنوع شده. این تک‌رنگ درست است: عمق از ارزش، نه از اضافه کردن رنگ. یک رنگ، یادآوری کامل.

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

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

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

اشتباهاتی که هماهنگی را خراب می‌کنند

بیشتر پالت‌های شکسته به همان دلایل معدودی شکست می‌خورند. هیچ‌کدام درباره انتخاب رنگ‌های "زشت" نیستند. درباره نادیده گرفتن رابطه هستند.

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

عمیق‌ترین راه حل وحدت است، و یک ترفند قدیمی نقاشی برای آن وجود دارد. همان‌طور که هنرمند Mallery Jane توضیح می‌دهد، "یک راه برای ایجاد هماهنگی رنگ استفاده از تکنیک Mother Color است، کمی از یک رنگ (رنگ مادر) بگیرید و به تمام مخلوط‌هایتان اضافه کنید." همه چیز در نهایت یک زیررنگ مشترک پیدا می‌کند، پس پالت به عنوان یک خانواده خوانده می‌شود نه یک کمیته.

یک روند کاری برای ساختن پالت از یک رنگ

پالت تولید کنید در coolors.co

به الهام نیاز ندارید. به یک فرآیند نیاز دارید. Interaction Design Foundation یک فرآیند قابل تکرار که طراحان حرفه‌ای واقعاً استفاده می‌کنند را بیان می‌کند: الهام پیدا کنید، یک رنگ غالب انتخاب کنید، با چرخه رنگ روابط را بررسی کنید، از مولدها استفاده کنید، سلسله‌مراتب با تناسب تعریف کنید، کنتراست را اطمینان حاصل کنید، نمونه‌سازی کنید، با کاربران آزمایش کنید، و بر اساس بازخورد تکرار کنید.

اینجا آن فرآیند در یک روند کاری فشرده شده که می‌توانید از یک رنگ پایه اجرا کنید.

1. یک رنگ پایه انتخاب کنید. از برند، احساس محصول، یا تنها رنگی که نمی‌توانید از آن صرف نظر کنید شروع کنید. این لنگر شماست.
2. یک رابطه انتخاب کنید، نه یک رنگ. اول احساس را تصمیم بگیرید، سپس بگذارید هندسه رنگ‌های دیگر را به شما بدهد. آرام یعنی مجاور. ضربه یعنی مکمل. زنده یعنی سه‌گانه.
3. رنگ‌های دیگر را از چرخ بخوانید. شکل مطابق را بیندازید و نقاط را بگیرید. حدس نزنید. چرخ از احساس درونی شما دقیق‌تر است.
4. ارزش‌ها را قبل از افزودن رنگ درست کنید. یک حرکت قوی، که توسط هنرمند Chou (@hong_chou_) تکرار می‌شود، این است که "با پالت رنگی نسبتاً تک‌رنگ شروع کنید و اول روی درست کردن کنتراست و ارزش‌ها تمرکز کنید"، سپس "بعضی رنگ‌های دیگر را در روشن‌ترین نواحی معرفی کنید... بدون از دست دادن هماهنگی." ارزش اسکلت است. رنگ پوست است.
5. با یک رنگ مادر یکپارچه کنید. کمی از رنگ پایه‌تان را به هر رنگ دیگری مخلوط کنید تا زیررنگ مشترکی داشته باشند.
6. تناسب تخصیص دهید. از قانون ۶۰-۳۰-۱۰ استفاده کنید تا یک رنگ پیشرو باشد، یکی پشتیبانی کند، و یکی لهجه باشد. بیشتر در ادامه.
7. در زمینه آزمایش کنید، سپس تکرار کنید. روی صفحات واقعی، در اندازه‌های واقعی، در مقابل محتوای واقعی بررسی کنید. تنظیم کنید. ارائه دهید.

خلق و خو را با طرح مطابقت دهید

اول احساس را انتخاب کنید و این جدولی است که سراغش می‌روید.

درباره تناسب: دلیل اینکه مرحله ششم اهمیت دارد این است که رابطه به تنهایی سلسله‌مراتب نمی‌سازد. قانون ۶۰-۳۰-۱۰ آن را حل می‌کند. همان‌طور که House Beautiful توضیح می‌دهد، "یک رنگ غالب برای ۶۰ درصد، یک رنگ ثانوی برای ۳۰ درصد، و یک رنگ لهجه برای ۱۰ درصد باقیمانده." ما این تقسیم را در یک مقاله مستقل به طور کامل پوشش می‌دهیم، پس این را به عنوان یادآوری در نظر بگیرید، نه درس: رنگ غالب معمولاً پایه آرام شماست، و لهجه جایی است که رنگ مکمل ارزش خود را ثابت می‌کند.

ابزارهایی که ریاضی چرخ را برای شما انجام می‌دهند

آن را در color.adobe.com امتحان کنید

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

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

سوالات متداول

تفاوت بین یک طرح رنگ و هماهنگی رنگ چیست؟

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

یک پالت چقدر رنگ باید داشته باشد؟

برای اکثر برندها، سه تا پنج همه چیز را انجام می‌دهد. یک غالب، یک یا دو ثانوی، یک یا دو لهجه، با تناسب ۶۰-۳۰-۱۰ که House Beautiful توضیح می‌دهد اعمال می‌شود. بیش از چهار رنگ متمایز، حفظ هماهنگی به دست سخت می‌شود، به همین دلیل برندهای منضبط مثل Spotify یک رنگ واحد را در رنگ‌های روشن‌تر و تیره‌تر بسیار حمل می‌کنند.

کدام طرح رنگ برای مبتدیان بهترین است؟

مجاور یا تک‌رنگ. هر دو بخشنده هستند چون از کنتراست مستقیم دوری می‌کنند. تک‌رنگ تقریباً غیرممکن است خراب کنید چون در یک رنگ کار می‌کنید، و مجاور فقط می‌خواهد کنتراست ارزش بین همسایگان را مدیریت کنید.

چطور رنگ‌های مکمل بسازم که تضاد نداشته باشند یا لرزش نکنند؟

از آن‌ها به مقدار مساوی یا اشباع مساوی استفاده نکنید. بگذارید یک رنگ فضا را غالب کند و مقابل را به عنوان یک لهجه کوچک، اغلب بیشتر اشباع شده، نگه دارید. تقسیم ۶۰-۳۰-۱۰ دقیقاً برای جلوگیری از جنگیدن دو مقابل با همان بلندی وجود دارد.

آیا هماهنگی رنگ واقعاً بر نحوه پاسخ کاربران تأثیر می‌گذارد؟

اولین تأثیر را به شکل قابل اندازه‌گیری تحت تأثیر قرار می‌دهد. Interaction Design Foundation، با استناد به تحقیقات دانشگاه بازل و Google، می‌گوید مردم جذابیت طراحی را در ۱۷ تا ۵۰ میلی‌ثانیه قضاوت می‌کنند، عمدتاً بر اساس رنگ و ترکیب‌بندی. هماهنگی همان چیزی است که آن قضاوت آنی می‌خواند.

آیا می‌توانم فقط از یک مولد پالت استفاده کنم و تئوری را نادیده بگیرم؟

می‌توانید در چند ثانیه یک رابطه معتبر تولید کنید، بله. آنچه یک مولد نمی‌تواند انجام دهد تعیین تناسب، رفع کنتراست ارزش، بررسی دسترسی، یا دانستن معنای برند شماست. تئوری همان چیزی است که یک پالت معتبر را به یک پالت کارآمد تبدیل می‌کند.

دیگر رنگ را حدس نزنید

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

یک رنگ پایه انتخاب کنید، یک احساس انتخاب کنید، و رنگ‌های دیگر را از هندسه بخوانید. ارزش‌ها را درست کنید، با یک رنگ مادر یکپارچه کنید، به نسبت ۶۰-۳۰-۱۰ تقسیم کنید، و جایی که واقعاً زندگی می‌کند آزمایش کنید. این تمام روش است، و هر بار از غریزه بهتر است.

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

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