ساخت پالت رنگ از یک رنگ؛ راهنمای گام‌به‌گام با مثال واقعی

چرا تک‌رنگ، بهترین نقطهٔ شروع است؟

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

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

گام ۱: انتخاب رنگ پایه با عدد، نه با حس

رنگ پایه را از مدل HSL انتخاب کنید، چون این مدل سه ویژگی رنگ را از هم جدا می‌کند: فام (Hue از ۰ تا ۳۶۰)، اشباع (Saturation از ۰ تا ۱۰۰) و روشنایی (Lightness از ۰ تا ۱۰۰). برای حس اعتماد و مالی، فام حدود ۲۱۰ تا ۲۳۰ (آبی) مناسب است؛ برای انرژی و اشتها، ۲۰ تا ۴۰ (نارنجی)؛ برای آرامش و سلامت، ۱۴۰ تا ۱۶۰ (سبز).

یک عدد نمونهٔ واقعی: فرض کنید برند شما دامنهٔ آموزش آنلاین است و آبی را انتخاب کرده‌اید. در فیگما یک مستطیل با HSL نقطهٔ ۲۲۰/۸۰/۵۵ بسازید؛ خروجی چیزی شبیه #3B6FD4 می‌شود. این رنگ پایهٔ شماست؛ هنوز لازم نیست کامل باشد، چون در گام بعد کل خانواده‌اش را می‌سازید و اگر لازم شد، فقط فام را چند درجه می‌چرخانید. اگر دربارهٔ روان‌شناسی انتخاب اولیه مردد هستید، راهنمای انتخاب پالت رنگ معیارهای تصمیم را دقیق‌تر باز کرده است.

گام ۲: ساخت مقیاس ده‌پله‌ای از روشنایی

حالا از رنگ پایه، یک نردبان دهپله‌ای می‌سازیم؛ همان کاری که سیستم‌های طراحی بزرگ انجام می‌دهند. روشنایی را با گام‌های نامساوی روی ده پله پخش کنید: ۹۵، ۹۰، ۸۰، ۷۰، ۶۰، ۵۰، ۴۰، ۳۰، ۲۰ و ۱۰. گام‌های پایین نردبان فشرده‌ترند چون چشم انسان تفاوت رنگ‌های تیره را ضعیف‌تر می‌بیند. برای هر پله، اشباع را کمی تنظیم کنید: پله‌های خیلی روشن، اشباع کمتری (حدود ۴۰ تا ۶۰) و پله‌های میانی، اشباع کامل (۷۵ تا ۸۵) می‌گیرند تا شسته نشوند.

خروجی، ده رنگ هم‌خانواده است که هر کدام نقش مشخصی دارند: پلهٔ ۵۰ (بسیار روشن) پس‌زمینهٔ هایلایت و بنر؛ پلهٔ ۱۰۰ و ۲۰۰ پس‌زمینهٔ کارت‌ها و حالت‌های انتخاب‌شده؛ پلهٔ ۵۰۰ رنگ اصلی برند برای دکمه‌ها و لوگو؛ پلهٔ ۶۰۰ و ۷۰۰ متن روی رنگ روشن و حالت هاور؛ پلهٔ ۹۰۰ تیترها و متن اصلی. این نام‌گذاری عددی (۵۰ تا ۹۰۰) استاندارد رایج است و وقتی به سیستم طراحی برسید، همین نام‌ها توکن‌های رنگی شما می‌شوند.

گام ۳: خنثی‌های هم‌خانواده و رنگ متن

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

چهار خنثی پایه که تقریباً هر پروژه لازم دارد: پس‌زمینهٔ اصلی #F8FAFC (روشنایی ۹۷)، پس‌زمینهٔ کارت #FFFFFF، حاشیه #E2E8F0 و متن ثانویه #64748B. برای متن اصلی، به‌جای مشکی مطلق از پلهٔ ۹۰۰ همان خنثی استفاده کنید (مثلاً #1E293B)؛ مشکی خالص روی صفحه روشن، چشم را می‌زند و تیرهٔ کمی نرم‌تر، هم خواناتر است هم حرفه‌ای‌تر. حالا سه خانواده دارید: رنگ برند، خنثی‌ها و رنگ‌های معنایی (موفقیت سبز #16A34A، خطا قرمز #DC2626، هشدار کهربایی #D97706) که آن‌ها را آماده از پالت‌های استاندارد بردارید تا وقت‌تان برای خلاقیت اصلی بماند.

گام ۴: رنگ تأکید و قاعدهٔ ۶۰-۳۰-۱۰

یک پالت تک‌رنگ کامل است اما به یک نقطهٔ مقابل نیاز دارد: رنگ تأکید که فقط برای مهم‌ترین اقدام استفاده می‌شود. راه انتخاب ساده، رنگ مکمل یا نزدیک به مکمل فام پایه است؛ برای آبی ۲۲۰، رنگی در محدودهٔ ۳۰ تا ۵۰ مثل کهربایی #F59E0B تضاد عاطفی خوبی می‌سازد. قانون سخت‌گیرانه: رنگ تأکید در هر صفحه فقط یک مأموریت دارد (دکمهٔ اصلی یا نشان «مهم») و اگر همه‌جا استفاده شود، دیگر هیچ‌جا تأکید نیست.

برای سهم رنگ‌ها در صفحه هم قاعدهٔ ۶۰-۳۰-۱۰ راهنمای خوبی است: حدود ۶۰٪ صفحه خنثی روشن، ۳۰٪ رنگ‌های برند و ۱۰٪ یا کمتر رنگ تأکید. این نسبت را روی طرح‌تان امتحان کنید: اگر دکمه‌های آبی، کارت‌های آبی و بنر آبی هم‌زمان صفحه را پر کرده‌اند، یکی‌شان را به خنثی برگردانید. همین جا است که فضای منفی به کمک می‌آید؛ فضای خالی هم رنگ دارد و آن هم، خنثی است.

تست نهایی و نگهداری پالت

قبل از استفاده، سه تست انجام دهید: اول، کنتراست متن‌ها را با ابزار داخلی فیگما یا سایت‌های بررسی WCAG بسنجید؛ متن اصلی باید حداقل نسبت ۴.۵ به ۱ و متن درشت حداقل ۳ به ۱ داشته باشد که در طراحی در دسترس با کنتراست مناسب کامل توضیح داده شده. دوم، پالت را روی یک صفحهٔ واقعی پروژه امتحان کنید، نه کنار هم در یک فایل جدا؛ رنگ‌ها در ترکیب واقعی رفتار متفاوت دارند. سوم، حالت کوررنگی را چک کنید تا پیام رنگ‌ها فقط به رنگ وابسته نباشد.

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