قانون ۶۰–۳۰–۱۰ یک قاعدهٔ ساده و کاربردی است: ۶۰٪ رنگ غالب (معمولاً خنثی/پسزمینه)، ۳۰٪ رنگ ثانویه (عناصر بزرگتر مانند کارتها یا ناوبری) و ۱۰٪ رنگ تأکیدی (CTA، لینکهای مهم، نشانها). این روش سهمبندی باعث تعادل بصری و تمرکز کاربر میشود و یک نقطه شروع عملی برای ساخت پالت است.
چرا این قانون مفید است — به زبان طراحان UI
- ساده و سریع: وقتی پالت دارید اما صفحات نامتعادل بهنظر میرسند، ۶۰–۳۰–۱۰ برای نظمدهی به کار میآید.
- کمک به سلسلهمراتب بصری: رنگ غالب فضای کلی را تشکیل میدهد، رنگ ثانویه بلوکهای اطلاعات را متمایز میکند و رنگ تأکیدی چشم را به اقدام مطلوب هدایت میکند.
اجرای گامبهگام (با مثال عملی)
۱. انتخاب رنگ غالب (۶۰٪) — معمولاً یک پایهٔ خنثی یا روشن برای پسزمینه و فضاهای وسیع.
۲. انتخاب رنگ ثانویه (۳۰٪) — برای کارتها، بخشهای برجسته و ناوبری.
۳. انتخاب رنگ تأکیدی (۱۰٪) — برای CTA، لینکها، آیکونهای مهم و نشانها.
۴. پیادهسازی درجات (tints / shades) برای ایجاد هیرارشی متنی و وضعیتها (hover, active, disabled).
۵. بررسی نسبتها و دسترسپذیری (کنتراست متن/پسزمینه).
نکته نحوی: «۶۰٪» به معنی ۶۰٪ از «وزن بصری» صفحه است — یعنی پسزمینه بزرگ + فضاهای خالی + بلاکهای وسیع. برای دقت بیشتر میتوانید نسبت ناحیههای بزرگ صفحه را برآورد کنید (مثلاً پسزمینه صفحه = ~۶۰٪، نوار کناری + کارتها = ~۳۰٪، المانهای CTA و آیکونها = ~۱۰٪).
مثالهای آماده (پالت + نحوهٔ استفاده)
برای هر مثال، من نحوهٔ تخصیص ۶۰/۳۰/۱۰ را هم نوشتم — حتماً قبل از اجرا کنتراست متن را تست کنید.
۱) اپلیکیشن مالی (اعتماد و پاکیزگی)
- ۶۰% پایه: #F6F7FB (پسزمینه، صفحات)
- ۳۰% ثانویه: #1F3A93 (کارتها، هدر، ناوبری)
- ۱۰% تأکیدی: #2ECC71 (CTA، وضعیت مثبت، آیکونهای مهم)
استفاده: پسزمینه روشن، کارتها و بخشهای اطلاعاتی با رنگ ثانویه و دکمههای اصلی با رنگ تأکیدی. (کنتراست متن روی ثانویه را چک کنید).
۲) وبسایت فروشگاهی (محصولمحور، گرم)
- ۶۰% پایه: #FFFFFF / #FBFBFB (پسزمینه و فاصلهبندی)
- ۳۰% ثانویه: #292B2F (هدر، فوتر، متن ثانویه)
- ۱۰% تأکیدی: #FF6B35 (دکمه خرید، تخفیفها)
استفاده: متن اولیه روی پسزمینه سفید (یا خاکستری بسیار روشن)، عنوانها یا کارتها با ثانویه، دکمههای خرید با نارنجی تأکیدی.
۳) شبکهٔ اجتماعی (پویا و جوان)
- ۶۰% پایه: #0F1724 (پسزمینه تیره یا بخشهای عمده در تم تاریک)
- ۳۰% ثانویه: #1E3A8A (پنلها، کارتها)
- ۱۰% تأکیدی: #FFCC00 (نوتیفیکیشن، دکمههای مهم)
استفاده: مناسب برای تمهای تاریک — حواستان باشد متنها و آیکونها نسبت کنتراست مناسبی داشته باشند.
(این مثالها نقطهٔ شروع هستند — برای اجرای نهایی پالت را با ابزار کنتراست چک کنید).
کنتراست و دسترسپذیری — اجتنابناپذیر
برای متنهای کوچک WCAG حداقل نسبت کنتراست ۴.۵:۱ و برای متن بزرگتر حداقل ۳:۱ را توصیه میکند. همچنین گرافیکها و عناصر UI (مانند مرزها) برای سطح AA باید نسبت ۳:۱ را رعایت کنند. قبل از نهاییسازی پالت، هر ترکیب متن/پسزمینه را با ابزارهای بررسی کنتراست تست کنید.
پیادهسازی در سیستم طراحی (طراحی-تا-کُد)
- در Figma: از Color Styles استفاده کنید (primary/secondary/accent + درجات روشن/تیره). Figma و Coolors پلاگین و ابزارهای ساخت پالت دارند که وارد ورکفلو میشوند.
- در Design System: رنگها را بهعنوان توکن CSS تعریف کنید تا تغییر تم ساده شود. مثال CSS کوتاه:
cssCopyEdit:root{
--bg: #F6F7FB; /* 60% */
--surface: #1F3A93; /* 30% */
--accent: #2ECC71; /* 10% */
--text-primary: #111827;
--text-on-surface: #ffffff;
}
/* نمونه استفاده */
body { background: var(--bg); color: var(--text-primary); }
.card { background: var(--surface); color: var(--text-on-surface); }
.btn-primary { background: var(--accent); color: #fff; }
برای حالت تاریک، توکنها را روی :root بازنویسی کنید.
وضعیتها (hover, active, disabled) و درجات رنگ
- از یک مدل HSL برای تولید tint/shade بهجای تغییر دستی هگزها استفاده کنید (تغییر لایتنیس برای hover/active).
- برای حالت disabled از کاهش اشباع و افزایش روشنایی استفاده کنید تا همچنان خوانا بماند اما توجه کمتری جلب کند.
- دکمهها و آیکونها را طوری طراحی کنید که در حالت فشرده و فعال نیز حداقل نسبت کنتراست لازم را حفظ کنند.
نقش Material Design و الگوهای رایج
Material Design نیز از تقسیمبندی نقش رنگ (primary, secondary, roles) برای ساخت سیستم رنگ استفاده میکند — ایدهٔ اصلی سازگاری بین بخشهای بزرگ و المانهای تأکیدی را تأیید میکند. میتوانید از مفاهیم Material برای تعیین نقش هر رنگ در سیستمتان استفاده کنید.
ابزارهای توصیهشده
- بررسی کنتراست: WebAIM / Contrast Checker.
- تولید و ایده پالت: Coolors، Adobe Color، Figma palette generator.
- برای تعیین درجات (tint/shade): از HSL در ابزار طراحی یا پلاگینهای Figma/MUI استفاده کنید.
چکلیست سریع قبل از تحویل طرح
- آیا ۶۰–۳۰–۱۰ در ترکیببندی کلی رعایت شده؟
- آیا تمام ترکیبهای متن/پسزمینه نسبت کنتراست مورد نیاز را دارند (۴.۵:۱ یا ۳:۱ برای متن بزرگ)؟
- آیا وضعیتهای hover/active/disabled تعریف و تست شدهاند؟
- آیا پالت در تم روشن و تاریک بررسی شده است؟
- آیا توکنهای رنگ در سیستم طراحی/کد پیادهسازی شدهاند؟
جمعبندی
قانون ۶۰–۳۰–۱۰ یک «قواعد انگشتشمار» بسیار مفید برای ایجاد تعادل رنگی است، اما نه یک قانون قطعی — همیشه با تست کاربر و بررسی دسترسپذیری ترکیبها را تأیید کنید. برای هر محصول، رنگها را بر اساس پیام برند و نیاز کاربر انتخاب کنید و سپس ۶۰–۳۰–۱۰ را بهعنوان چارچوب کاربردی برای توزیع آن رنگها در صفحه بهکار برید.