लाइट मोड बैकग्राउंड कलर: #FFFFFF काफ़ी क्यों नहीं है, और इस्तेमाल करने के 8 रंग
पूरी तरह सफ़ेद स्क्रीन में गहराई दिखाने की जगह ही नहीं बचती। इसके बदले लाइट मोड बैकग्राउंड कलर (सफ़ेद कार्ड के पीछे #F2F2F7), नरम टेक्स्ट रंग, गहरा एक्सेंट, और डेवलपर को देने वाले 8 कोड।
सबसे अच्छा लाइट मोड बैकग्राउंड कलर #FFFFFF नहीं है। पेज को #F2F2F7 जैसे नरम ग्रे पर रखें और सफ़ेद को उन कार्ड के लिए बचाएँ जो उसके ऊपर बैठते हैं, ताकि सतहों के पास उभरने के लिए कुछ हो। यहाँ बताया है कि पूरी सफ़ेद स्क्रीन क्यों फेल होती है, तीन फ़िक्स क्या हैं, और डेवलपर को देने वाले आठ रंग कौन से हैं।
पूरी सफ़ेद स्क्रीन सपाट क्यों लगती है
ज़्यादातर डिज़ाइनर लाइट मोड की शुरुआत हर चीज़ को सफ़ेद रंगकर करते हैं। हर डिज़ाइन टूल में यही डिफ़ॉल्ट फ़िल है और हर ब्राउज़र में यही डिफ़ॉल्ट बैकग्राउंड, इसलिए यह न्यूट्रल लगता है। पर यह न्यूट्रल नहीं है। यही वह चुनाव है जो आपसे गहराई दिखाने की क्षमता छीन लेता है।
कार्ड को उस पेज से अलग दिखना चाहिए जिस पर वह बैठा है। जब दोनों #FFFFFF हों, तो उन्हें अलग करने के लिए बस बॉर्डर या शैडो बचते हैं, और सारा काम इन्हीं दो बारीकियों पर आ जाता है। कुछ और कार्ड जोड़िए और स्क्रीन आउटलाइनों की जाली बन जाती है।
डार्क मोड यह समस्या पहले ही सुलझा चुका है। वहाँ हल्की सतह का मतलब ऊँची सतह होता है, इसलिए हर परत नीचे वाली से एक कदम हल्की होती है। हमारा पेपर डार्क मोड कलर सिस्टम उस रैंप को समझाता है, और डार्क मोड डिज़ाइन बाकी पैलेट को। लाइट मोड में सफ़ेद से ऊपर कोई हल्का कदम नहीं है, इसलिए यहाँ अलग चाल चाहिए: फ़र्श को नीचे करो।
फ़िक्स 1: पेज को #F2F2F7 से शुरू करें
पेज और कार्ड दोनों #FFFFFF
पेज #F2F2F7, कार्ड #FFFFFF
#F2F2F7 वही ग्रे है जो iOS अपनी ग्रुप्ड लिस्ट के पीछे रखता है। यह लाइट मोड में Apple का system gray 6 है, और Apple का अपना निर्देश है कि ग्रुप्ड टेबल व्यू के लिए ग्रुप्ड बैकग्राउंड रंग इस्तेमाल करें। Settings इसका क्लासिक उदाहरण है: हल्का ग्रे पेज, सफ़ेद पंक्तियाँ।
इस एक बदलाव से आपको फ़र्श और छत दोनों मिल जाते हैं। पेज फ़र्श है, कार्ड और शीट छत हैं, और उनके बीच का फ़ासला बिना एक भी लाइन खींचे दिखता है।
कहाँ लगाएँ:
- पेज का बैकग्राउंड, हर उस स्क्रीन के पीछे जिसमें कार्ड, लिस्ट या सेक्शन हैं।
- ग्रुप्ड लिस्ट और सेटिंग्स स्क्रीन, जहाँ पंक्तियाँ सफ़ेद और खाली जगह ग्रे होती है।
- सफ़ेद कार्ड के अंदर के इनपुट, जो पेज वाले ग्रे पर बैठ सकते हैं ताकि धँसे हुए लगें।
अगर आपकी स्क्रीन एक लंबा सफ़ेद लेख है जिसमें कोई कार्ड ही नहीं, तो सफ़ेद ठीक है। यह नियम सतहों से बने इंटरफ़ेस के लिए है।
फ़िक्स 2: उठाने का काम शैडो को करने दें
डार्क मोड में एलिवेशन का मतलब हल्का रंग है। लाइट मोड में सतहें सफ़ेद ही रहती हैं और शैडो बढ़ती है। आराम की स्थिति वाले कार्ड को छोटी, नरम शैडो मिलती है; उसके ऊपर तैरते मेन्यू या डायलॉग को बड़ी, और नरम शैडो।
दो आदतें इसे सही दिखाती हैं:
- शैडो को शुद्ध काले से नहीं, अपनी इंक से टिंट करें। आपके टेक्स्ट के रंग की शैडो (पोस्ट में #1B1530 इस्तेमाल हुआ, गहरा वायलेट) इंटरफ़ेस का हिस्सा लगती है। शुद्ध काला धब्बे जैसा दिखता है।
- बड़े का मतलब ऊँचा रखें। चार की छोटी स्केल लें, छोटे से बड़े तक, और हर स्तर को एक काम दें: कार्ड, उठा हुआ कार्ड, मेन्यू, डायलॉग। फिर पाँचवाँ कभी न गढ़ें।
/* A starting point, not a platform spec. Tune the values to your brand. */
:root {
--shadow-ink: 27 21 48; /* #1B1530 */
--shadow-sm: 0 1px 2px rgb(var(--shadow-ink) / 0.08);
--shadow-md: 0 4px 12px rgb(var(--shadow-ink) / 0.10);
--shadow-lg: 0 12px 32px rgb(var(--shadow-ink) / 0.14);
}
.card { background: #FFFFFF; box-shadow: var(--shadow-sm); }
.menu { background: #FFFFFF; box-shadow: var(--shadow-md); }
.dialog { background: #FFFFFF; box-shadow: var(--shadow-lg); }
ग्रे पेज इसे काम करने लायक बनाता है। सफ़ेद पेज पर नरम शैडो लगभग अदृश्य होती है, इसलिए लोग गहरी शैडो या बॉर्डर से भरपाई करते हैं। #F2F2F7 पर हल्की शैडो काफ़ी है।
फ़िक्स 3: काले को नरम करें, फिर एक्सेंट को गहरा करें
सफ़ेद या लगभग सफ़ेद पेज पर शुद्ध #000000 टेक्स्ट ज़रूरत से ज़्यादा कठोर है, और उसके बगल में बाकी हर रंग कमज़ोर दिखता है। Material 3 अपना लाइट टेक्स्ट एक कदम नरम रखता है।
टेक्स्ट
सेकेंडरी टेक्स्ट
डिसेबल्ड, 38 प्रतिशत
- #1D1B20 टेक्स्ट के लिए। यह Material 3 का on-surface रंग है। वायलेट की हल्की झलक वाला लगभग काला, जो सफ़ेद और ग्रे दोनों पर अच्छा बैठता है।
- #49454F सेकेंडरी टेक्स्ट के लिए, जैसे कैप्शन, हेल्पर लाइन और टाइमस्टैम्प। यह अब भी आसानी से पढ़ा जाता है, और मुख्य टेक्स्ट से साफ़ तौर पर धीमा है।
- उसी इंक का 38 प्रतिशत डिसेबल्ड लेबल और आइकन के लिए। सफ़ेद पर यह #A9A8AA बनता है, और Material ठीक यही ओपेसिटी इस्तेमाल करता है। डिसेबल्ड टेक्स्ट वह अकेली जगह है जहाँ कम कॉन्ट्रास्ट ही मक़सद है, और WCAG इसे छूट देता है।
एक्सेंट को उलटा सुधार चाहिए। चमकीला, हल्का ब्रांड रंग जो डार्क स्क्रीन पर शानदार दिखता था, सफ़ेद पर गायब हो जाता है।
सफ़ेद पर हल्का एक्सेंट
सफ़ेद पर गहरा एक्सेंट
#BB86FC डार्क थीम के लिए Material का बेसलाइन बैंगनी है। सफ़ेद पर यह लगभग ग़ायब हो जाता है, जो हर उस चीज़ के लिए समस्या है जिसे बटन या लिंक की तरह पढ़ा जाना है।
#6200EE लाइट थीम के लिए Material का बेसलाइन बैंगनी है, उसी परिवार का, इतना गहरा कि अपनी जगह बनाए रखे। लाइट थीम बनाते समय डार्क थीम का एक्सेंट दोबारा इस्तेमाल न करें। उसी ह्यू का गहरा कदम चुनें।
8 लाइट मोड रंग
कोड कॉपी करने के लिए किसी भी चिप पर टैप करें।
| भूमिका | वैल्यू | कहाँ इस्तेमाल करें |
|---|---|---|
| बेस | #F2F2F7 | पेज, कार्ड और ग्रुप्ड लिस्ट के पीछे |
| कार्ड | #FFFFFF | कार्ड, शीट, मेन्यू, पंक्तियाँ |
| डिवाइडर | #E5E5EA | पंक्तियों के बीच की रेखाएँ। इनपुट बॉर्डर के लिए नहीं |
| टेक्स्ट | #1D1B20 | शीर्षक और बॉडी |
| सेकेंडरी | #49454F | कैप्शन, हेल्पर टेक्स्ट, टाइमस्टैम्प |
| डिसेबल्ड | #A9A8AA | डिसेबल्ड लेबल और आइकन (38 प्रतिशत पर टेक्स्ट) |
| प्राइमरी | #6200EE | बटन, लिंक, चुनी हुई अवस्थाएँ |
| एरर | #B00020 | एरर टेक्स्ट, बॉर्डर और आइकन |
#E5E5EA iOS का system gray 5 है, और यह डिवाइडर के लिए चलता है क्योंकि डिवाइडर को बस नज़र आना होता है, पढ़ा नहीं जाना होता। फ़ील्ड बॉर्डर को इससे ज़्यादा चाहिए। हमारा पेपर प्लेसहोल्डर और लेबल बताता है कि उसके बदले कौन सा बॉर्डर रंग लें।
यह अपने डेवलपर को दें
वही आठ रंग CSS कस्टम प्रॉपर्टी के रूप में:
:root {
--color-base: #F2F2F7;
--color-card: #FFFFFF;
--color-divider: #E5E5EA;
--color-text: #1D1B20;
--color-text-secondary: #49454F;
--color-text-disabled: #A9A8AA;
--color-primary: #6200EE;
--color-error: #B00020;
}
body { background: var(--color-base); color: var(--color-text); }
.card { background: var(--color-card); }
.caption { color: var(--color-text-secondary); }
.card + .card { margin-top: 12px; }
hr { border: 0; border-top: 1px solid var(--color-divider); }
अगर आप डार्क थीम भी भेजते हैं, तो इनमें से हर नाम को @media (prefers-color-scheme: dark) के तहत दूसरी वैल्यू दें, जैसा डार्क मोड टोकन मैप में है। नाम वही रहते हैं और सिर्फ़ वैल्यू बदलती हैं, यही लाइट मोड को "उलटा किया हुआ डार्क मोड" बनने से रोकता है।
"आसानी से दिखता है" के पीछे के आँकड़े
पोस्ट में "आसानी से दिखता है" और "मुश्किल से दिखता है" कहा गया है। रिव्यू में अपने चुनाव का बचाव करने वाले के लिए, ये रहे आँकड़े (WCAG 2 कॉन्ट्रास्ट रेशियो, सफ़ेद पर गणना):
| जोड़ी | कॉन्ट्रास्ट | फ़ैसला |
|---|---|---|
| #FFFFFF पर #1D1B20 टेक्स्ट | 17.1 to 1 | 4.5 to 1 के न्यूनतम से कहीं ऊपर |
| #FFFFFF पर #49454F टेक्स्ट | 9.3 to 1 | सेकेंडरी टेक्स्ट के लिए आरामदायक |
| #FFFFFF पर #A9A8AA डिसेबल्ड | 2.4 to 1 | छूट प्राप्त, डिसेबल्ड को शांत ही होना है |
| #FFFFFF पर #BB86FC | 2.65 to 1 | बटन के आकार के लिए ज़रूरी 3 to 1 से कम |
| #FFFFFF पर #6200EE | 7.63 to 1 | आसानी से दिखता है |
एक और बात जानने लायक है: Material 3 की अपनी लाइट सरफ़ेस भी #FFFFFF नहीं है। वह #FEF7FF है, हल्की सी टिंट वाला सफ़ेद। जिस डिज़ाइन सिस्टम को ज़्यादातर टीमें डिफ़ॉल्ट मानती हैं, वह भी स्क्रीन को शुद्ध सफ़ेद नहीं रंगता।
FAQ
लाइट मोड के लिए सबसे अच्छा बैकग्राउंड रंग कौन सा है?
पेज के लिए #F2F2F7 जैसा नरम हल्का ग्रे, और उसके ऊपर कार्ड के लिए #FFFFFF। ग्रे सफ़ेद सतहों को उभरने के लिए कुछ देता है, इसलिए आपको कम बॉर्डर और शैडो चाहिए।
क्या #FFFFFF खराब बैकग्राउंड रंग है?
हमेशा नहीं, पर पूरी सफ़ेद स्क्रीन गहराई दिखाने का कोई तरीक़ा नहीं देती। कार्ड पेज में घुल जाते हैं, इसलिए सारा काम बॉर्डर और शैडो पर आ जाता है। सफ़ेद सबसे अच्छा सतहों के रंग के रूप में चलता है, पूरी स्क्रीन के नहीं।
#F2F2F7 क्या है?
यह लाइट मोड में iOS system gray 6 है, वही ग्रे जो Apple Settings ऐप जैसी ग्रुप्ड लिस्ट के पीछे इस्तेमाल करता है। Apple ग्रुप्ड टेबल व्यू के लिए ग्रुप्ड बैकग्राउंड रंग सुझाता है।
सफ़ेद बैकग्राउंड पर कौन सा टेक्स्ट रंग इस्तेमाल करूँ?
टेक्स्ट के लिए #1D1B20 जैसा नरम लगभग काला और सेकेंडरी टेक्स्ट के लिए #49454F। दोनों Material 3 रंग हैं और दोनों सफ़ेद तथा #F2F2F7 पर आसानी से पढ़े जाते हैं।
लाइट मोड में एलिवेशन कैसे दिखाएँ?
शैडो से। डार्क मोड में हल्की सतह का मतलब ऊँची सतह है, पर लाइट मोड में सफ़ेद से ऊपर कोई हल्का कदम नहीं है, इसलिए सतहें सफ़ेद रहती हैं और ऊँचाई के साथ शैडो बढ़ती है।
क्या लाइट और डार्क मोड के बीच एक्सेंट रंग बदलना चाहिए?
हाँ। #BB86FC जैसा हल्का एक्सेंट डार्क स्क्रीन पर चलता है पर सफ़ेद पर लगभग ग़ायब हो जाता है। लाइट सतहों पर उसी ह्यू का गहरा कदम इस्तेमाल करें, जैसे #6200EE।
स्रोत
- Apple Human Interface Guidelines, Color: #F2F2F7 लाइट मोड में systemGray6 है (R242 G242 B247), और ग्रुप्ड बैकग्राउंड रंग ग्रुप्ड टेबल व्यू के लिए हैं।
- Material 3 कलर रोल, androidx Compose के ColorLightTokens और PaletteTokens से पढ़े गए: on surface #1D1B20 (Neutral10), on surface variant #49454F (NeutralVariant30), लाइट सरफ़ेस #FEF7FF। देखें Material color roles।
- डिसेबल्ड लेबल और आइकन की 0.38 ओपेसिटी Material 3 कॉम्पोनेंट टोकन से। #FFFFFF पर 38 प्रतिशत #1D1B20, #A9A8AA बनता है।
- #BB86FC और #6200EE Material के बेसलाइन डार्क और लाइट प्राइमरी हैं। #B00020 Material का बेसलाइन लाइट एरर है। #E5E5EA लाइट मोड में iOS system gray 5 है।
- WCAG 2.2, 1.4.3 Contrast (Minimum) और 1.4.11 Non-text Contrast। रेशियो WCAG रिलेटिव ल्यूमिनेंस फ़ॉर्मूले से निकाले गए। डिसेबल्ड टेक्स्ट को न्यूनतम से छूट है।
- शैडो इंक #1B1530 और चार शैडो स्तर हमारी अपनी सिफ़ारिश हैं, किसी प्लेटफ़ॉर्म की वैल्यू नहीं।
- पहली बार UX Brainy पर कैरोसेल के रूप में प्रकाशित।
Want a light and a dark theme designed as one system, not a theme and its inversion? Our team builds product UI and design systems that hold up in both.
Get Started
