پالت رنگ UI: هر رنگ چه کاری میتواند بکند و چه کاری نه
دوازده پالت رنگ UI با کدهای هگز دقیق، آزمایش‌شده نقش به نقش. کدام رنگ‌های تاکیدی هم دکمه خوبی هستند و هم لینک، کدام متن خاکستری روی کارت رنگی رد میشود و چرا رنگ تاکیدی کم‌رنگ فقط پر میکند و هرگز نمی‌نویسد.
پالت رنگ UI مجموعه‌ای از رنگ‌های قشنگ نیست. مجموعه‌ای از نقش‌هاست و هر رنگ بعضی کارها را میتواند انجام دهد و بعضی را نه. این‌جا دوازده پالت داریم که هر کدام روی یک نقش آزمایش شده‌اند، نقشی که معمولاً خراب میشود، همراه با همه کدهای هگز.
سه نقش در پالت UI
جوهر می‌نویسد. رنگ همه خطوط متن است، پس باید روی سطح به اندازه کافی تیره باشد، مثل Ink Navy #141238 روی Indigo Mist #EEF0FB. وقتی رنگ تاکیدی از پس کار برنمی‌آید، از جوهر برای لینکها هم استفاده میکنید.
سطح نگه می‌دارد. صفحه یا کارتی است که پشت همه چیز قرار دارد. لازم نیست سفید باشد و رنگ‌مایه‌ای که انتخاب میکنید رفتار همه رنگ‌های دیگر را عوض میکند.
رنگ تاکیدی لمس میشود. تنها رنگی است که می‌گوید «این یک کاری انجام می‌دهد.» این شبیه یک کار به نظر می‌رسد و بخش بعد نشان می‌دهد که دو کار است.
رنگ تاکیدی دو کار دارد
روی دکمه، برچسب باید روی رنگ تاکیدی خوانا باشد و دکمه باید از صفحه متمایز شود. در یک جمله، همان رنگ تاکیدی لینک است و لینک متن است، پس باید روی همان صفحه خوانا باشد. هر دو کار از یک جفت رنگ استفاده می‌کنند، اما کار دوم معیار بالاتری دارد.
یعنی یک رنگ تاکیدی میتواند دکمه خوبی باشد و لینک بدی. Sky و Coral دقیقاً در همین شکاف‌اند. Indigo و Berry هر دو را قبول می‌شوند.
Indigo
Indigo #4338CA، برچسب سفید: قبول
Indigo به عنوان لینک روی Indigo Mist #EEF0FB: قبول
Ink Navy #141238 به عنوان لینک: قبول
Indigo هم دکمه است و هم لینک. یک رنگ، دو کار، بدون هیچ چیزی برای اصلاح.
Berry
Berry #A61E4D، برچسب سفید: قبول
Berry به عنوان لینک روی Berry Milk #FBEAF0: قبول
Deep Berry #2A0A18 به عنوان لینک: قبول
Berry هم همین‌طور است: برچسب سفید روی دکمه و لینک خوانا روی سطح صورتی کم‌رنگش.
Sky
Sky #248AE4، برچسب Harbor Ink: قبول
Sky به عنوان لینک روی Sky Wash #EAF4FC: رد
Harbor Ink #021828 به عنوان لینک: قبول
Sky دکمه خوبی است و لینک سختی. آن را برای دکمهها نگه دارید و لینکها را با Harbor Ink و زیرخط‌دار بنویسید.
Coral
Coral #E85446، برچسب Burnt Clay: قبول
Coral به عنوان لینک روی Coral Milk #FDEEEB: رد
Burnt Clay #290E0A به عنوان لینک: قبول
Coral همین شکاف را دارد. دکمه‌ای که مردم می‌بینند و لینکی که در Coral Milk گم میشود.
رنگ تاکیدی را برای دکمهها نگه دارید
راه‌حل ارزان است. Sky و Coral را برای دکمهها نگه دارید و لینکها را با جوهر و زیرخط‌دار بنویسید. این هم همان جمله به هر دو شکل.
رمز عبور
رمز عبور را فراموش کرده‌اید؟
✕ Sky به عنوان لینک: خواندنش سخت است
رمز عبور
رمز عبور را فراموش کرده‌اید؟
✓ Harbor Ink به عنوان لینک: خواندنش آسان است
متن خاکستری روی کارت‌های رنگی
متن ثانویه معمولاً حدود ۶۵٪ جوهر شماست. روی سفید در هر چهار پالت به‌راحتی خوانده میشود و روی سطح کم‌رنگ تقریباً تغییری نمی‌کند. روی رنگمایه واقعی میتواند از خط حداقل پایین بیفتد.
پس آن را روی همان سطحی که رویش مینشیند بسنجید، نه روی سفید. روی رنگمایه قوی، خاکستری را به ۷۰٪ برسانید تا جبران شود.
Red Panda
Sombre Night
Red Panda
#636772 روی Sugar Milk #FAF7F0: قبول
همان ترکیب ۶۵٪ یعنی #656A77 روی سفید: قبول
Sugar Milk تقریباً سفید است، پس خاکستری به‌سختی تغییر میکند. هم روی کارت قبول میشود و هم روی سفید.
Warm Purple
English Walnut
Warm Purple
#606146 روی Oh Pistachio #BCDBA4: رد
با ۷۰٪، یعنی #59573F: قبول
Oh Pistachio یک رنگمایه واقعی است. همان خاکستری که روی سفید قبول میشود این‌جا زیر خط می‌افتد و ۷۰٪ آن را برمی‌گرداند.
Mango
Jedi Night
Mango
#5E6C68 روی Heart of Ice #F2F5FA: قبول
همان ترکیب ۶۵٪ یعنی #626F6A روی سفید: قبول
Heart of Ice یک رنگمایه سرد و کم‌رنگ است، پس خاکستری تاب می‌آورد.
Viridian
Midnight Dreams
Viridian
#535D71 روی Digital Lavender #D3CAEE: رد
با ۷۰٪، یعنی #495467: قبول
Digital Lavender رنگ‌مایه‌ای به اندازه کافی قوی است که همان خاکستری را رد کند. آن را به ۷۰٪ برسانید و کارت دوباره خوانا میشود.
رنگ تاکیدی کم‌رنگ پر میکند، هرگز نمی‌نویسد
رنگ تاکیدی کم‌رنگ پرکننده دوست‌داشتنی و رنگ متن ناامیدکننده‌ای است. روی صفحه خودش، هیچ‌کدام از این چهار رنگ به عنوان متن خوانده نمی‌شود. همان رنگ را به پرکننده تبدیل کنید و کار میکند، به شرط این‌که کلمات مناسبش را انتخاب کنید.
Purple Estate
Blue Horizon #72AFCC به عنوان متن روی Sunwashed Paper #F5EDCE: رد
Purple Estate #58287F روی Blue Horizon: فقط متن درشت
Purple Estate روی Sunwashed Paper: قبول
آبی کم‌رنگ به عنوان متن روی کاغذ رد میشود. به عنوان پرکننده، Purple Estate را می‌پذیرد که برای یک تاریخ درشت خوب است و برای متن ریز نه.
Blue Horizon
Blue Horizon #2FA4D7 به عنوان متن روی Desert Cream #F5E9D8: رد
Cocoa Noir #3E2C23 روی Blue Horizon: قبول
Cocoa Noir روی Desert Cream: قبول
آبی روشن‌تر هم به عنوان متن روی Desert Cream رد میشود. به عنوان پرکننده، Cocoa Noir را به‌راحتی حمل میکند.
Herb Garden
Herb Garden #BCD9A2 به عنوان متن روی Sun Linen #FEFFD3: رد
Red Monarch #A82323 روی Herb Garden: قبول
Red Monarch روی Sun Linen: قبول
کم‌رمق‌ترین از میان چهار رنگ روی صفحه‌اش. Red Monarch را روی سبز بگذارید تا عدد واضح خوانده شود.
Nordic Sky
Nordic Sky #7288AE به عنوان متن روی Manor Cream #EAE0CF: رد
سفید #FFFFFF روی Nordic Sky: فقط متن درشت
Velvet Indigo #4B5694 روی Manor Cream: قبول
Nordic Sky فقط سفید را می‌پذیرد، آن هم فقط برای متن درشت، پس عدد بله و متن ریز نه. متن صفحه با Velvet Indigo نوشته میشود.
پس پرکننده و کلمات روی آن را بسنجید، نه فقط صفحه را. اگر کلمات روی پرکننده فقط به کنتراست متن درشت می‌رسند، آن‌ها را درشت نگه دارید.
هر دوازده پالت در یک جدول
| پالت | رنگ‌ها | نقشی که آزمایش میکند |
|---|---|---|
| Indigo | Ink Navy #141238, Indigo #4338CA, Indigo Mist #EEF0FB | دکمه و لینک هر دو قبول |
| Berry | Deep Berry #2A0A18, Berry #A61E4D, Berry Milk #FBEAF0 | دکمه و لینک هر دو قبول |
| Sky | Harbor Ink #021828, Sky #248AE4, Sky Wash #EAF4FC | دکمه قبول، لینک رد |
| Coral | Burnt Clay #290E0A, Coral #E85446, Coral Milk #FDEEEB | دکمه قبول، لینک رد |
| Red Panda | Sombre Night #121A2E, Red Panda #B54302, Sugar Milk #FAF7F0 | خاکستری روی کارت قبول |
| Warm Purple | English Walnut #2E1F14, Warm Purple #812E7D, Oh Pistachio #BCDBA4 | خاکستری روی کارت رد |
| Mango | Jedi Night #0E2219, Mango #FAA828, Heart of Ice #F2F5FA | خاکستری روی کارت قبول |
| Viridian | Midnight Dreams #0E222D, Viridian #007F5B, Digital Lavender #D3CAEE | خاکستری روی کارت رد |
| Purple Estate | Sunwashed Paper #F5EDCE, Blue Horizon #72AFCC, Purple Estate #58287F | آبی کم‌رنگ پرکننده، فقط متن درشت |
| Blue Horizon | Blue Horizon #2FA4D7, Desert Cream #F5E9D8, Cocoa Noir #3E2C23 | پرکننده با Cocoa Noir قبول |
| Herb Garden | Red Monarch #A82323, Sun Linen #FEFFD3, Herb Garden #BCD9A2 | پرکننده با Red Monarch قبول |
| Nordic Sky | Velvet Indigo #4B5694, Nordic Sky #7288AE, Manor Cream #EAE0CF | پرکننده سفید می‌پذیرد، فقط متن درشت |
اعداد، برای کسی که از انتخاب دفاع میکند
هر جفت رنگ با فرمول کنتراست WCAG 2 روی سطحی که رویش مینشیند اندازه‌گیری شد. این تنها جدول این مقاله است که نسبت‌ها دارد.
| پالت | آزمون | نسبت | نتیجه |
|---|---|---|---|
| Indigo | برچسب سفید / دکمه روی صفحه / لینک روی صفحه | 7.90:1 / 6.96:1 / 6.96:1 | همه قبول |
| Berry | برچسب سفید / دکمه روی صفحه / لینک روی صفحه | 7.21:1 / 6.22:1 / 6.22:1 | همه قبول |
| Sky | برچسب جوهر / دکمه روی صفحه / لینک روی صفحه | 5.01:1 / 3.23:1 / 3.23:1 | قبول، قبول، رد |
| Coral | برچسب جوهر / دکمه روی صفحه / لینک روی صفحه | 4.98:1 / 3.21:1 / 3.21:1 | قبول، قبول، رد |
| Red Panda | خاکستری ۶۵٪ روی کارت / روی سفید | 5.2:1 / 5.4:1 | هر دو قبول |
| Warm Purple | خاکستری ۶۵٪ روی کارت / روی سفید / با ۷۰٪ | 4.1:1 / 5.0:1 / 4.8:1 | رد، قبول، قبول |
| Mango | خاکستری ۶۵٪ روی کارت / روی سفید | 5.0:1 / 5.2:1 | هر دو قبول |
| Viridian | خاکستری ۶۵٪ روی کارت / روی سفید / با ۷۰٪ | 4.2:1 / 5.1:1 / 4.8:1 | رد، قبول، قبول |
| Purple Estate | رنگ تاکیدی کم‌رنگ به عنوان متن / بهترین متن روی آن / جوهر روی صفحه | 2.05:1 / 4.31:1 / 8.83:1 | رد، متن درشت، قبول |
| Blue Horizon | رنگ تاکیدی کم‌رنگ به عنوان متن / بهترین متن روی آن / جوهر روی صفحه | 2.36:1 / 4.66:1 / 11.03:1 | رد، قبول، قبول |
| Herb Garden | رنگ تاکیدی کم‌رنگ به عنوان متن / بهترین متن روی آن / جوهر روی صفحه | 1.51:1 / 4.64:1 / 6.98:1 | رد، قبول، قبول |
| Nordic Sky | رنگ تاکیدی کم‌رنگ به عنوان متن / سفید روی آن / جوهر روی صفحه | 2.75:1 / 3.59:1 / 5.25:1 | رد، متن درشت، قبول |
چطور پالت UI خودتان را بسازید
- از جوهر و سطح شروع کنید. یک جوهر تیره و یک سطح، رنگی یا سفید، انتخاب کنید و جوهر را روی سطح بسنجید. Harbor Ink
#021828روی Sky Wash#EAF4FCحالت ساده است. - رنگ تاکیدی را برای برچسب انتخاب کنید. تصمیم بگیرید متن سفید روی آن بنشیند یا تیره، و برچسب را روی رنگ تاکیدی بسنجید.
- رنگ تاکیدی را به عنوان لینک آزمایش کنید. آن را به عنوان متن روی سطحتان بگذارید. اگر رد شد، آن را برای دکمهها نگه دارید و لینکها را با جوهر بنویسید.
- متن ثانویه را روی هر سطح آزمایش کنید. جوهر را با ۶۵٪ روی رنگ هر کارت ترکیب کنید. هر جا افت کرد به ۷۰٪ برسانید.
- رنگ‌های کم‌رنگ را برای پرکننده نگه دارید. پیش از تعهد، کلماتی را که روی آن‌ها می‌نشینند انتخاب کنید. مقاله‌های ما درباره اشتباهات رنگ در UI و کنتراست رنگ قابل دسترس درباره آستانه‌ها عمیق‌تر می‌شوند.
فایل‌های هر مجموعه را بگیرید
هر مجموعه یک مجموعه رنگ رایگان در Forge است، با کدهای کپی با یک لمس، فایل‌های نمونه رنگ برای Figma و Adobe (ASE)، متغیرهای CSS و توکن‌های طراحی.
مجموعه رنگ رایگان
رنگ تاکیدی دو کار دارد: Indigo، Berry، Sky، Coral
همه کدهای هگز، به همراه نمونه رنگ‌های ASE، متغیرهای CSS و توکن‌های طراحی.
مجموعه رنگ رایگان
متن خاکستری روی کارت‌های رنگی: Red Panda، Warm Purple، Mango، Viridian
همه کدهای هگز، به همراه نمونه رنگ‌های ASE، متغیرهای CSS و توکن‌های طراحی.
مجموعه رنگ رایگان
رنگ تاکیدی کم‌رنگ پر میکند، هرگز نمی‌نویسد: Purple Estate، Blue Horizon، Herb Garden، Nordic Sky
همه کدهای هگز، به همراه نمونه رنگ‌های ASE، متغیرهای CSS و توکن‌های طراحی.
سوالات متداول
پالت رنگ UI چه رنگهایی باید داشته باشد؟
حداقل سه نقش: جوهر برای متن، رنگ تاکیدی برای دکمهها و لینکها و سطح برای صفحه. Indigo #4338CA همراه با Ink Navy #141238 و Indigo Mist #EEF0FB یک نمونه کامل است.
لینکها در UI چه رنگی باید باشند؟
رنگ تاکیدی، فقط اگر به عنوان متن روی سطح شما قبول شود. Indigo قبول میشود. Sky #248AE4 نمی‌شود، پس لینک‌هایش با Harbor Ink #021828 و زیرخط‌دار نوشته می‌شوند.
متن ثانویه چه رنگی باید باشد؟
جوهر شما با حدود ۶۵٪، سنجیدهشده روی سطحی که رویش مینشیند. روی رنگمایه قوی مثل Oh Pistachio #BCDBA4 میتواند رد شود و رساندن آن به ۷۰٪ درستش میکند.
چرا خواندن متن خاکستری روی کارت رنگی سخت است؟
کارت رنگی از سفید تیرهتر است، پس فاصله بین خاکستری و کارت کم میشود. سفید مشکل را پنهان میکند و برای همین باید روی سطح واقعی آزمایش کنید.
آیا میتوانم از رنگ پاستلی به عنوان رنگ تاکیدی استفاده کنم؟
به عنوان پرکننده، بله. به عنوان متن، نه. Herb Garden #BCD9A2 به عنوان متن روی Sun Linen #FEFFD3 رد میشود و به عنوان پرکننده با Red Monarch #A82323 روی آن کار میکند.
آیا رنگ دکمه باید به عنوان رنگ لینک هم کار کند؟
اگر برای هر دو استفادهاش میکنید، بله. دکمه باید از صفحه متمایز شود و برچسبش را حمل کند. لینک متن است، پس روی همان صفحه معیار بالاتری دارد.
منابع
- نام رنگ‌ها و کدهای هگز از مجموعه‌های رنگ UX Brainy در Forge، جلدهای 04، 08 و 12. کنتراست با فرمول WCAG 2 روی سطحی که هر رنگ رویش مینشیند محاسبه شده است.
- آستانه‌های متن و شکل از W3C WCAG 2.2 پیروی می‌کنند: Contrast (Minimum) و Non-text Contrast.
- خاکستری هر کاشی، جوهر پالت است که با سطح به نسبت ۶۵٪، یا ۷۰٪ در جاهایی که ذکر شده، ترکیب شده است، پس آن هگز از پالت مشتق شده.
- ابتدا به صورت سه کاروسل در UX Brainy منتشر شد: یک رنگ تاکیدی دو کار دارد، همان خاکستری میتواند روی سفید قبول شود و روی کارت رنگی شما رد و رنگ تاکیدی کم‌رنگ شما میتواند یک شکل را پر کند.
Want a UI palette built for your product, with every role tested on your real screens? Our team designs interfaces that hold up in every state.
Get Started
