تئوری رنگ: از چرخه رنگ تا هارمونی

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

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

مدل رنگ را پیش از چرخه بشناسید

راهنمای Color Modes در Adobe درباره RGB و CMYK توضیح می‌دهد. نور نمایشگر و جوهر چاپ قرارداد یکسانی ندارند. چرخه سنتی RYB با قرمز، زرد و آبی نیز یک مدل آموزشی برای روابط رنگ است و نباید به عنوان primaryهای همه سیستم‌های دیجیتال معرفی شود. نام یک رنگ ممکن است در مدل‌های متفاوت جایگاه و رابطه دیگری داشته باشد.

برای پروژه، مدل و مقصد را مشخص کنید. مقدار RGB بدون زمینه color space همه شرایط نمایش را بیان نمی‌کند. تبدیل به CMYK هم ممکن است دامنه بعضی رنگ‌ها را عوض کند. اگر خروجی چاپ دارید، profile و قرارداد چاپخانه اهمیت دارد. اگر مقصد وب است، قالب‌های CSS و رفتار نمایشگر مطرح می‌شوند. تصمیم پالت باید از همین مقصد آغاز شود، نه از یک چرخه عمومی بدون مدل.

Hue، Saturation و Lightness

مرجع HSL در MDN شیوه بیان hue، saturation و lightness را شرح می‌دهد. Hue تنها یکی از اجزای رنگ است. دو نمونه با hue یکسان می‌توانند به دلیل اشباع و lightness ظاهر بسیار متفاوتی داشته باشند. در انتخاب پالت، فقط زاویه چرخه را ثبت نکنید؛ مقدارهای دیگر و نقش هر رنگ را هم نگه دارید تا خروجی قابل تکرار باشد.

Lightness در یک مدل نباید بدون دقت معادل روشنایی ادراک‌شده یا نسبت کنتراست تلقی شود. رنگ‌های مختلف با عدد ظاهراً برابر می‌توانند وزن دیداری متفاوتی داشته باشند. انتخاب عددهای مساوی لزوماً مقایسه عادلانه نمی‌سازد. برای کاربرد متن، زوج زمینه و foreground را بررسی کنید. ابزار color picker امکان تغییر مقدار می‌دهد، اما معنی کاربردی آن باید در همان طرح قضاوت شود.

چرخه یک رابطه را نشان می‌دهد

توضیح Color Wheel در MDN مدل نمایش hueها و روابط آن‌ها را معرفی می‌کند. Complementary، analogous و triadic روش‌هایی برای انتخاب رابطه‌اند. رنگ‌های مقابل یا نزدیک در چرخه می‌توانند نقطه شروع باشند، ولی فاصله هندسی به‌تنهایی دلیلی برای تعادل نهایی نیست. مدل چرخه و تغییر روشنایی و اشباع بر نتیجه اثر دارند.

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

Harmony تضمین زیبایی نیست

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

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

رنگ‌های خنثی هم نقش دارند

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

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

کنتراست از رنگ واحد به دست نمی‌آید

راهنمای Contrast Minimum دامنه متن و نسبت‌های مربوط را توضیح می‌دهد. یک رنگ بدون زوج پس‌زمینه قابل قضاوت کامل نیست. اندازه و وزن متن هم در دامنه معیار اهمیت دارد. برای حالت hover، focus و disabled نیز قرارداد جدا لازم است. «رنگ برند تیره است» جای محاسبه و مرور ترکیب واقعی متن و سطح را نمی‌گیرد.

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

رنگ در CSS

مرجع CSS Colors قالب‌ها و دامنه مدل‌های رنگ را معرفی می‌کند. HEX و RGB ممکن است یک مقدار را با شکل‌های نوشتاری متفاوت بیان کنند. انتخاب قالب باید با ابزار و قرارداد پروژه هماهنگ باشد. نام ساده مانند blue هم می‌تواند برای نمونه کافی باشد، ولی در سیستم طراحی واقعی مقدار و نقش دقیق معمولاً قابل پیگیری‌تر است.

مرجع OKLCH مدل lightness، chroma و hue را شرح می‌دهد. این مدل می‌تواند برای بعضی تغییرهای پالت مفید باشد، اما رنگ خارج از gamut و سازگاری محیط همچنان نیاز به توجه دارند. استفاده از syntax تازه به‌خودی‌خود همه ترکیب‌ها را خوانا یا زیبا نمی‌کند. مدل ابزار بیان است و هدف کاربردی باید جدا حفظ شود.

ترکیب و شفافیت

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

در palette ثبت‌شده، ترکیب‌های مجاز را نشان دهید. برای مثال، accent روشن شاید فقط روی سطح تیره یا در شکل تزئینی مناسب باشد. اگر اعضای تیم مقدار را هرجا استفاده کنند، نقش از دست می‌رود. راهنمای پوستر درباره رابطه تصویر و متن توضیح دارد. در همان طرح، تغییر crop یا عکس می‌تواند زوج رنگ و کنتراست را عوض کند.

چاپ و خروجی

مقدار نمایشگر را بدون قرارداد تبدیل به فایل چاپ منتقل نکنید. جوهر، کاغذ و profile می‌توانند نتیجه متفاوت بسازند. رنگ spot نیز با ترکیب process یک مفهوم یکسان نیست و باید با روش تولید هماهنگ باشد. هدف این نیست که همه فایل‌ها الزاماً به یک mode تبدیل شوند؛ تنظیم باید با مقصد و درخواست تولیدکننده سازگار باشد. نسخه منبع و خروجی مقصد را جدا نگه دارید.

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

پالت برای داده و رابط

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

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

ثبت دلیل انتخاب

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

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