پالت‌های رنگی دارک مود: ۱۲ پالت با کد هگز برای شب
دوازده پالت رنگی دارک مود با کد هگز دقیق: رنگهای تأکیدی که شب میدرخشند، رنگ‌هایی که غرق می‌شوند، یک رنگ تأکیدی برای دو تم، و متن سفید شکستهای که چشم را نمی‌زند.
پالت دارک مود همان پالت روشن نیست که وارونه شده باشد. رنگ تأکیدی روی صفحه تیره رفتار دیگری دارد، متن باید نرمتر باشد و بعضی رنگ‌ها اصلاً از کار می‌افتند. این هم دوازده پالت تیره با تمام کدهای هگز، ساخته‌شده تا نشان دهند شب چه چیزی عوض میشود.
دارک مود رنگ تأکیدی شما را وارونه میکند
رنگ‌هایی که روی سفید کم می‌آورند، روی سطح تیره میدرخشند. رنگ‌هایی که روی سفید محکم به نظر می‌رسند، ممکن است لبه‌شان را از دست بدهند. یعنی تم تیره نمی‌تواند بدون بررسی، رنگ تأکیدی تم روشن را قرض بگیرد.
هر پالت زیر شامل یک رنگ روشن برای متن، یک رنگ تأکیدی و یک سطح تیره است. کاشی‌ها رنگ تأکیدی را روی صفحه تیره و روی سفید نشان می‌دهند. برای سیستم پشت یک تم تیره، مقاله ما درباره سیستم‌های رنگی دارک مود را ببینید.
Lime
Electric Lime #C6F432 روی Graphite #17181C: می‌درخشد
همان رنگ تأکیدی روی سفید: کم‌رنگ
Chalk #F2F3EE روی Graphite
Electric Lime روی سفید تقریباً نامرئی است و روی Graphite می‌درخشد. رنگ‌هایی که روی سفید کم می‌آورند، همان‌هایی هستند که شب می‌تابند.
Pink
Hot Pink #FF4F9A روی Night Plum #1A1218: می‌درخشد
همان رنگ تأکیدی روی سفید: ضعیف‌تر
Blush White #F6EEF2 روی Night Plum
Hot Pink روی سفید ضعیف‌تر است و روی Night Plum خیلی قوی‌تر.
Amber
Amber #FFB020 روی Coffee Black #1B1610: می‌درخشد
همان رنگ تأکیدی روی سفید: کم‌رنگ
Warm White #F5F0E6 روی Coffee Black
Amber روی سفید رنگ تأکیدی ضعیفی است و روی Coffee Black گرم و قوی.
Royal
Royal #3B4CCA روی Midnight #121426: غرق میشود
همان رنگ تأکیدی روی سفید: قوی
Frost #EEF0FA روی Midnight
Royal آبی کلاسیک حالت روشن است. روی Midnight از حدی که یک دکمه برای دیده‌شدن به‌عنوان یک شکل لازم دارد پایین‌تر می‌رود؛ همان هگز، صفحه‌ای دیگر.
همان هگز، صفحه‌ای دیگر. Royal همان است که باید مراقبش بود: دکمه‌ای که روی سفید کار میکند، شب می‌تواند غرق شود.
یک رنگ تأکیدی، دو تم
یک دکمه باید از صفحه‌ای که رویش نشسته متمایز باشد. Waikiki هم روی صفحه روشنش این کار را میکند و هم روی صفحه تیره. Very Berry هم همین‌طور. یک هگز، هر دو تم.
Lime Punch و Gentian Blue این‌طور نیستند. هر کدام در یک تم عالی به نظر می‌رسند و در تم دیگر ناپدید می‌شوند.
Waikiki
Waikiki
روی Silver Bird #FBF8F1: قبول
روی Midnight Oil #10141F: قبول
یک فیروزه‌ای میانتُن که روی هر دو صفحه خودش را نشان میدهد. یک هگز، هر دو تم.
Very Berry
Very Berry
روی French Porcelain #F7F4FB: قبول
روی Twilight Zone #0F1C16: قبول
یک میانتُن دیگر که روی صفحه روشن و تیره‌اش کار میکند.
Lime Punch
Lime Punch
روی Ceramic #FBFAF5: رد
روی Infinite Night #171538: قبول
برای حالت روشن بیش از حد روشن است: روی سطح روزانه‌اش دکمه تقریباً محو میشود. روی Infinite Night می‌درخشد.
Gentian Blue
Gentian Blue
روی Open Book #F6EFE5: قبول
روی Balsamico #1C1612: رد
برای دارک مود بیش از حد تیره است. روی Open Book قوی است و روی Balsamico ناپدید میشود.
اگر یک رنگ تأکیدی برای هر دو تم می‌خواهید، یک میانتُن انتخاب کنید و دو بار بسنجیدش. اگر نه، به هر تم سایه خودش را بدهید. راهنمای ما درباره طراحی دارک مود توضیح میدهد این تم دوم را چطور تحویل دهید.
سفید شکسته از سفید خالص بهتر است
سفید خالص روی سطح تقریباً سیاه قوی‌ترین کنتراستی است که میشود گرفت، و مشکل همین است: چشم را میزند. سفیدهای شکسته در این پالت‌ها هنوز خیلی راحتتر از حداقل لازم برای متن بدنه خوانده می‌شوند.
تم تیره Material Design هم به همین دلیل متن اصلی را روی ۸۷٪ سفید تنظیم میکند. به سفید شکسته کمی گرمی یا کمی سردی بدهید و بگذارید رنگ تأکیدی حرفش را بزند.
Smoked Salmon
Distant Cloud #E7ECEC روی Dark Moon #0B1B1F
سفید خالص #FFFFFF روی Dark Moon: چشم را میزند
Smoked Salmon #FF887A روی Dark Moon
یک سفید شکسته سرد با رنگ تأکیدی مرجانی گرم. رنگ تأکیدی بدون هیچ کمکی به‌وضوح دیده میشود.
Minted Elegance
Vanilla Sugar #F1EBDF روی Violet Void #1C1022
سفید خالص #FFFFFF روی Violet Void: چشم را میزند
Minted Elegance #4FCB9C روی Violet Void
Vanilla Sugar کمی گرمی دارد و رنگ تأکیدی نعنایی روی Violet Void جای فراوان دارد.
Malibu
Milk and Cookies #EFE7E7 روی Asphalt #1C140F
سفید خالص #FFFFFF روی Asphalt: چشم را میزند
Malibu #57BAF0 روی Asphalt
یک سفید شکسته گرم روی تقریباً سیاه گرم، با آبی آسمانی که از میانش می‌گذرد.
Dream Vapour
Star Magnolia #EAEFE4 روی Black Stallion #0E1A16
سفید خالص #FFFFFF روی Black Stallion: چشم را میزند
Dream Vapour #BB9DF0 روی Black Stallion
Star Magnolia کمی به سبز میزند که با رنگ تأکیدی یاسی ملایم خوب می‌نشیند.
هر رنگ تأکیدی در این چهار پالت روی سطح شبانه‌اش به‌وضوح خودنمایی میکند، پس متن می‌تواند ساکت بماند.
هر دوازده پالت در یک جدول
| پالت | رنگ‌ها | چه چیزی را نشان میدهد |
|---|---|---|
| Lime | Chalk #F2F3EE, Electric Lime #C6F432, Graphite #17181C | روی تیره می‌درخشد |
| Pink | Blush White #F6EEF2, Hot Pink #FF4F9A, Night Plum #1A1218 | روی تیره قوی‌تر |
| Amber | Warm White #F5F0E6, Amber #FFB020, Coffee Black #1B1610 | روی تیره می‌درخشد |
| Royal | Frost #EEF0FA, Royal #3B4CCA, Midnight #121426 | روی تیره غرق میشود |
| Waikiki | Midnight Oil #10141F, Waikiki #0098A4, Silver Bird #FBF8F1 | در هر دو تم کار میکند |
| Very Berry | Twilight Zone #0F1C16, Very Berry #CE4390, French Porcelain #F7F4FB | در هر دو تم کار میکند |
| Lime Punch | Infinite Night #171538, Lime Punch #B7DD31, Ceramic #FBFAF5 | فقط روی تیره کار میکند |
| Gentian Blue | Balsamico #1C1612, Gentian Blue #292BAE, Open Book #F6EFE5 | فقط روی روشن کار میکند |
| Smoked Salmon | Distant Cloud #E7ECEC, Smoked Salmon #FF887A, Dark Moon #0B1B1F | متن سفید شکسته |
| Minted Elegance | Vanilla Sugar #F1EBDF, Minted Elegance #4FCB9C, Violet Void #1C1022 | متن سفید شکسته |
| Malibu | Milk and Cookies #EFE7E7, Malibu #57BAF0, Asphalt #1C140F | متن سفید شکسته |
| Dream Vapour | Star Magnolia #EAEFE4, Dream Vapour #BB9DF0, Black Stallion #0E1A16 | متن سفید شکسته |
اعداد، برای کسی که باید از انتخاب دفاع کند
هر جفت رنگ با فرمول کنتراست WCAG 2 روی سطحی که رویش می‌نشیند اندازه‌گیری شده است. این تنها جدول مقاله است که نسبت‌ها را دارد.
| پالت | آزمون | نسبت | نتیجه |
|---|---|---|---|
| Lime | رنگ تأکیدی روی سطح تیره / روی سفید | 13.84:1 / 1.28:1 | می‌درخشد، کم‌رنگ |
| Pink | رنگ تأکیدی روی سطح تیره / روی سفید | 5.98:1 / 3.07:1 | روی تیره قوی‌تر |
| Amber | رنگ تأکیدی روی سطح تیره / روی سفید | 9.82:1 / 1.83:1 | می‌درخشد، کم‌رنگ |
| Royal | رنگ تأکیدی روی سطح تیره / روی سفید | 2.66:1 / 6.83:1 | روی تیره غرق میشود |
| Waikiki | دکمه روی روشن / روی تیره | 3.2:1 / 5.2:1 | هر دو قبول |
| Very Berry | سوییچ روی روشن / روی تیره | 3.9:1 / 4.0:1 | هر دو قبول |
| Lime Punch | دکمه روی روشن / روی تیره | 1.4:1 / 11.1:1 | رد، قبول |
| Gentian Blue | دکمه پخش روی روشن / روی تیره | 8.9:1 / 1.7:1 | قبول، رد |
| Smoked Salmon | متن سفید شکسته / سفید خالص / رنگ تأکیدی | 14.7:1 / 17.6:1 / 7.6:1 | قبول، چشم‌زن، قبول |
| Minted Elegance | متن سفید شکسته / سفید خالص / رنگ تأکیدی | 15.4:1 / 18.3:1 / 9.0:1 | قبول، چشم‌زن، قبول |
| Malibu | متن سفید شکسته / سفید خالص / رنگ تأکیدی | 14.9:1 / 18.1:1 / 8.3:1 | قبول، چشم‌زن، قبول |
| Dream Vapour | متن سفید شکسته / سفید خالص / رنگ تأکیدی | 15.2:1 / 17.8:1 / 7.8:1 | قبول، چشم‌زن، قبول |
چطور پالت دارک خودتان را بسازید
- اول سطح تیره را انتخاب کنید. یک تقریباً سیاه مثل Graphite
#17181Cیا Violet Void#1C1022از سیاه خالص نرمتر است. - متن را با سفید شکسته بنویسید. کمی گرمی یا کمی سردی اضافه کنید، مثل Vanilla Sugar
#F1EBDF. - رنگ تأکیدی را روی سطح تیره آزمایش کنید. رنگ تأکیدی تم روشن را بدون بررسی دوباره استفاده نکنید.
- تصمیم بگیرید یک رنگ تأکیدی یا دو. اگر یک رنگ باید به هر دو تم خدمت کند، یک میانتُن انتخاب کنید و روی هر دو صفحه بسنجیدش. وگرنه به هر تم سایه خودش را بدهید.
- دکمه را به‌عنوان یک شکل بررسی کنید. باید از صفحه متمایز باشد، نه اینکه فقط مثل یک برچسب خوانده شود.
فایل‌های هر مجموعه را بگیرید
هر مجموعه یک مجموعه رنگ رایگان در Forge است، با کدهای قابل کپی با یک لمس، فایل‌های سواچ برای Figma و Adobe (ASE)، متغیرهای CSS و توکن‌های طراحی.
مجموعه رنگ رایگان
دارک مود رنگ تأکیدی شما را وارونه میکند: Lime، Pink، Amber، Royal
همه کدهای هگز، به‌علاوه سواچ‌های ASE، متغیرهای CSS و توکن‌های طراحی.
مجموعه رنگ رایگان
یک رنگ تأکیدی، دو تم: Waikiki، Very Berry، Lime Punch، Gentian Blue
همه کدهای هگز، به‌علاوه سواچ‌های ASE، متغیرهای CSS و توکن‌های طراحی.
مجموعه رنگ رایگان
سفید شکسته برای دارک مود: Smoked Salmon، Minted Elegance، Malibu، Dream Vapour
همه کدهای هگز، به‌علاوه سواچ‌های ASE، متغیرهای CSS و توکن‌های طراحی.
سوالات متداول
چه رنگ‌هایی در یک پالت رنگی دارک مود بهترین عمل میکنند؟
یک سطح تقریباً سیاه، یک سفید شکسته برای متن، و یک رنگ تأکیدی که روی تیره خودنمایی کند. Smoked Salmon #FF887A روی Dark Moon #0B1B1F با Distant Cloud #E7ECEC برای متن مثال خوبی است.
آیا دارک مود باید از متن سفید خالص استفاده کند؟
نه. سفید خالص روی سطح تقریباً سیاه چشم را میزند. سفید شکستهای مثل Vanilla Sugar #F1EBDF هنوز خیلی راحتتر از حداقل لازم برای متن بدنه خوانده میشود و نرمتر است.
آیا میتوانم از یک رنگ تأکیدی در حالت روشن و تیره استفاده کنم؟
فقط اگر میانتُن باشد. Waikiki #0098A4 روی هر دو صفحه خودنمایی میکند. Lime Punch #B7DD31 روی روشن ناپدید میشود و Gentian Blue #292BAE روی تیره.
چرا دکمه آبی من در دارک مود ناپدید میشود؟
آبیای که روی سفید قوی است ممکن است برای سطح تیره بیش از حد تیره باشد. Royal #3B4CCA روی Midnight #121426 غرق میشود. برای تم تیره از آبی روشنتری استفاده کنید.
دکمههای دارک مود چه رنگی باید باشند؟
هر رنگی که از سطح تیره متمایز باشد. Electric Lime #C6F432، Hot Pink #FF4F9A و Amber #FFB020 همه این کار را میکنند، چون رنگهای روشن شب میدرخشند.
بهترین رنگ پسزمینه دارک مود چیست؟
یک تقریباً سیاه مثل Graphite #17181C یا Coffee Black #1B1610، نه سیاه خالص. کنار سفید شکسته نرمتر است و باز هم اجازه میدهد رنگ تأکیدی بدرخشد.
منابع
- نام رنگ‌ها و کدهای هگز از مجموعه‌های رنگ UX Brainy در Forge، جلدهای ۰۵، ۰۹ و ۱۰. کنتراست با فرمول WCAG 2 روی سطحی که هر رنگ رویش می‌نشیند محاسبه شده است.
- آستانه‌های متن و شکل از W3C WCAG 2.2 پیروی میکنند: Contrast (Minimum) و Non-text Contrast.
- تم تیره Material Design متن اصلی را روی ۸۷٪ سفید تنظیم میکند: Material Design, Dark theme.
- ابتدا در سه کاروسل در UX Brainy منتشر شد: رنگ تأکیدی‌ای که روی سفید کار میکند ممکن است در دارک مود ناپدید شود، یک رنگ تأکیدی برای حالت روشن و تیره فقط در میانه طیف کار میکند و دارک مود به متن سفید خالص نیاز ندارد.
Want a dark theme designed and tested for your own product, not borrowed from the light one? Our team designs interfaces that hold up in both themes.
Get Started
