چطور یک پالت رنگ برند بسازیم که واقعاً کار کند
راهنمای یک طراح حرفهای برای ساخت پالت رنگ برندی که از دارکمود، حالتهای غیرفعال و هر سطحی فراتر از لوگو جان سالم به در میبرد. پنج برند واقعی در دل مقاله.
بیشتر پالتهای رنگ برند برای یک ارائهی لوگو ساخته میشوند و تا زمانی که اولین دکمهی واقعی به یک حالت غیرفعال نیاز پیدا کند، زیبا باقی میمانند.
یک پالت رنگ برند کارآمد، پنج رنگ نیست. یک سیستم لایهلایه است: یک رنگ لنگر، یک مقیاس خنثی واقعی، رنگهای معنایی، رنگهای حالت، و یک برنامهی دارکمود که پیش از باز شدن فیگما وجود داشته است. این مقاله لایهها را قدم به قدم پیش میبرد، پنج برند را نشان میدهد که درستش انجام میدهند، و با ترتیب ساخت تمام میشود.
چرا بیشتر پالتهای رنگ برند شکست میخورند
بیشتر پالتهای رنگ برند نه به این دلیل که رنگها اشتباهاند شکست میخورند، بلکه به این دلیل که برای ارائهی لوگو ساخته شدهاند نه برای یک سیستم قابل انتشار.
فرایند معمول اینطور پیش میرود. یک طراح موودبرد میسازد، پنج رنگ انتخاب میکند که با برنامه همخوانی داشته باشند، برچسب اصلی، فرعی، تأکیدی، روشن و تیره رویشان میزند، و پالت را تحویل تیمهایی میدهد که محصول، سایت، مستندات و کمپینها را منتشر میکنند. هیچکدام از این تیمها وقتی آن پنج نمونهرنگ انتخاب میشد در اتاق نبودند.
رنگ «فرعی» هیچ محدودهی میانی قابلاستفادهای ندارد. رنگ «اصلی» برای متن بدنه بیش از حد اشباع است. هیچکس یک خاکستری خنثی انتخاب نکرده، پس طراح خودش یکی میسازد.
تیم دارکمود تسلیم میشود و همهچیز را با یک فیلتر CSS معکوس میکند. پالت در ارائه وظیفهاش را انجام داد. در کار واقعی شکست خورد.
پنج لایهی یک پالت کارآمد
پالتی که از کار واقعی برند جان سالم به در میبرد پنج لایه دارد، نه پنج رنگ. طراحانی که سیستمهای برند را در مقیاس بزرگ منتشر میکنند، سر این که یک رنگ به کدام لایه تعلق دارد بحث میکنند، نه سر این که کدام سایه از سبز «بیشتر ما را نشان میدهد».
| لایه | چه کاری میکند | تعداد معمول |
|---|---|---|
| لنگر | شناخت برند را حمل میکند | ۱ (شاید ۱ پشتیبان) |
| خنثیها | سطوح، متن، حاشیهها، پسزمینهها | ۹ تا ۱۲ پله |
| معنایی | موفقیت، هشدار، بحرانی، اطلاعات | ۳ تا ۵ خانواده |
| حالت | هاور، فوکوس، فشرده، غیرفعال | جفتشده با هر رنگ تعاملی |
| تیره | نسخهی دارکمود هر لایه | یک مجموعهی موازی کامل |
دقت کنید چه چیزی در این فهرست نیست. نه «رنگ برند فرعی»، نه «سوم»، نه «تأکیدی ۲». بیشتر برندهایی که فکر میکنند به یک رنگ برند دوم نیاز دارند، در واقع به یک مقیاس خنثی کاملتر یا یک لنگر جسورانهتر نیاز دارند.
تختسازی اشکال است. لایهها قابلیتاند.
رنگ لنگر را اول و آخر انتخاب کن
لنگر تنها رنگی است که شناخت برند را در هر سطحی حمل میکند و دو بار انتخاب میشود: یک بار در شروع، یک بار وقتی فهمیدی باید کنار چه چیزهایی زندگی کند.
انتخاب اول جهتدهنده است. لنگر باید آن یک رنگی باشد که اگر وردمارک را حذف کنی، همچنان برند را اعلام کند. به بنفش Stripe، بنفش Linear، آبی Figma، سیاه Notion، سرخابی Slack فکر کن. یک رنگ کار هویتی را انجام میدهد.
انتخاب دوم فنی است. بعد از ساخت مقیاس خنثی، لنگر تقریباً همیشه به یک جابجایی جزئی نیاز دارد. باید در برابر خنثایی که رویش مینشیند کنتراست قبولی بدهد، به یک همزاد تیونشده برای دارکمود نیاز دارد، و به حالتهای هاور و فشردهای نیاز دارد که گلآلود نشوند. سیستمهای برند واقعی ۵ تا ۹ پلهی لنگر منتشر میکنند، نه یک هگز قطعی.
خنثیها همان پالتاند
بیشتر یک رابط کاربری منتشرشده از خنثیها تشکیل شده، و برندی که یک مقیاس خنثی واقعی ندارد پالتی هم ندارد، فقط یک موودبرد دارد.
یک مقیاس خنثی واقعی ۹ تا ۱۲ پله از نزدیکبهسفید تا نزدیکبهسیاه است که با رنگ لنگری که کنارش زندگی میکند تیون شده. خاکستریهای خالص اغلب کنار یک لنگر گرم مرده به نظر میرسند و کنار یک لنگر آبی بیش از حد سرد.
مقیاس خنثی جایی است که کنتراست رنگی دسترسپذیر یا به طراحی اضافه میشود یا از آن حذف میشود. هر پلهی سطح یک پلهی متن و یک پلهی حاشیه دارد که کنتراست را قبول میکند. هر پله یک نقش دارد: پسزمینه، پسزمینهی ظریف، سطح، سطح برجسته، همپوشانی، جداکننده، حاشیه، متن خاموش، متن پیشفرض، متن قوی.
برندهایی که قویترین کار خنثی را دارند، خنثی را قهرمان پالت میبینند، نه پرکننده. لنگر پرچم است. خنثیها کل کشورند.
سه برند که نظم لنگر را درست اجرا میکنند
این سه برند یک لنگر مقتصد را در برابر یک مقیاس خنثی عمیق اجرا میکنند، و لنگر قابلتشخیص میماند چون هیچوقت پراکنده نمیشود.
Notion
زنده ببینیدش در notion.com/product
Notion نسخهی افراطی مینیمالیسم را منتشر میکند. تقریباً تمام سطح کاری یک کرم تیونشده با متن سیاه است. یک سرمهای عمیق تنها رنگی است که نوار بازاریابی را حمل میکند، و لایهی معنایی کار رنگی قابلدیدن را انجام میدهد: قرمز، نارنجی، آبی، سبز برای حالتهای تسک.
چه چیزی را بدزدیم: یک لنگر انتخاب کن، بعد بپرس آیا برند به یک رنگ دوم نیاز دارد. پاسخ صادقانه معمولاً «نه» است.
Linear
Linear جسورانهترین پالت دارکفرست دستهبندی را اجرا میکند. لنگر یک بنفش واحد است. خنثیها یک مقیاس کامل دارکمود هستند (سطح، سطح ظریف، سطح برجسته، همپوشانی) که همهشان کارهای متفاوتی انجام میدهند.
چه چیزی را بدزدیم: اگر محصول دارکمود منتشر میکند، پالت تیره را با همان دقت پالت روشن بساز، نه به عنوان یک رد فیلتر.
Stripe
زنده ببینیدش در stripe.com/payments
Stripe تمیزترین نظم لایهی لنگر را در SaaS اجرا میکند. بنفش مایل به ویولت روی CTAها، لینکهای درونخطی، تصویرسازیها و لحظات برند ظاهر میشود و تقریباً در هیچجای دیگر. وقتی بنفش ظاهر میشود، چشم آن را به عنوان کنش میخواند، نه تزیین.
چه چیزی را بدزدیم: هرچه لنگر مقتصدتر باشد، برند قابلتشخیصتر است. لنگرهای شل به عنوان نویز خوانده میشوند.
دو برند که خنثیها کل داستان هستند
این دو برند نشان میدهند چه اتفاقی میافتد وقتی خودِ مقیاس خنثی برند را حمل میکند و لنگر یا تکرنگ است یا به نقشها توکنبندی شده.
Vercel
Vercel افراطیترین پالت خنثیمحور را در ابزارهای توسعه اجرا میکند. لنگر در اصل تکرنگ است: سیاه، سفید و یک رمپ خنثی کامل. رنگ فقط به عنوان داده ظاهر میشود، با یک تأکید آبیمایل به سبز روی نمودارهای کلیدی و عناصر وضعیت. خود مقیاس خنثی همان برند است.
چه چیزی را بدزدیم: یک برند میتواند از لنگر پر سروصدا کاملاً عبور کند اگر سیستم خنثیاش به اندازهی کافی منظم باشد. بعضی برندها به یک مقیاس خاکستری امضایی نیاز دارند، نه یک رنگ امضایی.
Shopify
زنده ببینیدش در polaris.shopify.com
سیستم Polaris از Shopify نشان میدهد یک پالت برند کاملاً توکنبندیشده چه شکلی است. پالت به صورت یک درخت نقشتوکن ارائه میشود: سطح، متن، آیکون، حاشیه، تعاملی، بحرانی، احتیاط، موفقیت، اطلاعات، که هر نقش مقادیر روشن و تیره را حمل میکند. Polaris هیچ فضایی باقی نمیگذارد تا یک طراح فراتر از توکنهای تعریفشده دست دراز کند. پالت یک حس نیست، یک قرارداد است.
چه چیزی را بدزدیم: توکنها را اول به عنوان نقش بنویس و فقط در آخرین قدم به هگز تبدیل کن. اگر اسم یک توکن یک رنگ را توصیف میکند به جای یک نقش، پالت از مسیر خارج میشود.
ترتیب ساخت در ۶ قدم
پالت را به این ترتیب بساز و بیشتر اشتباهات رایج از نظر فیزیکی نمیتوانند اتفاق بیفتند.
- فهرست نقشها را پیش از فهرست رنگها بنویس. لنگر، سطوح خنثی، متن خنثی، حاشیههای خنثی، موفقیت معنایی، هشدار معنایی، بحرانی معنایی، اطلاعات معنایی، حالت هاور، حالت فوکوس، حالت غیرفعال. اول این کار را روی کاغذ انجام بده.
- جهت لنگر را انتخاب کن، نه هگز نهایی را. یک رنگمایه، یک هدف تقریبی روشنایی، یک هدف تقریبی اشباع. قابلویرایش نگهش دار.
- بعدش مقیاس خنثی را بساز، تیونشده با آن لنگر. ۹ تا ۱۲ پله. هر پله را در برابر بقیه تست کن. خنثیهای سرد برای لنگرهای خنک، خنثیهای گرم برای لنگرهای گرم.
- رنگهای معنایی را به صورت یک مجموعه اضافه کن، نه به صورت فردی. موفقیت، هشدار، بحرانی، اطلاعات. باید شبیه برادر و خواهر حس شوند. یک سبز تکی که بعداً اضافه شود تقریباً همیشه در کنار پالتی که با آن ساخته نشده اشتباه به نظر میرسد.
- رنگهای حالت را با جفتکردن تعریف کن، نه با اختراع رنگهای جدید. هاور معمولاً یک جابجایی یک یا دو پلهای روی مقیاس است. فوکوس معمولاً یک حلقهی خطی در رنگمایهی لنگر است. غیرفعال معمولاً یک پلهی خنثی خاص است.
- هگز نهایی لنگر را در آخر قطعی کن. بررسیهای کنتراست را در برابر خنثایی که رویش مینشیند اجرا کن. همزاد دارکمود را تیون کن. پلههای هاور و فشرده را اضافه کن. فقط حالا لنگر به یک مقدار قطعی تبدیل میشود.
چرا ترتیب مهم است
هر لایه لایهی بعدی را محدود میکند، و اجرای مراحل به شکل معکوس همان راهی است که پالتها به رنگهایی میرسند که با هم میجنگند.
لنگر را آخر انتخاب کن و آن را با دانش کامل از مقیاس خنثیای که باید رویش زندگی کند انتخاب میکنی. اول انتخابش کن و هر تصمیم خنثی یک مصالحه میشود حول رنگی که پیش از وجود رابط کاربری تصمیمگیری شده.
برای تئوری پشت این لایهبندی، ستون تئوری رنگ برای طراحان کل پشته را پوشش میدهد. برای قواعد کنتراست پشت جفتهای خنثیبهعلاوهیلنگر، کنتراست رنگی دسترسپذیر جزئیات را اداره میکند. برای پالتها درون دیزاین سیستمها، راهنمای دیزاین سیستمها تصویر بزرگتر را دارد.
سه اشتباهی که بیشتر پالتها را میکشند
همان سه اشتباه تقریباً روی هر پالت رنگ برند شکستخوردهای پیدا میشوند، و هر سه از انتخاب هگز پیش از انتخاب نقش میآیند.
اشتباه نمونهرنگلوگو. پنج رنگ پالت چون لوگو پنج رنگ دارد. هیچچیز در پاییندست به پنج تا نیاز نداشت. نه خنثی، نه لایهی معنایی، نه برنامهی دارکمود. رایجترین حالت شکست.
تلهی اشباع. هر رنگ با همان اشباع، معمولاً بالا. در یک موودبرد پر جنبوجوش به نظر میرسد، در یک رابط کاربری واقعی خستهکننده حس میشود. پالتهای خوب اشباع را تهاجمی تغییر میدهند.
میانهی گمشده. یک خنثی روشن، یک خنثی تیره، هیچچیز بینشان. رابطهای واقعی در میانهی مقیاس زندگی میکنند. پالتی با فقط دو خنثی بدون توجه به این که لنگر چقدر خوب است، تخت منتشر میشود.
فرایند را درست کن، اشتباهات دیگر خودشان را نشان نمیدهند.
سوالات متداول
یک پالت رنگ برند باید چند رنگ داشته باشد؟
لنگرهای کمتر از آنچه فکر میکنی، خنثیهای بیشتر از آنچه فکر میکنی. بیشتر برندهای در حال انتشار ۱ لنگر، ۹ تا ۱۲ پلهی خنثی، ۳ تا ۵ خانوادهی معنایی، رنگهای حالت جفتشده و یک مجموعهی موازی دارکمود دارند. تعداد رنگمایهها کم است. تعداد پلهها زیاد است.
آیا به یک پالت جداگانه برای دارکمود نیاز دارم؟
نه یک پالت جداگانه. یک نسخهی موازی از همان پالت. نقشها دقیقاً یکسان میمانند، فقط مقادیر خام هگز در هر تم تغییر میکنند. اگر یک طراح دارد دارکمود را از صفر دستی دوباره میکشد، پالت به عنوان یک سیستم ساخته نشده بود.
آیا میتوانم از یک پالتساز برای ساخت پالت برند استفاده کنم؟
یک پالتساز میتواند بذر لنگر و یک جهت خنثی تقریبی بکارد. نمیتواند سیستم را بسازد. هر پالت در حال انتشاری در این مقاله بهدست تیون شده: خنثیها برای هماهنگی با لنگر گرم یا خنک شدهاند، خانوادههای معنایی تنظیم شدهاند، مقادیر دارکمود سفارشی تیون شدهاند، رنگهای حالت پله به پله جفت شدهاند.
سیستم را بساز، نه نمونهرنگها را
یک پالت رنگ برند پنج رنگ روی یک موودبرد نیست. یک سیستم لایهلایه با نقشها، یک مقیاس خنثی، سیگنالهای معنایی، رنگهای حالت و یک برنامهی دارکمود است که به ترتیب مشخصی ساخته شده.
Notion، Linear، Stripe، Vercel و Shopify با نمونهرنگ برنده نشدند. با رفتار با پالت به عنوان زیرساخت برنده شدند: یک لنگر، یک مقیاس خنثی کامل، یک لایهی معنایی که معنایی دارد، یک لایهی حالت جفتشده، دارکمود طراحیشده در روز اول.
لایهها را بساز، ترتیب ۶ قدمی را اجرا کن و دست از انتخاب رنگهای برند به سبک تزیین اتاق بردار.
Want a brand color palette built for everything past the logo? Brainy builds palettes with a real neutral scale, dark mode, and semantic tokens baked in.
Get Started
