تئوری رنگ برای طراحان: سیستمی پشت هر پالت خوب
تئوری رنگ برای طراحان حرفهای. چرخه رنگ، هارمونیها، ادراک، روانشناسی، دسترسپذیری، و اینکه چطور design system های مدرن همه اینها را به محصول نهایی تبدیل میکنند.
تئوری رنگ مثل یک درس تاریخ هنر تدریس میشود و مثل مهندسی ساختمان اجرا میشود. چرخهها، هارمونیها، رنگهای مکمل. گرم و سرد.
«قرمز یعنی شور و اشتیاق.» اینها همان چیزهایی هستند که اکثر طراحان در مدرسه تحویل میگیرند، و تقریباً هیچکدام از آنها در برخورد با یک رابط کاربری واقعی دوام نمیآورند.
آنچه طراحان حرفهای واقعاً نیاز دارند یک stack است. یک سیستم لایهای که از نحوه ادراک چشم از رنگ شروع میشود، از چرخه رنگ و هارمونیهایش عبور میکند، به contrast و hierarchy میرسد، از روانشناسی و فرهنگ میگذرد، از ساخت پالت بالا میرود، و در نهایت به token ها و design system هایی ختم میشود که محصول را به بازار میرسانند. یک لایه را رد کنید و پالت در Figma خوب به نظر میرسد و در production از هم میپاشد.
این مقاله کل stack است. هر لایه مقاله Brainy مخصوص خودش را دارد برای کاوش عمیقتر. اینجا آنها را به هم وصل میکنیم.
تئوری رنگ واقعاً از شما میخواهد چه مشکلی را حل کنید
تئوری رنگ مجموعهای از قوانین زیباشناختی نیست، بلکه یک stack از بینایی، ادراک، و تفکر سیستماتیک است که باید همه با هم کار کنند تا یک پالت به بازار برسد.
نسخه کوتاه: بینایی انسان عجیب است، رنگ فیزیکی است، و طراحان باید خروجیهایی تولید کنند که برای میلیونها نفر روی صدها دستگاه در دهها context کار کند. تئوری همان واژگانی است که برای استدلال درباره این مشکل استفاده میکنیم. این یک سری فرمان نیست. این مجموعه مفاهیم مشترکی است که به شما اجازه میدهد از «این درست به نظر نمیرسد» برسید به «رنگ accent با background رقابت میکند و contrast در ۱۴pt شکست میخورد.»
stack به عمد لایهای است. هر لایه سوال متفاوتی را پاسخ میدهد.
| لایه | سوالی که پاسخ میدهد |
|---|---|
| ادراک | چشم واقعاً این رنگ را در context چطور میبیند؟ |
| چرخه | رابطه hue بین این رنگها چیست؟ |
| هارمونی | آیا این رنگها مرتبط به نظر میرسند یا با هم تضاد دارند؟ |
| Contrast | آیا این قابل خواندن، دیدن، کلیک کردن است؟ |
| پالت | چه رنگهایی متعلق به این برند یا محصول هستند؟ |
| سیستم | این رنگها چطور به طور یکپارچه در مقیاس اعمال میشوند؟ |
| دسترسپذیری | آیا هر جفتی در سیستم برای هر کاربری کار میکند؟ |
هر لایه بار خودش را میبرد. پالتی که بدون تفکر ادراکی طراحی شده در context شکست میخورد. سیستمی که بدون دسترسپذیری ساخته شده در audit شکست میخورد.
هارمونیای که بدون منطق پالت انتخاب شده در مقیاس شکست میخورد. لایهها روی هم اثر مضاعف دارند، که همین دلیلی است که درست کردن رنگ سود مضاعف به همراه میآورد.
چرخه، هارمونیها، و اینکه واقعاً برای چه هستند
color wheel یک مدل از روابط hue است، و هارمونیها میانبرهایی برای انتخاب جفتها و گروههایی هستند که چشم آنها را مرتبط میخواند.
اکثر طراحان چرخه را به شکل مثلثهای اولیه-ثانویه-ثالثی یاد میگیرند و دیگر از آن استفاده نمیکنند. این اتلاف است. چرخه سریعترین راه برای استدلال درباره این است که کدام رنگها با هم تعلق دارند و کدامها با هم میجنگند، که هر بار که رنگ جدیدی به پالت، نمودار، یا علامت اضافه میکنید اهمیت دارد.
چهار هارمونی در کار محصول و برند جایگاه خود را ثابت کردهاند.
Complementary
رنگهای مقابل هم روی چرخه. آبی و نارنجی، قرمز و سبز، بنفش و زرد. رنگهای complementary بالاترین تنش بصری ممکن بین دو hue ایجاد میکنند.
این برای تاثیر لحظهای واحد عالی است (یک پوستر، یک تصویر hero، یک لباس ورزشی) و برای استفاده گسترده در رابط کاربری افتضاح است، به همین دلیل است که تقریباً هیچوقت پالت محصول با complementary خالص نمیبینید. در UI، complementary ها نرم میشوند: یک hue غالب است، دیگری به عنوان accent محدود ظاهر میشود.
Analogous
رنگهای مجاور روی چرخه. آبی آسمانی، آبی، آبی-بنفش. پالتهای analogous منسجم و آرام به نظر میرسند.
اینها پایه اکثر brand system های مدرن هستند. خطر این است که اگر contrast value کافی بین hue ها وجود نداشته باشد میتوانند یکنواخت به نظر برسند. Analogous زمانی کار میکند که با color palette مثل یک خانواده رفتار کنید، نه مجموعهای از رقیبان.
Triadic و Split-Complementary: جفت کماستفاده
Complementary و analogous بیشترین توجه را در مدرسه طراحی دریافت میکنند. دو هارمونی بعدی کمتر دربارهشان صحبت میشود و برای طراحان حرفهای اغلب مفیدتر هستند.
Triadic
سه hue با فاصله مساوی دور چرخه. قرمز-زرد-آبی. نارنجی-سبز-بنفش. پالتهای triadic شاد و پرانرژی به نظر میرسند، به همین دلیل است که در برندهای کودکان، ورزش، و سرگرمی ظاهر میشوند.
در طراحی محصول، triadic خالص نادر است چون تعادل دادن آن سخت است. پالتهای الهامگرفته از triadic (یک hue غالب، دو تای دیگر کمرنگ) همهجا هستند.
Split-Complementary
یک hue به اضافه دو hue مجاور با complement آن. آبی به اضافه زرد-نارنجی و قرمز-نارنجی. Split-complementary بیشتر contrast رنگ complementary را با تنش کمتر حفظ میکند. این هارمونی دستکمگرفتهشدهای است که وقتی دنبالش بگردید در بسیاری از brand system های خوب اجرا شده پیدا میشود.
هارمونیها ابزار هستند، نه جواب. شما یک brand palette را با گفتن «بیایید triadic انجام دهیم» انتخاب نمیکنید. از هارمونیها برای استدلال درباره ترکیبهای پیشنهادی و شناسایی آنهایی که قبلاً کار میکنند استفاده میکنید.
ادراک همیشه بر تئوری غالب است
همان قرمز روی همان دکمه در یک صفحه خنثی فوری به نظر میرسد، در یک صفحه نارنجی پر سر و صدا، و در یک صفحه قرمز تیره نامرئی، و هیچکدام از اینها با چرخه توضیح داده نمیشود.
Context ضریب قدرت در رنگ است. یک رنگ معنای ثابت، روشنایی ثابت، یا خوانایی ثابتی ندارد. این رابطهای دارد با آنچه کنارش قرار دارد، آنچه یک ثانیه پیش روی صفحه بود، دستگاهی که کاربر نگاهش میکند، و نوری که روی آن دستگاه میتابد. تئوری بدون ادراک، تئوری در خلاء است.
سه اثر ادراکی ارزش دارد که با نام بشناسید.
Simultaneous contrast. همان خاکستری کنار سیاه روشنتر و کنار سفید تیرهتر به نظر میرسد. معنایش این است: رنگ برندی که روی پسزمینه استودیوی سفید انتخاب میکنید وقتی روی یک hero تاریک بیفتد کاملاً متفاوت احساس میشود. باید رنگها را در context تولیدشان آزمایش کنید، نه به تنهایی.
Chromatic adaptation. چشم در ۵۰۰ میلیثانیه یا کمتر با رنگ محیط تطبیق پیدا میکند. صفحهای که پنج ثانیه روی یک hero نارنجی گرم بوده قبل از اسکرول به یک ناحیه محتوای خنثی، نسبت به آنچه واقعاً هست کمی خنکتر احساس میشود. ادراک کاربر بدون اینکه متوجه شود تغییر کرده.
Value clustering. چشم آیتمهایی با روشنایی مشابه را مرتبط و با تاریکی مشابه را جداگانه گروهبندی میکند. این چگونگی کار hierarchy است. یک طراحی قوی از contrast value بیشتر از contrast hue استفاده میکند چون value چیزی است که سیستم بصری اول پردازش میکند.
روانشناسی رنگ: شواهد در مقابل خرافات
روانشناسی رنگ واقعی است اما بیشتر آنچه روانشناسی رنگ نامیده میشود افسانههای بازیافتی است، به همین دلیل است که طراحان باید شواهد را از فولکلور جدا کنند.
تحقیقات واقعی درباره مطالعه تشخیص برند Loyola (رنگ تا ۸۰٪ تشخیص برند را افزایش میدهد)، اثرات اشباع رنگ بر فوریت ادراکشده، ترجیحات dark mode، و ارتباطات فرهنگی رنگ وجود دارد. این مفید است. همچنین سیل پستهای وبلاگی که ادعا میکنند «قرمز conversion را ۲۱٪ افزایش میدهد» وجود دارد که با کمترین بررسی از هم میپاشند. این مفید نیست.
آزمون سریع: هر ادعای روانشناسی رنگ که شامل context، فرهنگ، یا مخاطب نباشد خرافه است. معنای رنگ همیشه contextual است. سبز در fintech آمریکا به معنای پول و در wellness به معنای طبیعت خوانده میشود، و هر دو در context خودشان درست هستند.
برای تفکیک کامل آنچه واقعی است، آنچه بازیافتی است، و نحوه واقعی اعمال روانشناسی رنگ در کار برند و محصول، مقاله روانشناسی رنگ در طراحی چارچوب مبتنی بر شواهد را دارد.
چرا قوانین نسبت در مقیاس محصول شکستند
قانون 60-30-10 و مشابههایش یک مشکل تکسطحی را حل کردند، و طراحی محصول تکسطحی نیست.
طراحی داخلی 60-30-10 را برای پاسخ به «چه مقدار از هر رنگ روی دیوارها، مبلمان، و اکسسوریها برود» اختراع کرد. این به یک اتاق نقشه میشود. به یک محصول دیجیتال که صدها سطح، دهها حالت، light mode و dark mode، و کاربرانی روی طیفی از دستگاهها دارد نقشه نمیشود.
رنگ محصول مدرن نسبت را رها کرد و به سراغ نقشها رفت. Surface، محتوا، accent، حالت، semantic. هر نقش یک design token دریافت میکند که برای هر theme به مقدار خام متفاوتی تبدیل میشود. این جایگزین 60-30-10 است، و تنها چیزی است که مقیاس مییابد.
توضیح کامل اینکه چرا نسبت شکست و token system های مبتنی بر نقش در عمل چطور به نظر میرسند در مقاله قانون 60-30-10 شکسته است است.
دسترسپذیری اکنون بخشی از تئوری رنگ است
WCAG و APCA دسترسپذیری را از «چیزی که QA در آخر بررسی میکند» به یک ویژگی خود سیستم رنگ تبدیل کردند.
مدت طولانی، دسترسپذیری یک مکالمه جداگانه بود. طراحان یک پالت برای زیبایی انتخاب میکردند، QA در آخر نسبتها را بررسی میکرد، چیزی تنظیم میشد، همه ادامه میدادند. این workflow مقیاس نمییابد. هر design system که امروز به بازار میرسد دسترسپذیری را در لایه token کدگذاری میکند، که یعنی خود پالت باید از همان ابتدا در برابر contrast ratio و آستانههای ادراکی طراحی شود.
نسخه کوتاه: WCAG 2.2 AA کف انطباق است (4.5:1 برای متن، 3:1 برای متن بزرگ و UI غیر متنی). APCA الگوریتم ادراکی است که بهتر با خوانایی واقعی همبستگی دارد و برای WCAG 3 پیشنهاد شده. محصولات واقعی هر دو را هدف قرار میدهند.
برای دیدگاه کامل یک طراح حرفهای درباره نسبتهای WCAG، APCA، و نحوه tokenize کردن contrast در design system ها، مقاله contrast رنگ دسترسپذیر آن را از ابتدا تا انتها پوشش میدهد.
ساختن یک پالت: Stack طراح حرفهای
پالتی که به بازار میرسد و مقیاس مییابد لایه به لایه ساخته میشود، نه در یک نشست انتخاب میشود.
فرآیندی که کار میکند به ترتیب مشخصی اجرا میشود. هر لایه لایه بعدی را محدود میکند، که اینطور پالت را منسجم نگه میدارید به جای اینکه به مجموعهای از انتخابهای رنگ یکباره دریفت کند.
-
با یک مقیاس خنثی شروع کنید. 8 تا 12 گام از خاکستری بسازید (یا نزدیک به خاکستری، اغلب کمی به سمت دمای برند hue-shift شده). بیشتر یک رابط کاربری واقعی خنثی است. این پایهای است که هر لایه دیگری روی آن مینشیند.
-
accent برند را انتخاب کنید. یک رنگ لنگر، آنچه که اگر یک خواننده آن را به تنهایی ببیند با برند مرتبط میکند. خویشتنداری اینجا همه چیز است. tier accent را برای لحظات برند، اقدامات اولیه، و عناصر سیگنال بالا رزرو کنید.
-
رنگهای semantic اضافه کنید. موفقیت، هشدار، بحرانی، اطلاعات. اینها کارکردی هستند، نه تزئینی، و باید در light mode و dark mode بدون داشتن شخصیت برند کار کنند. آنها را به عنوان ابزار در نظر بگیرید، نه طعمدهنده.
-
به یک tier حالت گسترش دهید. Hover، focus، pressed، disabled، selected. اینها معمولاً از tier های دیگر مشتق میشوند (یک accent تیرهتر برای hover، یک خنثی کمرنگ برای disabled) اما token های خودشان هستند.
-
همه چیز را tokenize کنید. هر جفتی که به بازار میرسد به یک نام نقش نیاز دارد.
text-on-accent،bg-subtle،border-default. اگر طراح بتواند به رنگ خام بدون token برسد، پالت قبلاً نشت میکند. -
در برابر ادراک آزمایش کنید، نه فقط ریاضیات. ابتدا نسبتهای WCAG، دوم امتیازات APCA، سپس آزمایشهای دنیای واقعی: حالت grayscale، squint test، پیشنمایش نور کم، واکنشهای پنجثانیهای از افرادی که روی برند کار نمیکنند.
-
Dark mode را به عنوان یک مجموعه token موازی بسازید. نه یک فیلتر. نه یک inversion. یک پالت موازی درست که همان token ها را به مقادیر مختلف تبدیل میکند.
به ترتیب بسازید، نه در یک نشست
ترتیب مهم است چون خنثیها کار سنگین را در هر صفحهای انجام میدهند، و طراحانی که با accent color شروع میکنند بقیه پالت را دور یک تصمیم میسازند که ممکن است دوام نیاورد. از لایه آرام شروع کنید. لایه بلند را آخر اضافه کنید.
Design System ها به عنوان تئوری رنگ کاربردی
بهترین مطالب مرجع برای تئوری رنگ امروز یک کتاب درسی نیست، بلکه مستندات عمومی design system برندهایی است که در مقیاس به بازار میرسانند.
این سیستمها هر لایه از stack را در پیشفرضها میگنجانند. آنها همچنین رایگان، متنباز، و توسط افرادی که هر روز رنگ محصول میفرستند نگهداری میشوند.
Material Design 3
در m3.material.io به صورت زنده ببینید
Material 3 در تئوری رنگ به عنوان سیستم کاربردی صریحترین است. هر نقش یک همتای on- جفتشده دارد (متن/آیکونهایی که روی آن نقش مینشینند)، مقیاسها از hue-chroma-tone به جای HSL مشتق میشوند، و کل سیستم برای theming پویا از یک رنگ منبع واحد ساخته شده.
آنچه از آن بگیرید: الگوی on-. وقتی طراح primary را برای یک دکمه انتخاب میکند، سیستم قبلاً میداند رنگ متن روی آن دکمه چه باشد. دسترسپذیری و تئوری contrast در نامگذاری پخته شدهاند.
Radix Colors
در radix-ui.com به صورت زنده ببینید
Radix مقیاسهای ۱۲ مرحلهای به ازای هر hue با هر مرحله نقشهبرداریشده به یک نقش خاص (پسزمینه app، پسزمینه ظریف، عنصر UI، hover، focus، active، solid، متن، متن با contrast بالا) ارائه میدهد. این در واقع یک مرجع color harmony است که به یک نردبان contrast چسبانده شده. طراحان برای متن با contrast بالا به مرحله ۱۱ میرسند و میدانند در برابر مراحل پایینتر AA را پاس میکند.
آنچه از آن بگیرید: نردبان شمارهگذاریشده. دادن یک نقش به هر مرحله از مقیاس، بحث «کدام خاکستری استفاده کنم» را از هر بررسی طراحی حذف میکند.
Adobe Spectrum: یکنواختی ادراکی در مقیاس
Material و Radix رنگ را در لایه نقش حل میکنند. Adobe عمیقتر میرود و خود مقیاسها را بر مدلهای ادراکی میسازد تا روابط contrast وقتی hue ها میچرخند ثابت بمانند.
در spectrum.adobe.com به صورت زنده ببینید
Spectrum از مقیاسهای یکنواخت ادراکی استفاده میکند تا دو token با همان شماره مرحله وزن بصری یکسانی در هر hue داشته باشند. این یعنی یک theme میتواند از آبی به نارنجی بچرخد بدون اینکه contrast بشکند، چون روابط ادراکی در سطح مقیاس قفل شدهاند.
آنچه از آن بگیرید: یکنواختی ادراکی. اگر مقیاس شما روی مدلهای ادراکی مثل OKLCH یا HSLuv ساخته شده باشد، دسترسپذیری در theme های برند قابل حمل میشود به جای اینکه برای هر رنگ جدید دوباره تایید شود.
سوالات متداول
به عنوان یک طراح چطور واقعاً تئوری رنگ یاد بگیرم؟
stack را از بالا به پایین بخوانید (ادراک، چرخه، هارمونی، contrast، پالت، سیستم)، سپس آن را به ترتیب روی یک پروژه واقعی اعمال کنید. تئوری بدون کاربرد در یک هفته محو میشود. تئوری اعمالشده روی یک پالت منتشرشده ماندگار میشود چون بازخورد فوری است. با خواندن کتاب Interaction of Color اثر Josef Albers برای ادراک شروع کنید، یک بعدازظهر روی مستندات Radix Colors برای نردبانهای contrast کاربردی وقت بگذارید، و یک پالت واقعی با استفاده از stack بالا بسازید.
آیا باید علم را بدانم یا فقط میتوانم از ابزارها استفاده کنم؟
میتوانید بدون دانستن فیزیک نور یا زیستشناسی سلولهای مخروطی به بازار برسانید. بدون دانستن ادراک، contrast، و تفکر سیستماتیک مبتنی بر نقش نمیتوانید.
ابزارها ریاضیات را مدیریت میکنند. طراح قضاوت را مدیریت میکند. طراحی که کاملاً به ابزارها تکیه میکند طراحی است که نمیتواند بفهمد ابزارها کِی اشتباه میکنند (که اغلب است، به خصوص برای ریاضیات WCAG 2).
بزرگترین اشتباه طراحان جدید با رنگ چیست؟
ابتدا accent را انتخاب کردن. accent بلندترین رنگ در پالت است، و ساختن بقیه پالت دور یک تصمیم بلند تقریباً همیشه یک پالت بلند تولید میکند.
با خنثیها شروع کنید. بگذارید accent آخرین چیزی باشد که قفل میکنید. اگر بقیه stack درست باشد میتوانید accent را بعداً عوض کنید.
تئوری رنگ اختیاری نیست، محیطی است
تئوری رنگ بخشی از طراحی است که هیچکس دربارهاش بحث نمیکند و همه اعمال میکنند، چه بدانند چه نه.
طراحی که «آن مرجانی، درست احساس میشود» را انتخاب میکند تئوری رنگ را اعمال میکند. مدیر محصولی که میپرسد «میتوانیم دکمه را برجستهتر کنیم» یک سوال تئوری رنگ میپرسد. کاربری که میگوید «این صفحه شلوغ احساس میشود» یک شکست value-contrast را گزارش میدهد.
تئوری قبلاً در اتاق است. سوال این است که آیا به صورت آگاهانه روی آن عمل میکنید یا بعد از واقعیت به آن واکنش نشان میدهید.
کار کردن با stack نامرئی را مرئی میکند. دیگر رنگ انتخاب نمیکنید، بلکه پالت طراحی میکنید. دیگر hue انتخاب نمیکنید، بلکه سیستم طراحی میکنید. دیگر درباره دسترسپذیری حدس نمیزنید، بلکه آن را میفرستید.
سود مضاعف است. پالتی که از طریق stack طراحی شده به تمیزی rebrand میشود، به تمیزی dark mode میشود، به تمیزی مقیاس مییابد، و به تمیزی از audit ها عبور میکند. پالتی که بر اساس حس انتخاب شده هیچکدام از اینها را انجام نمیدهد و هر بار که یکی از آنها مهم میشود برای تیم وقت میگیرد.
stack را یاد بگیرید. با stack کار کنید. stack را بفرستید.
Want a color system that actually works end to end? Brainy builds palettes from perception to tokens with accessibility baked in.
Get Started
