پالت‌های رنگ آکسنت: ۱۶ آکسنت و برچسبی که هر کدام لازم دارد
شانزده پالت رنگ آکسنت با کدهای هگز دقیق، که هر کدام برای تنها کاری که یک آکسنت باید بکند آزمایش شده‌اند: داشتن یک برچسب خوانا روی دکمه. ببینید کدام آکسنت‌ها متن سفید می‌پذیرند، کدام متن تیره، و کدام هیچکدام را.
آکسنت تنها رنگی در رابط شماست که یعنی «اینجا بزن». فقط وقتی کار میکند که کلمات روی آن خوانا باشند، پس این برچسب است که تعیین میکند کدام آکسنت خوب است. اینجا شانزده آکسنت در چهار آزمون آمده‌اند، با همه کدهای هگز و برچسبی که هر کدام میپذیرد.
یک آکسنت باید از چه چیزی جان سالم به در ببرد
آکسنت را با این قضاوت میکنند که وقتی کلمه‌ای روی آن بگذارید چه میشود. برچسب باید خوانا باشد و دکمه باید از صفحه پشتش جدا دیده شود.
این چهار آزمون را می‌سازد. برچسب سفید می‌گیرد یا تیره، یا وسط می‌افتد جایی که هیچکدام جواب نمی‌دهد؟ میتواند متن کوچک تگ را حمل کند؟ آیا برای دکمه بودن بیش از حد کمرنگ است، مثل Butterscotch Gold #F7C873؟
هر پالت پایین یک جوهر، یک آکسنت و یک سطح است، و آخرین کاشی آزمون را نشان می‌دهد.
آکسنت کدام برچسب را میپذیرد
Teal، Cobalt و Rose آن‌قدر تیره‌اند که برچسب سفید از آن‌سوی اتاق هم خوانده میشود. Amber #C88A16 اینطور نیست.
Teal
Deep Sea
Teal
Chalk
سفید روی Teal
یک سبزآبی تیره که برچسب سفید را با فاصله زیاد حمل میکند.
Cobalt
Navy Ink
Cobalt
Mist
سفید روی Cobalt
قوی‌ترین از این چهار. سفید روی Cobalt از آن‌سوی اتاق خوانده میشود.
Rose
Plum Ink
Rose
Shell
سفید روی Rose
Rose روشن‌ترین از سه آکسنتِ برچسب‌سفید است، پس کمترین فضای مانور را دارد. دیگر روشن‌ترش نکنید.
Amber
Bark
Amber
Oat
Bark روی Amber
Amber صادق‌ترین است. سفید روی آن رد میشود و راه‌حل Amber تیره‌تر نیست: برچسب را با Bark بنویسید و رنگ را دقیقاً همان‌طور که هست نگه دارید.
کار یک آکسنت همین است: باید از کلماتی که رویش می‌گذارید جان سالم به در ببرد. Amber نشان می‌دهد راه‌حل بهندرت رنگی دیگر است. برچسب را عوض کنید، برند را نگه دارید.
منطقه مرده رنگهای میانی
بعضی آکسنت‌ها وسط مقیاس روشنایی می‌نشینند: برای متن سفید زیادی روشن و برای متن تیره زیادی تیره. از این چهار، دوتا در جهت‌های مخالف فرار میکنند و دوتا گیر افتاده‌اند.
French Winery
French Winery
سفید روی French Winery: قبول
Midnight Express #1D2433 روی French Winery: رد
Magnolia Petal
آن‌قدر تیره که متن سفید کار میکند. French Winery با تیره‌تر شدن از منطقه مرده بیرون می‌آید.
Wild Forest
Wild Forest
سفید روی Wild Forest: رد
Nightwalker #2B1A35 روی Wild Forest: رد
Vintage Porcelain
یک سبز شاداب که درست وسط نشسته. سفید روی آن رد میشود و تیره هم. یک درجه تیره‌تر و سفید قبول میشود، پس پیش از طراحی حتی یک دکمه، سبز را کمی جابهجا کنید.
Glowing Lantern
Glowing Lantern
سفید روی Glowing Lantern: رد
Aztec #153023 روی Glowing Lantern: قبول
Silent Snowfall
آن‌قدر روشن که متن تیره کار میکند. Glowing Lantern از طرف دیگر، با روشن‌تر شدن، از منطقه مرده بیرون می‌آید، پس برچسبش Aztec است، هرگز سفید.
Pink Orchid
Pink Orchid
سفید روی Pink Orchid: رد
Royal Neptune #0F2E30 روی Pink Orchid: رد
Snowflake
یک صورتیِ میانی با همان مشکل Wild Forest. یک درجه تیره‌تر و سفید قبول میشود.
تایپ بزرگ آستانه پایین‌تری از متن ریز دارد، پس یک تیتر بزرگ میتواند روی این رنگ‌ها خوب به نظر برسد در حالی که برچسب دکمه رد میشود. کوچک‌ترین متنی را که روی آکسنت می‌گذارید بررسی کنید. اگر آکسنت برندتان وسط افتاد، پیش از ساخت مجموعه دکمه‌ها آن را جابهجا کنید.
دکمه بج نیست
بج معمولاً آکسنتِ حدود ۱۵٪ برای پس‌زمینه است، با آکسنت کامل بهعنوان متن. این تینت پس‌زمینه را روشن میکند و متن روی آن کنتراست از دست می‌دهد. یک آکسنت میتواند برچسب سفید دکمه را حمل کند و درون بج خودش رد شود. کاشی سوم آکسنت با ۱۵٪ روی سطح است.
Peacock Pride
Peacock Pride
برچسب سفید دکمه: قبول
Peacock Pride روی تینت #D5E1D2: قبول
Wood Bark #2A2320 روی تینت: قبول
یک سبزآبی تیره که روی Cosmic Latte #FBF7E6 از هر دو کار سالم بیرون می‌آید.
Furnace
Furnace
برچسب سفید دکمه: قبول
Furnace روی تینت #EAD9D1: رد
Elite Teal #13302A روی تینت: قبول
یک دکمه قرمز-نارنجی قوی که بهعنوان تگ ضعیف میشود. روی White Glove #EEF4F0 متن تگ را با رنگ جوهری بنویسید و بج خوب خوانده میشود.
Purple Heart
Purple Heart
برچسب سفید دکمه: قبول
Purple Heart روی تینت #E6D3DF: قبول
Black Velvet #1B2838 روی تینت: قبول
آن‌قدر تیره که تینت پشتش، روی Vanilla Blush #FDF1EC، تفاوتی ایجاد نمی‌کند.
French Blue
French Blue
برچسب سفید دکمه: قبول
French Blue روی تینت #D9E3E3: رد
Nightly Voyager #2A1630 روی تینت: قبول
همان داستان Furnace: دکمه‌ای که کار میکند و بجی که نمی‌کند. روی Powdered #FFF6E8 رنگ جوهری متن بج را نجات می‌دهد.
اگر آکسنت شما رنگ میانی است، متن بج و تگ را با رنگ جوهری بنویسید. تگ‌های Furnace و بج‌های French Blue هر دو به محض اینکه متن به رنگ جوهری برود بهراحتی خوانده میشوند.
رنگ درخشان دکمه نیست
دکمه باید به‌وضوح از صفحه‌ای که رویش نشسته جدا دیده شود. یک آکسنت روشن و کمرنگ روی صفحه کرم این کار را نمی‌کند، حتی اگر زیباترین رنگ پالت باشد.
پس نقش‌ها را عوض کنید. رنگ تیره دکمه میشود و رنگ درخشان تگ، بج و حالت انتخابشده. دو تا از این پالت‌ها همین کار را میکنند و دو تای دیگر آکسنتی دارند که برای زدن بهاندازه کافی تیره است.
Butterscotch
دکمه Storm Graphite #434343، برچسب Butter Canvas #FAEBCD: قبول
تگ Butterscotch Gold #F7C873: قبول
Butterscotch Gold روی صفحه: بهزحمت دیده میشود
Butterscotch Gold قشنگ است و روی Butter Canvas بهعنوان دکمه ناپدید میشود. نقش‌ها را عوض کنید: Storm Graphite دکمه است و طلایی تگ میشود.
Ocean Breeze
دکمه Midnight Navy #0C2C55، برچسب Vanilla Linen #EDEDCE: قبول
تگ Ocean Breeze #629FAD: قبول
Ocean Breeze روی صفحه: بهزحمت دیده میشود
یک آبی-سبزآبی ملایم روی کتان کمرنگ. همان راه‌حل: Midnight Navy دکمه است، Ocean Breeze تگ و حالت انتخابشده.
Silent Grove
دکمه Silent Grove #215E61: قبول
لینک روی Morning Paper #F5FBE6: قبول
Blue Monolith #233D4D
این یکی همه کار میکند. یک سبزآبی تیره هم دکمه است و هم لینک روی Morning Paper، با برچسب سفیدی که راحت خوانده میشود.
Wild Berry
دکمه Wild Berry #CF4173: قبول
لینک Wild Berry روی Peach Cashmere #F6D8BD: رد
لینک Deep Berry Plum #5D3140: قبول
Wild Berry بهزحمت بهعنوان دکمه با برچسب سفید قبول میشود. بهعنوان متن روی Peach Cashmere کم میآورد، پس لینک‌هایش با Deep Berry Plum نوشته میشوند.
لینک کلمه است، پس باید از آستانه متن عبور کند، نه فقط آستانه دکمه. وقتی آکسنت بهزحمت بهعنوان دکمه قبول میشود، لینک‌ها را با رنگ جوهری بنویسید.
هر شانزده آکسنت در یک جدول
| پالت | آکسنت | برچسبی که کار میکند | مراقب چه باشید |
|---|---|---|---|
| Teal | Teal #0E7C6B | سفید | هیچکدام از چهار کار |
| Cobalt | Cobalt #2F4BD6 | سفید | هیچکدام از چهار کار |
| Rose | Rose #C2445F | سفید | کمترین فضا از میان سه تا، روشن‌ترش نکنید |
| Amber | Amber #C88A16 | Bark #2C2415 | سفید رد میشود |
| French Winery | French Winery #9A0A2C | سفید | متن تیره رد میشود |
| Wild Forest | Wild Forest #009041 | هیچ، تا یک درجه تیره‌تر | هر دو برچسب رد میشوند |
| Glowing Lantern | Glowing Lantern #FFBB40 | Aztec #153023 | سفید رد میشود |
| Pink Orchid | Pink Orchid #C157AD | هیچ، تا یک درجه تیره‌تر | هر دو برچسب رد میشوند |
| Peacock Pride | Peacock Pride #006262 | سفید | هیچکدام از چهار کار |
| Furnace | Furnace #D23D20 | سفید | متن بج، از Elite Teal #13302A استفاده کنید |
| Purple Heart | Purple Heart #652A97 | سفید | هیچکدام از چهار کار |
| French Blue | French Blue #0075C9 | سفید | متن بج، از Nightly Voyager #2A1630 استفاده کنید |
| Butterscotch | Butterscotch Gold #F7C873 | متن تیره، بهعنوان تگ | برای دکمه بودن زیادی کمرنگ |
| Ocean Breeze | Ocean Breeze #629FAD | متن تیره، بهعنوان تگ | برای دکمه بودن زیادی کمرنگ |
| Silent Grove | Silent Grove #215E61 | سفید | هیچکدام از چهار کار |
| Wild Berry | Wild Berry #CF4173 | سفید | لینک‌ها، از Deep Berry Plum #5D3140 استفاده کنید |
اعداد، برای کسی که از انتخاب دفاع میکند
هر جفت رنگ بالا با فرمول کنتراست WCAG 2 اندازه‌گیری شده است. این تنها جدول مقاله است که نسبت‌ها دارد.
| پالت | آزمون | نسبت | نتیجه |
|---|---|---|---|
| Teal | برچسب سفید روی آکسنت | 5.10:1 | قبول |
| Cobalt | برچسب سفید روی آکسنت | 6.78:1 | قبول |
| Rose | برچسب سفید روی آکسنت | 4.90:1 | قبول |
| Amber | برچسب سفید روی آکسنت | 2.96:1 | رد |
| French Winery | برچسب سفید | 8.5:1 | قبول |
| French Winery | برچسب تیره | 1.8:1 | رد |
| Wild Forest | برچسب سفید | 4.1:1 | رد |
| Wild Forest | برچسب تیره | 3.8:1 | رد |
| Wild Forest | برچسب سفید، یک درجه تیره‌تر | 4.6:1 | قبول |
| Glowing Lantern | برچسب تیره | 8.4:1 | قبول |
| Glowing Lantern | برچسب سفید | 1.6:1 | رد |
| Pink Orchid | برچسب سفید | 4.0:1 | رد |
| Pink Orchid | برچسب تیره | 3.6:1 | رد |
| Pink Orchid | برچسب سفید، یک درجه تیره‌تر | 4.6:1 | قبول |
| Peacock Pride | برچسب دکمه / متن بج | 7.1:1 / 5.3:1 | هر دو قبول |
| Furnace | برچسب دکمه / متن بج / متن بج با رنگ جوهری | 4.7:1 / 3.4:1 / 10.3:1 | قبول، رد، قبول |
| Purple Heart | برچسب دکمه / متن بج | 9.0:1 / 6.3:1 | هر دو قبول |
| French Blue | برچسب دکمه / متن بج / متن بج با رنگ جوهری | 4.7:1 / 3.6:1 / 12.7:1 | قبول، رد، قبول |
| Butterscotch | طلایی روی صفحه / متن تیره روی تگ طلایی | 1.32:1 / 6.34:1 | رد، قبول |
| Ocean Breeze | آکسنت روی صفحه / متن تیره روی تگ آکسنت | 2.49:1 / 4.7:1 | رد، قبول |
| Silent Grove | برچسب سفید روی آکسنت | 7.4:1 | قبول |
| Wild Berry | برچسب سفید روی آکسنت | 4.51:1 | بهزحمت قبول |
چطور آکسنت خودتان را آزمایش کنید
- اول سفید را امتحان کنید. اگر سفید روی آکسنت قبول شد، مثل Cobalt
#2F4BD6، برچسب شما تعیین شده است. - بعد تیره‌ترین رنگ جوهری‌تان را امتحان کنید. اگر سفید رد شد و جوهری قبول شد، همه برچسب‌ها را با رنگ جوهری بنویسید، مثل Amber و Glowing Lantern.
- اگر هر دو رد شدند، آکسنت را جابهجا کنید. یک درجه تیره‌تر یا روشن‌تر شما را از وسط بیرون میآورد.
- تگ را جداگانه آزمایش کنید. تینت ۱۵٪ را بسازید و آکسنت را بهعنوان متن روی آن بررسی کنید. اگر رد شد، تگ‌ها را با رنگ جوهری بنویسید.
- دکمه را در برابر صفحه بررسی کنید. آکسنت کمرنگ تگ است، نه دکمه. مقاله‌های ما درباره کنتراست رنگ قابل‌دسترس و اشتباهات رنگ در UI آستانه‌ها را پوشش می‌دهند.
فایل‌های هر مجموعه را بگیرید
هر مجموعه یک ست رنگ رایگان در Forge است، با کدهای قابل کپی با یک ضربه، فایل‌های سواچ برای Figma و Adobe (ASE)، متغیرهای CSS و دیزاین توکن.
ست رنگ رایگان
جوهر، سطح، یک چیز برای زدن: Teal، Cobalt، Rose، Amber
همه کدهای هگز، به‌علاوه سواچ‌های ASE، متغیرهای CSS و دیزاین توکن.
ست رنگ رایگان
منطقه مرده: French Winery، Wild Forest، Glowing Lantern، Pink Orchid
همه کدهای هگز، به‌علاوه سواچ‌های ASE، متغیرهای CSS و دیزاین توکن.
ست رنگ رایگان
دکمه بج نیست: Peacock Pride، Furnace، Purple Heart، French Blue
همه کدهای هگز، به‌علاوه سواچ‌های ASE، متغیرهای CSS و دیزاین توکن.
ست رنگ رایگان
رنگ درخشان دکمه نیست: Butterscotch، Ocean Breeze، Silent Grove، Wild Berry
همه کدهای هگز، به‌علاوه سواچ‌های ASE، متغیرهای CSS و دیزاین توکن.
سوالات متداول
چه رنگ متنی روی دکمه آکسنت میرود؟
اگر آکسنت بهاندازه کافی تیره است سفید، اگر روشن است جوهر تیره. Teal #0E7C6B سفید میپذیرد. Amber #C88A16 Bark #2C2415 را میپذیرد. اگر هیچکدام جواب نداد، آکسنت در میانه است و باید یک درجه جابهجا شود.
چرا متن سفید روی بعضی دکمههای رنگی رد میشود؟
چون دکمه زیادی روشن است. Amber، Glowing Lantern #FFBB40 و Butterscotch Gold #F7C873 روشناند، پس متن سفید روی آنها کمرنگ است. رنگهای میانی مثل Wild Forest #009041 هم با متن سفید و هم با متن تیره رد میشوند.
چطور برای پالت UI یک رنگ آکسنت انتخاب کنم؟
اول برچسب را انتخاب کنید. تصمیم بگیرید آکسنت متن سفید حمل میکند یا تیره، بعد رنگی را انتخاب کنید که به‌وضوح در یک سمت میانه باشد. آن را بهعنوان دکمه، متن بج و در برابر صفحه بررسی کنید.
چرا آکسنت من بهعنوان دکمه خوب است ولی بهعنوان بج بد؟
بج آکسنت را بهصورت متن روی یک تینت روشن از خودش میگذارد، که کنتراست را پایین میآورد. Furnace #D23D20 و French Blue #0075C9 برچسب سفید دکمه را بهراحتی حمل میکنند و بهعنوان متن بج رد میشوند. متن بج را با رنگ جوهری بنویسید.
آیا آکسنت روشن میتواند دکمه باشد؟
بهندرت. باید از صفحه پشتش جدا دیده شود و یک آکسنت کمرنگ روی صفحه کرم بهزحمت این کار را میکند. یک رنگ تیره را دکمه کنید و از آکسنت کمرنگ برای تگ یا حالت انتخابشده استفاده کنید.
منابع
- نام رنگ‌ها و کدهای هگز از ست‌های رنگ UX Brainy در Forge، جلدهای 02، 06، 07 و 11. کنتراست با فرمول WCAG 2 در برابر سطحی که هر رنگ روی آن نشسته محاسبه شده است.
- آستانه‌های کنتراست برای متن و اشکال از W3C WCAG 2.2 پیروی میکنند: Contrast (Minimum) و Non-text Contrast.
- هگز تینت در هر کاشی بج، آکسنت با ۱۵٪ روی سطح است و از پالت به دست آمده.
- نخستین بار بهصورت چهار کاروسل در UX Brainy منتشر شد: آکسنت شما تعیین میکند برچسبش چه رنگی باشد، منطقه مرده، دکمه بج نیست و رنگ درخشان دکمه نیست.
Want an accent and a full UI palette built for your product and tested on your real screens? Our team designs interfaces that hold up in every state.
Get Started
