منبع: بنیاد طراحی تعامل (IxDF) · بازنویسی آزاد: سپنتا پویا · مرداد ۱۴۰۵ · زمان مطالعه: حدود ۱۵ دقیقه

نظریهٔ رنگ (Color Theory) چیست؟

💡 این متن «بازنویسی آزاد» است: ایده‌ها و مفاهیم مطلب اصلی با نگارش کاملاً مستقل فارسی و مثال‌های تازه بازگو شده‌اند و ترجمهٔ کلمه‌به‌کلمه نیست. این نسخه علاوه بر مطلب اصلی، چند بخش کاربردی هم دارد که در منبع نیامده و جداگانه در انتهای صفحه مشخص شده‌اند.

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

چرا برای طراح محصول مهم است؟ چون رنگ سریع‌ترین چیزی است که کاربر می‌بیند — پیش از آنکه یک کلمه بخواند. پژوهش دانشگاه بازل و گوگل نشان داده آدم‌ها جذابیت بصری یک طرح را در ۱۷ تا ۵۰ هزارم ثانیه قضاوت می‌کنند. و طبق آماری که مطلب اصلی می‌آورد، بیش از ۶۰ درصد آدم‌ها محصول تازه را بر پایهٔ رنگ می‌پذیرند یا رد می‌کنند.

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

رنگ، در چشم بیننده است

پایهٔ این حوزه را آیزاک نیوتن در سال ۱۶۶۶ با ساختن چرخهٔ رنگ گذاشت. اما مهم‌ترین چیزی که نیوتن فهمید، خودِ چرخه نبود؛ این بود که رنگ‌ها ادراک انسان از طول‌موج‌های نورند، نه ویژگی‌های مطلق اشیا. آن سیب «قرمز نیست»؛ نوری با طول‌موج مشخص را بازمی‌تاباند و دستگاه بینایی ما آن را قرمز می‌سازد.

این نکته برای طراح، سه نتیجهٔ عملی دارد:

• - رنگ روی دستگاه‌ها یکسان نیست. رنگی که روی مانیتور کالیبره‌شدهٔ شما می‌بینید، همان چیزی نیست که کاربر روی گوشی ارزان‌قیمتش در نور آفتاب می‌بیند.
• - کنتراست هم‌زمان: یک رنگ در مجاورت رنگ‌های مختلف، متفاوت دیده می‌شود. خاکستری‌ای که روی سفید تیره به‌نظر می‌رسد، روی مشکی روشن دیده می‌شود — بی‌آنکه خودش تغییر کرده باشد.
• - متامریسم: دو رنگ که زیر یک منبع نور یکسان به‌نظر می‌رسند، ممکن است زیر نور دیگری کاملاً متفاوت شوند.

نیوتن رنگ‌ها را در سه دسته سامان داد که هنوز هم مبنای کار است: اصلی (قرمز، آبی، زرد)، ثانویه (حاصل ترکیب دو رنگ اصلی) و ثالثیه (حاصل ترکیب یک رنگ اصلی با یک ثانویه). چرخه‌ای که در ابتدای این صفحه می‌بینید، همین دوازده فام است که ۳۰ درجه با هم فاصله دارند.

سه مدل رنگ که باید از هم تفکیک کنید

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

• - مدل کاهشی (CMY / رنگدانه): وقتی رنگ روی کاغذ می‌گذارید، هر لایه بخشی از نور را حذف می‌کند. هرچه بیشتر مخلوط کنید، تیره‌تر می‌شود و در نهایت به سیاه گِل‌آلود می‌رسید. رنگ‌های اصلی این مدل همان قرمز و زرد و آبی‌اند که در مدرسه یاد گرفتیم.
• - مدل افزایشی (RGB / نور): نمایشگر نور تولید می‌کند، پس هرچه بیشتر اضافه کنید روشن‌تر می‌شود و جمع کامل، سفید است. رنگ‌های اصلی اینجا قرمز، سبز و آبیاند. کد hex که می‌نویسید — مثل #1B72B8 — دقیقاً سه عدد در همین مدل است.
• - مدل ادراکی (HSL / HSB): این مدل همان RGB است که به زبان آدمیزاد بازنویسی شده: فام، اشباع، روشنایی. برای کارکردن بهترین مدل است، چون وقتی می‌خواهید «همین رنگ ولی کمی روشن‌تر» بسازید، فقط یک عدد را تغییر می‌دهید.

جمع‌بندی عملی: چرخهٔ رنگ را برای فکرکردن دربارهٔ هماهنگی نگه دارید، ولی برای ساختن رنگ‌ها با HSL کار کنید و خروجی را hex بدهید. اگر تا امروز رنگ‌ها را با انتخابگر رنگ و چشم انتخاب می‌کردید، همین یک تغییر بیشترین اثر را روی نظم پالت شما می‌گذارد.

فام، روشنایی و اشباع

برای حرف‌زدن دقیق دربارهٔ رنگ به سه واژه نیاز دارید — همان‌ها که در هر ابزار طراحی زیر نام HSB یا HSL می‌بینید:

• - فام (Hue): همان چیزی که رنگ را «قرمز» یا «آبی» یا «سبز» می‌کند؛ یعنی موقعیتش روی چرخهٔ رنگ. با درجه اندازه‌گیری می‌شود، از ۰ تا ۳۶۰.
• - روشنایی (Value / Lightness): میزان روشنی یا تیرگی رنگ. این ویژگی است که کنتراست و حس عمق را می‌سازد.
• - اشباع (Saturation): خلوص و شدت رنگ؛ از کاملاً اشباع (زنده) تا کم‌اشباع (خاکستری‌شده).

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

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

یک نکتهٔ کمتر گفته‌شده هم دربارهٔ اشباع: رنگ کاملاً اشباع روی نمایشگر خسته‌کننده است. رنگ‌های ۱۰۰٪ اشباع در طبیعت تقریباً وجود ندارند و چشم برای تحملشان زحمت می‌کشد. اگر پالت شما «جیغ» به‌نظر می‌رسد، معمولاً مشکل از انتخاب فام نیست؛ از این است که اشباع را کم نکرده‌اید.

تینت، شید و تون: چطور از یک رنگ، یک طیف بسازیم

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

• - تینت (Tint): رنگ پایه + سفید. نتیجه روشن‌تر و ملایم‌تر است. برای پس‌زمینه‌های ملایم، حالت‌های hover و نشان‌های کم‌اهمیت عالی است.
• - شید (Shade): رنگ پایه + سیاه. تیره‌تر و سنگین‌تر. برای متن روی زمینهٔ روشن، حالت فشرده‌شدن دکمه و حاشیه‌ها به کار می‌آید.
• - تون (Tone): رنگ پایه + خاکستری. کم‌جان‌تر و آرام‌تر. برای وقتی که می‌خواهید رنگ حضور داشته باشد اما فریاد نزند.

قاعده‌ای که در عمل خوب جواب می‌دهد: از هر رنگ کلیدی، حدود ۹ تا ۱۱ پله بسازید (مثلاً ۵۰، ۱۰۰، ۲۰۰ … ۹۰۰) و بعد از آن هر جا رنگ لازم داشتید، از این پله‌ها انتخاب کنید نه از انتخابگر رنگ. این تفاوت میان پالتی است که «به‌نظر مرتب می‌آید» و پالتی که واقعاً مرتب است.

هفت طرح رنگی

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

• - تک‌فام (Monochromatic): یک فام و بازی با تیرگی و روشنی آن. کم‌ریسک‌ترین انتخاب و بسیار مناسب رابط‌های کاری و داشبوردها. عیبش این است که برجسته‌کردن یک عنصر سخت می‌شود — راه‌حل معمول، افزودن یک رنگ تأکید کاملاً جدا برای کنش اصلی است.
• - مشابه (Analogous): سه رنگ کنار هم روی چرخه (مثلاً نارنجی، زرد‑نارنجی، زرد). آرام و طبیعی است، چون در طبیعت زیاد دیده می‌شود. مراقب باشید یکی را «اصلی» کنید و دو تای دیگر را پشتیبان، وگرنه طرح بی‌مرکز می‌شود.
• - مکمل (Complementary): دو رنگ روبه‌روی هم؛ بیشترین کنتراست ممکن. برای دکمهٔ اصلی عالی است و برای پس‌زمینهٔ متن، فاجعه. هرگز متن را با رنگ مکملِ پس‌زمینه‌اش ننویسید — چشم روی مرزشان می‌لرزد.
• - مکمل شکسته (Split-Complementary): به‌جای رنگ روبه‌رو، دو همسایهٔ آن را برمی‌دارید. تقریباً همان کنتراست را می‌دهد اما ملایم‌تر است؛ برای بیشتر محصول‌ها انتخاب امن‌تری از مکمل خالص است.
• - سه‌گانه (Triadic): سه رنگ با فاصلهٔ ۱۲۰ درجه. هم متنوع است و هم متعادل. برای محصولاتی که لحن سرزنده می‌خواهند مناسب است، اما هر سه را هم‌وزن نکنید.
• - چهارگانه (Tetradic): چهار رنگ در قالب دو جفت مکمل. قوی است اما به تعادل‌دادن دقیق نیاز دارد؛ معمولاً یک رنگ غالب و سه رنگ پشتیبان.
• - مربعی (Square): چهار رنگ با فاصلهٔ مساوی ۹۰ درجه؛ وقتی خوب کار می‌کند که سهم رنگ‌ها متعادل نباشد و یکی رهبری کند.

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

رنگ‌های گرم و سرد

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

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

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

قاعدهٔ ۶۰-۳۰-۱۰

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

• - ۶۰ درصد رنگ غالب — معمولاً خنثی: پس‌زمینه‌ها، سطح‌ها، فضای خالی.
• - ۳۰ درصد رنگ ثانویه — ساختار: نوار بالا، بخش‌بندی‌ها، عناصر تکرارشونده.
• - ۱۰ درصد رنگ تأکید — فقط چیزی که باید دیده شود: کنش اصلی، نشانگر وضعیت، هشدار.

مهم‌ترین درس این قاعده در همان عدد ۱۰ است: رنگ تأکید به این دلیل کار می‌کند که کمیاب است. اگر در یک صفحه هفت دکمهٔ قرمز داشته باشید، هیچ‌کدام دیگر تأکید نیستند. وقتی طراحی می‌کنید و حس می‌کنید «این دکمه به‌قدر کافی دیده نمی‌شود»، پیش از آنکه رنگش را پررنگ‌تر کنید، بشمارید چند چیز دیگر در آن صفحه رنگی هستند. تقریباً همیشه راه‌حل، کم‌کردن رنگ از بقیه است نه اضافه‌کردن رنگ به این یکی.

از پالت تا سیستم: رنگ‌های معنایی

تا اینجا دربارهٔ زیبایی حرف زدیم؛ حالا دربارهٔ نگهداری. در یک محصول واقعی، رنگ‌ها را نباید بر اساس ظاهرشان نام‌گذاری کنید، بلکه بر اساس کارشان. یعنی به‌جای blue-600 در کد، بنویسید color-action-primary.

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

یک لایه‌بندی که در عمل خوب جواب می‌دهد:

• - لایهٔ یک — پالت خام: طیف‌های عددی (blue-100 تا blue-900). این‌ها هرگز مستقیم در رابط استفاده نمی‌شوند.
• - لایهٔ دو — نقش‌ها: action-primary، text-muted، surface-raised، status-danger. این‌ها به لایهٔ یک اشاره می‌کنند.
• - لایهٔ سه — استفاده: کامپوننت‌ها فقط از لایهٔ دو استفاده می‌کنند.

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

کنتراست: جایی که سلیقه تمام می‌شود

تا اینجا هرچه گفتیم کم‌وبیش قابل‌بحث بود. اما کنتراست قابل‌بحث نیست، چون عدد دارد. نسبت کنتراست میان دو رنگ، از ۱:۱ (یکسان) تا ۲۱:۱ (سیاه و سفید خالص) اندازه‌گیری می‌شود و استاندارد WCAG حداقل‌هایی تعیین کرده است:

• - متن معمولی: دست‌کم ۴٫۵:۱ برای سطح AA و ۷:۱ برای AAA.
• - متن درشت (تقریباً ۲۴ پیکسل به بالا یا ۱۹ پیکسل ضخیم): دست‌کم ۳:۱.
• - عناصر غیرمتنی مثل حاشیهٔ فیلد ورودی و آیکن‌های معنادار: دست‌کم ۳:۱.

به اعداد تصویر بالا دقت کنید، چون چند نکتهٔ آموزنده در آن هست. زرد روی سفید ۱٫۴:۱ است — یعنی عملاً نامرئی، هرچند روی مانیتور خودتان شاید «قابل خواندن» به‌نظر برسد. خاکستری روی سفید ۳٫۶:۱ است و در سطح AA رد می‌شود؛ همان خاکستری ملایمی که در نود درصد طرح‌ها برای «متن کمکی» استفاده می‌شود. و جالب‌تر از همه: قرمز روی مشکی ۳٫۸:۱ است، یعنی پیام خطای قرمز روی زمینهٔ تیره — که همه‌جا می‌بینیم — استاندارد را رد می‌کند.

دو نکتهٔ تکمیلی که معمولاً فراموش می‌شوند: اول، این اعداد کف‌اند نه هدف. دوم، کنتراست را باید برای همهٔ حالت‌ها بررسی کنید، نه فقط حالت عادی: متن روی دکمهٔ hover، متن غیرفعال، و متن روی تصویر (که بدترین حالت است، چون پس‌زمینه‌اش متغیر است — راه‌حل معمول، یک لایهٔ تیرهٔ نیمه‌شفاف زیر متن است).

کوررنگی: هشت درصدی که طرح شما را متفاوت می‌بینند

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

در تصویر بالا، نیمهٔ راست همان نیمهٔ چپ است که با ماتریس شبیه‌سازی دوترانوپی (شایع‌ترین نوع کوررنگی سبز) پردازش شده. نتیجه گویاست: سبزِ «موفقیت» و قرمزِ «خطا» هر دو به قهوه‌ای‑زیتونی نزدیک می‌شوند و عملاً از هم قابل‌تشخیص نیستند. اما در ردیف پایین، که آیکن و برچسب هم اضافه شده، پیام هیچ آسیبی نمی‌بیند.

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

• - پیام‌های وضعیت: کنار رنگ، آیکن و متن هم بگذارید.
• - نمودارهای خطی: علاوه بر رنگ، از الگوی خط یا برچسب مستقیم روی خط استفاده کنید.
• - فیلدهای اجباری: فقط ستارهٔ قرمز کافی نیست.
• - لینک درون متن: اگر فقط رنگش با متن فرق دارد، برای بخشی از کاربران لینک نیست — زیرخط را نگه دارید.
• - نقشه‌ها و وضعیت‌های «پر/خالی»: شکل یا الگو اضافه کنید.

این‌ها همه بخشی از همان بحث دسترس‌پذیری است و هزینه‌شان نزدیک به صفر است اگر از اول رعایت شوند — و بسیار گران‌اند اگر بعد از انتشار بخواهید اصلاحشان کنید.

رنگ چیزی است که فرهنگ تعیین می‌کند

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

آبی نزدیک‌ترین چیز به یک رنگ «امن» جهانی است و به همین دلیل استاندارد صنعت بانکداری شده؛ اما حتی همین نمودار هم هم‌زمان «اعتماد» و «اندوه» را در فهرست آبی می‌آورد. یعنی حتی در یک فرهنگ، معنای یک رنگ به زمینه بستگی دارد.

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

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

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

• - مشکی خالص استفاده نکنید. زمینهٔ #000 با متن سفید، کنتراست بیش از حد می‌سازد و باعث خستگی و اثر هالهٔ نوری می‌شود. خاکستری خیلی تیره (حدود #121212 تا #1A1A1A) بهتر است.
• - رنگ‌های اشباع را کم‌اشباع کنید. همان آبی که روی سفید عالی بود، روی زمینهٔ تیره می‌لرزد و چشم را اذیت می‌کند. برای حالت تاریک معمولاً به نسخهٔ روشن‌تر و کم‌اشباع‌ترِ همان رنگ نیاز دارید.
• - عمق را با روشنایی بسازید، نه با سایه. در حالت روشن، سطح بالاتر سایه دارد؛ در حالت تاریک، سطح بالاتر روشن‌تر است.
• - کنتراست را دوباره اندازه بگیرید. قبولی در حالت روشن هیچ تضمینی برای حالت تاریک نیست — همان‌طور که در جدول کنتراست دیدیم، قرمز روی مشکی رد می‌شود.

رنگ در نمودار و داده

رنگ در نمودار قواعد خودش را دارد که با رابط فرق می‌کند:

• - داده‌های دسته‌ای (مثلاً محصول الف، ب، ج) به رنگ‌های متمایز نیاز دارند — و بیشتر از هفت هشت دسته را اصلاً با رنگ تفکیک نکنید؛ کسی نمی‌تواند دنبال کند.
• - داده‌های ترتیبی (کم تا زیاد) به یک طیف پیوسته نیاز دارند: یک فام، با تغییر روشنایی.
• - داده‌های واگرا (منفی تا مثبت با یک نقطهٔ میانی) به دو فام با یک نقطهٔ خنثی در وسط نیاز دارند.
• - برچسب مستقیم بهتر از راهنماست. هر بار که کاربر باید چشمش را میان نمودار و راهنما رفت‌وبرگشت کند، دارید بار شناختی تولید می‌کنید.

اشتباه‌های رایج

• - انتخاب پالت پیش از فهمیدن کارکردها. اول مشخص کنید چند نقش رنگی دارید، بعد رنگ انتخاب کنید.
• - ساختن رنگ‌ها با چشم. نتیجه‌اش پالتی است که پله‌هایش نامنظم‌اند و هیچ‌وقت نمی‌فهمید چرا «یک جای کار می‌لنگد».
• - استفاده از رنگ برند برای همه‌چیز. رنگ برند برای کنش اصلی و لهجهٔ بصری است، نه برای هر عنصر تعاملی.
• - قرمز برای هر چیز مهم. اگر قرمز هم‌زمان یعنی خطا، تخفیف، و دکمهٔ اصلی، دیگر هیچ معنایی ندارد.
• - تست‌نکردن روی نمایشگر واقعی. مانیتور خوب در اتاق تاریک، بدترین محیط ممکن برای قضاوت دربارهٔ رنگ است.
• - فراموش‌کردن حالت‌ها. برای هر رنگ تعاملی، دست‌کم چهار حالت لازم دارید: عادی، hover، فشرده، غیرفعال.

چک‌لیست عملی

• - اول کارکرد، بعد زیبایی. مشخص کنید کدام رنگ کار «کنش اصلی»، کدام «خطر» و کدام «اطلاعات» را انجام می‌دهد.
• - یک رنگ برند، یک طیف خاکستری، سه رنگ وضعیت. نقطهٔ شروع خوبی برای تقریباً هر محصولی است.
• - از هر رنگ ۹ تا ۱۱ پله بسازید و همیشه از پله‌ها انتخاب کنید، نه از انتخابگر رنگ.
• - نام‌ها را معنایی بگذارید، نه توصیفی.
• - کنتراست را اندازه بگیرید — برای همهٔ حالت‌ها، نه فقط حالت عادی.
• - در خاکستری تست کنید و یک بار هم با شبیه‌ساز کوررنگی نگاه کنید.
• - نسبت ۶۰-۳۰-۱۰ را بشمارید، به‌ویژه سهم رنگ تأکید.
• - روی نمایشگر واقعی و در نور واقعی ببینید.
• - پالت را به توکن تبدیل کنید تا تصمیم یک بار گرفته شود.

جمع‌بندی

• - نظریهٔ رنگ جعبه‌ابزاری است برای انتخاب رنگ‌هایی که با هم کار کنند؛ اما آنچه در عمل تصمیم می‌سازد کنتراست، نسبت‌ها و سازگاری است، نه معناهای کلی رنگ‌ها.
• - نیوتن در ۱۶۶۶ چرخهٔ رنگ را ساخت و نشان داد رنگ ادراک ماست از طول‌موج نور، نه ویژگی مطلق اشیا.
• - سه مدل را تفکیک کنید: کاهشی برای چاپ، افزایشی (RGB) برای نمایشگر، و HSL برای کارکردن.
• - فام، روشنایی و اشباع سه ویژگی کلیدی‌اند و روشنایی همان چیزی است که خوانایی را می‌سازد.
• - به‌جای فام‌های تازه، از یک فام طیف بسازید: تینت (+سفید)، شید (+سیاه)، تون (+خاکستری).
• - هفت طرح رنگی وجود دارد؛ هرچه رنگ‌ها روی چرخه دورتر باشند، کنتراست بیشتر و تعادل سخت‌تر است.
• - قاعدهٔ ۶۰-۳۰-۱۰ می‌گوید رنگ تأکید به این دلیل کار می‌کند که کمیاب است.
• - رنگ‌ها را با نام معنایی و در سه لایه سازمان بدهید تا حالت تاریک و تغییر برند تقریباً رایگان شود.
• - کنتراست عدد دارد: ۴٫۵:۱ برای متن معمولی، ۳:۱ برای متن درشت و عناصر غیرمتنی.
• - حدود ۸ درصد آدم‌ها کوررنگی دارند، پس رنگ هرگز نباید تنها حامل معنا باشد.
• - معنای رنگ فرهنگی است؛ پالت وارداتی را بدون بررسی برای مخاطب فارسی‌زبان به کار نبرید.