60-30-10 का नियम टूट गया: आधुनिक रंग प्रणालियाँ जो वास्तव में काम करती हैं
60-30-10 का नियम इंटीरियर डिजाइन का एक शॉर्टकट है जिसे डिजाइनर अक्सर प्रोडक्ट डिजाइन पर लागू करते रहते हैं। आइए जानते हैं कि आधुनिक रंग प्रणालियाँ इसके बजाय क्या करती हैं।
अधिकांश डिज़ाइनरों को रंग के बारे में सबसे पहले यही सिखाया जाता है, और गंभीर उत्पाद टीमें वास्तविक इंटरफ़ेस लॉन्च करते ही इसे चुपचाप छोड़ देती हैं। साठ प्रतिशत प्रमुख, तीस प्रतिशत गौण, दस प्रतिशत सहायक।
साफ़-सुथरा। उद्धृत करने योग्य। लेकिन एक बार जब किसी ब्रांड में बटन, निष्क्रिय अवस्थाएँ, सूचनाएँ, चार्ट, डार्क मोड और एक दस्तावेज़ीकरण साइट आ जाती है, तो यह पूरी तरह से अव्यवहारिक हो जाता है।
यह नियम गलत नहीं है। यह बस एक अलग समस्या के लिए बनाया गया है। सबसे सफल डिज़ाइन सिस्टम इसके बजाय अनुपात का उपयोग नहीं करते, बल्कि भूमिका-आधारित सिस्टम का उपयोग करते हैं। यह लेख बताता है कि 60-30-10 नियम क्यों विफल हो जाता है, इसकी जगह क्या आया है, और पाँच वास्तविक डिज़ाइन सिस्टम जो बड़े पैमाने पर इसे लागू कर रहे हैं।
60-30-10 नियम कहाँ से आया
60-30-10 नियम बीसवीं सदी के मध्य का इंटीरियर डेकोरेशन का एक शॉर्टकट है, जिसे डिजिटल डिज़ाइन में उन लोगों ने लागू किया जिन्हें उद्धृत करने के लिए एक नियम की आवश्यकता थी।
इसका उद्गम आवासीय डिज़ाइन से हुआ है। एक कमरे में एक प्रमुख रंग (दीवारें), एक द्वितीयक रंग (फुटपाथ, पर्दे) और एक सहायक रंग (कुशन, कलाकृति) होते हैं। साठ, तीस, दस। यह कमरों के लिए इसलिए कारगर है क्योंकि कमरे एकल स्थिर सतह होते हैं जिन्हें एक समय में एक ही व्यक्ति देखता है, और जब तक कोई उन्हें दोबारा रंग नहीं देता, उनका रंग एक जैसा ही रहता है।
उत्पाद डिज़ाइन के संदर्भ में इनमें से कोई भी धारणा सही साबित नहीं होती। एक डिजिटल उत्पाद एक स्थिर सतह नहीं है। यह सैकड़ों सतहों से मिलकर बना होता है, जिनमें से प्रत्येक की अपनी अवस्थाएँ, विषय और संदर्भ होते हैं। यह नियम उस दुनिया के लिए बनाया ही नहीं गया था और यह बात स्पष्ट रूप से दिखाई देती है।
उत्पाद डिज़ाइन में यह क्यों विफल हो जाता है
60-30-10 का नियम एक एकल स्थिर सतह और एक एकल दर्शक को मानता है, जो उत्पाद डिज़ाइन के काम करने के तरीके से बिलकुल मेल नहीं खाता।
वास्तविक इंटरफ़ेस में निष्क्रिय बटन, होवर अवस्थाएँ, फ़ोकस रिंग, त्रुटि बैनर, सफलता संदेश, चार्ट डेटा श्रृंखला, खाली अवस्थाएँ, लोडिंग स्केलेटन और विनाशकारी क्रियाओं के लिए अर्थपूर्ण रंग होते हैं। इनमें से कोई भी "कैनवास के 60, 30 या 10 प्रतिशत" से स्पष्ट रूप से मेल नहीं खाता। ये कैनवास नहीं हैं। ये व्यवहार हैं।
डार्क मोड जोड़ते ही यह नियम धराशायी हो जाता है। आपका 60 प्रतिशत हल्का तटस्थ रंग अब 60 प्रतिशत गहरा तटस्थ रंग बन जाता है, आपका 30 प्रतिशत द्वितीयक रंग पदानुक्रम बनाए रखने के लिए अपने टोन में बदलाव करता है, और आपका 10 प्रतिशत एक्सेंट रंग आमतौर पर सुलभ बने रहने के लिए चमकीला या पूरी तरह से रंग बदल देता है। यह अनुपात की समस्या नहीं है। यह एक प्रणालीगत समस्या है।
सुलभता ही अंतिम समस्या है। WCAG कंट्रास्ट अनुपात को इस बात से कोई फर्क नहीं पड़ता कि आपके पृष्ठ का कितना प्रतिशत नीला है। उन्हें इस बात से फर्क पड़ता है कि किसी विशिष्ट बटन पर मौजूद विशिष्ट नीले रंग का उसके पीछे की विशिष्ट पृष्ठभूमि के साथ पर्याप्त कंट्रास्ट है या नहीं। आप इस समस्या को वास्तविक स्थान के अनुपात से हल नहीं कर सकते।
आधुनिक रंग प्रणालियाँ इसके बजाय क्या उपयोग करती हैं
सर्वोत्तम इंटरफ़ेस को शक्ति प्रदान करने वाली प्रणालियाँ अनुपात नियमों को भूमिका-आधारित टोकन स्तरों से बदल देती हैं, जो यह वर्णन करते हैं कि कोई रंग क्या करता है, न कि उसकी मात्रा कितनी है।
| स्तर | कार्य | टोकन के उदाहरण |
|------|--------------|---------------------|
| सतह | पृष्ठभूमि परतें और ऊँचाई | bg-default, bg-subtle, bg-raised, bg-overlay |
| सामग्री | सतहों पर पाठ और आइकन | text-default, text-muted, text-on-accent |
| उच्चारण | ब्रांड और प्राथमिक क्रिया रंग | accent-primary, accent-primary-hover, accent-secondary |
स्टेट | इंटरैक्टिव और फीडबैक स्टेट्स | state-hover, state-focus, state-disabled |
| सिमेंटिक | अर्थपूर्ण संकेत | success, warning, critical, info |
प्रत्येक टोकन एक भूमिका का वर्णन करता है। "यह रंग कार्ड के पीछे की सतह है।" "यह रंग एक्सेंट के ऊपर का टेक्स्ट है।"
डिजाइनर कभी भी "सेकेंडरी या एक्सेंट 30 प्रतिशत" में से किसी एक को नहीं चुनता। वे उन भूमिकाओं में से चुनते हैं जिन्हें सिस्टम पहले से ही परिभाषित करता है।
लाभ कई गुना बढ़ जाते हैं। डार्क मोड जोड़ना इंटरफ़ेस को फिर से रंगने की बजाय, समान टोकन को अलग-अलग रॉ वैल्यू में मैप करने का मामला बन जाता है। एक नया ब्रांड थीम जोड़ना एक्सेंट टियर पर केवल एक टोकन स्वैप करने जितना आसान हो जाता है। एक्सेसिबिलिटी को टोकन स्तर पर लागू किया जाता है, न कि पृष्ठ दर पृष्ठ जाँच की जाती है।
सही तरीके से काम करने वाले पाँच डिज़ाइन सिस्टम
ये सिस्टम रोल-आधारित पैलेट के साथ बड़े पैमाने पर उपलब्ध हैं जो लाइट मोड, डार्क मोड और उपयोगकर्ता द्वारा स्पर्श की जाने वाली प्रत्येक सतह पर काम करते हैं।
मटेरियल डिज़ाइन 3
इसे m3.material.io पर लाइव देखें
मटेरियल 3 इस बदलाव को सबसे स्पष्ट रूप से दर्शाता है। सिस्टम "प्राइमरी," "ऑन-प्राइमरी," "सरफेस," "ऑन-सरफेस," "इनवर्स-प्राइमरी" जैसी रंग भूमिकाओं को परिभाषित करता है, जिसमें प्रत्येक भूमिका कंट्रास्ट के लिए पहले से ही निर्धारित होती है। डिज़ाइनर रंग नहीं चुनते। वे भूमिकाएँ चुनते हैं, और टोकन सक्रिय थीम के लिए सही मानों में परिवर्तित हो जाते हैं।
क्या अपनाना चाहिए: "ऑन-" नामकरण पद्धति। on-primary प्राथमिक सतह के ऊपर स्थित टेक्स्ट/आइकन के लिए एक्सेसिबिलिटी को सीधे टोकन नाम में एन्कोड करता है।
क्या अपनाना चाहिए: ### रेडिक्स कलर्स
इसे radix-ui.com पर लाइव देखें
रेडिक्स कलर्स प्रत्येक रंग के लिए 12-चरणीय स्केल प्रदान करता है, जिसमें प्रत्येक चरण को एक भूमिका (ऐप बैकग्राउंड, सूक्ष्म बैकग्राउंड, UI तत्व, होवर, फोकस, सक्रिय, ठोस, टेक्स्ट, उच्च-कंट्रास्ट टेक्स्ट) सौंपी गई है। इसमें अनुपात का कोई तर्क नहीं है। प्रत्येक चरण एक भूमिका है।
क्या उपयोगी है: भूमिका एनोटेशन के साथ क्रमांकित स्केल। यह डिज़ाइनरों को एक साझा शब्दावली प्रदान करता है जिससे "कौन सा ग्रे रंग उपयोग करूं" जैसी 90% बहस समाप्त हो जाती है।
शॉपिफाई पोलारिस
इसे polaris.shopify.com पर लाइव देखें।
पोलारिस रंग को घटक भूमिका के अनुसार व्यवस्थित करता है: बैकग्राउंड (सतह), टेक्स्ट (सामग्री), आइकन, बॉर्डर और इंटरैक्टिव। प्रत्येक में होवर, प्रेस्ड, डिसेबल्ड, सिलेक्टेड के लिए उप-भूमिकाएँ हैं। यह प्रणाली डिज़ाइनर के लिए परिभाषित टोकन से बाहर जाना संरचनात्मक रूप से कठिन बना देती है।
क्या उपयोगी है: भूमिका समूहीकरण। "बॉर्डर" टोकन को "सरफेस" टोकन से अलग करने से कंपोनेंट स्तर पर जानबूझकर रंगों का उपयोग करना अनिवार्य हो जाता है।
दो ब्रांड जो इसे प्रोडक्शन में इस्तेमाल कर रहे हैं
ऊपर दिए गए डिज़ाइन सिस्टम दस्तावेज़ संदर्भ हैं। ये दो ब्रांड इसका प्रमाण हैं। Stripe और Linear उत्पाद स्तर पर प्रतिदिन भूमिका-आधारित रंग का उपयोग करते हैं, और दोनों यह साबित करते हैं कि यह पैटर्न वास्तविक उपयोग में भी कारगर है।
Stripe
Stripe एक निर्मित ब्रांड प्रस्तुत करता है, न कि केवल एक डिज़ाइन सिस्टम दस्तावेज़। सार्वजनिक साइट दिखाती है कि प्रोडक्शन में भूमिका-आधारित रंग कैसा दिखता है।
लगभग सभी सतहें और सामग्री तटस्थ हैं। बैंगनी रंग एक्सेंट स्तर है और यह ठीक वहीं दिखाई देता है जहां क्रियाएं, लिंक और ब्रांड संकेत मौजूद होते हैं। कोई अनुपात तर्क नहीं। केवल भूमिका तर्क।
क्या सीखनी चाहिए: एक्सेंट टियर को सीमित रखने का अनुशासन। Stripe के एक्सेंट रंग का उपयोग संयम से किया जाता है क्योंकि इसकी भूमिका आरक्षित है। यदि आप सजावट के लिए एक्सेंट रंगों का उपयोग करते हैं, तो आप उन्हें क्रियात्मक उपयोग के लिए इस्तेमाल करने की क्षमता खो देते हैं।
Linear
Linear बड़े पैमाने पर उत्पाद बेचने वाले लगभग सभी ब्रांडों की तुलना में न्यूट्रल रंगों पर अधिक निर्भर करता है। पूरा उत्पाद गहरे रंग के सरफेस टोकन की परतों से बना है, जिसमें एक ही एक्सेंट रंग (बैंगनी) क्रियात्मक कार्य करता है। कोई भी अनुपात नियम इसे संभव नहीं बना सकता। यह एक विशुद्ध भूमिका-आधारित प्रणाली है जहाँ "एक्सेंट" टियर एक संयमित रूप से उपयोग किया जाने वाला रंग है, और "सरफेस" टियर एक पूर्ण एलिवेशन स्टैक है।
क्या सीखनी चाहिए: एक्सेंट टियर को एक ही रंग रखने का आत्मविश्वास। कई नई डिज़ाइन प्रणालियाँ एक्सेंट रंगों का अत्यधिक उपयोग करती हैं। Linear यह साबित करता है कि एक सुविचारित एक्सेंट, जिसका लगातार उपयोग किया जाए, तीन एक्सेंट के अनुपात से कहीं अधिक मजबूत पहचान बनाता है।
भूमिका-आधारित पैलेट कैसे बनाएं
इस तरह से पैलेट बनाने में तीन रंग चुनने और प्रतिशत निर्धारित करने की तुलना में अधिक समय लगता है, और जब कोई डिज़ाइनर पहली बार डार्क मोड जोड़ता है तो यह प्रक्रिया अपने आप ही फायदेमंद साबित होती है।
यह प्रक्रिया अधिकांश डिज़ाइनरों द्वारा सीखे गए तरीके के विपरीत है। पहले रंग चुनने और उनके लिए भूमिकाएँ खोजने के बजाय, आप पहले भूमिकाएँ चुनते हैं और फिर उनके लिए रंग खोजते हैं।
-
भूमिका स्तर परिभाषित करें। सतह, विषयवस्तु, एक्सेंट, स्थिति, अर्थपरक से शुरू करें। अधिकांश उत्पादों को ठीक इन्हीं पाँचों की आवश्यकता होती है। कुछ को डेटा विज़ुअलाइज़ेशन के लिए छठे की आवश्यकता होती है।
-
हेक्स मान चुनने से पहले टोकन लिखें। प्रत्येक टोकन एक भूमिका का वर्णन करना चाहिए (
surface-subtle,content-muted,accent-primary-hover)। यदि किसी टोकन का नाम किसी रंग का वर्णन करता है ("हल्का नीला"), तो उसका नाम बदलें। -
पहले न्यूट्रल स्केल भरें। एक वास्तविक इंटरफ़ेस का अधिकांश भाग न्यूट्रल रंगों से बना होता है। ब्रांड रंग को छूने से पहले एक पूर्ण स्केल बनाएं (रेडिक्स 12 चरणों का उपयोग एक कारण से करता है)।
-
एक्सेंट टियर को सबसे अंत में जोड़ें। एक्सेंट रंग आमतौर पर एकमात्र ऐसा स्थान होता है जहां ब्रांड पहचान सक्रिय रूप से मौजूद होता है। यहां संयम बरतना ही सफलता की कुंजी है।
-
डार्क मोड को टोकन को पुनः हल करके मैप करें, न कि रीडिज़ाइन करके। यदि आपका सिस्टम भूमिका-आधारित है, तो डार्क मोड टोकन मानों का अदला-बदली है, न कि रंग का पूर्ण परिवर्तन।
-
टोकन स्तर पर अभिगम्यता सुनिश्चित करें। प्रत्येक
on-surfaceटोकन को अपनी युग्मित सतह के विरुद्ध 4.5:1 अनुपात पास करना चाहिए। जांच को सिस्टम में शामिल करें।
आसान तरीका यह है कि तीन भूमिकाएँ (प्राथमिक, द्वितीयक, एक्सेंट) परिभाषित करें, जीत की घोषणा करें और काम शुरू कर दें। यह टोकन के आवरण में लिपटा हुआ 60-30-10 नियम है। यह ठीक उसी बिंदु पर विफल हो जाता है: पहला वास्तविक घटक।
इस टोकन कार्य से पहले उपयोगकर्ताओं के लिए रंग संबंधी निर्णय किस प्रकार समझे जाते हैं, इस व्यापक परिप्रेक्ष्य के लिए डिजाइन में रंग मनोविज्ञान अर्थ परत को कवर करता है। रंग प्रणालियाँ व्यापक सिस्टम संदर्भ में कैसे फिट होती हैं, इसके लिए डिजाइन सिस्टम गाइड पूर्ण चित्र प्रस्तुत करता है।
अक्सर पूछे जाने वाले प्रश्न
क्या 60-30-10 नियम कभी उपयोगी होता है?
हाँ। एकल-सतह डिज़ाइन अभी भी इससे लाभान्वित होता है। पोस्टर, सोशल मीडिया पोस्ट, मार्केटिंग हीरो सेक्शन, पैकेजिंग, संपादकीय पृष्ठ। जहां भी डिलीवरेबल एक ही कैनवास होता है जिसे एक बार देखा जाता है, वहां यह नियम अनुपात का त्वरित शॉर्टकट प्रदान करता है। उत्पाद डिज़ाइन वह क्षेत्र नहीं है।
एक डिज़ाइन सिस्टम में कितने रंग होने चाहिए?
आप जितना सोचते हैं उससे कम हेक्स वैल्यू, लेकिन आपकी सोच से कहीं अधिक टोकन में व्यवस्थित। अधिकांश शिपिंग सिस्टम में 8 से 12 न्यूट्रल स्टेप, 8 से 12 एक्सेंट स्टेप और 3 से 5 सिमेंटिक फ़ैमिली होती हैं, जो सभी भूमिका-आधारित टोकन में विभाजित होती हैं। रंगों की संख्या कम होती है। भूमिकाओं की संख्या अधिक होती है।
कलर पैलेट और कलर सिस्टम में क्या अंतर है?
रंगो की पटिया रंगों का एक सेट है। एक कलर सिस्टम भूमिकाओं का एक सेट है, उन भूमिकाओं के परस्पर क्रिया करने के नियमों का एक सेट है, और भूमिकाओं से रंगों का एक मैपिंग है जो थीम के अनुसार बदल सकता है। एक पैलेट यह बताता है कि "ब्रांड में कौन से रंग हैं।" एक सिस्टम यह बताता है कि "इस थीम में इस स्थिति में इस तत्व का रंग क्या है।"
रंगों को प्रतिशत में मापना बंद करें
60-30-10 का नियम गलत नहीं है। यह बस अब प्रासंगिक नहीं है।
उत्पाद डिज़ाइन कोई कमरा नहीं है। यह सतहों, स्थितियों और भूमिकाओं की एक प्रणाली है जो उपयोगकर्ता के उपयोग के साथ बदलती रहती है।
रंगों को प्रतिशत में मापना उतना ही बेतुका है जितना कि टाइपोग्राफी को पृष्ठ के प्रतिशत में मापना। आप यह नहीं कहते कि "30 प्रतिशत टेक्स्ट हेडिंग है।" आप कहते हैं कि "हेडिंग एक भूमिका है जिसकी एक निश्चित शैली है।" रंग को भी इसी तरह काम करना चाहिए।
सर्वश्रेष्ठ स्केलिंग वाले विज़ुअल पहचान उत्पाद पेश करने वाले ब्रांड, जैसे Material, Radix, Polaris, Stripe, Linear, ने इस बात को समझा और इसी के आधार पर अपना उत्पाद तैयार किया। उनके प्रतिशत को कॉपी करना गलत है। उनकी भूमिका संरचना को कॉपी करना ही असली बात है।
यदि आपका वर्तमान पैलेट तीन रंगों और एक अस्पष्ट आवंटन नियम पर आधारित है, तो आपके पास कोई रंग प्रणाली नहीं है। आपके पास केवल रंगों के प्रति एक विशेष पसंद है। स्तर निर्धारित करें, भूमिकाओं का नामकरण करें, और हेक्साडेसिमल मानों पर बहस करना सबसे आखिरी बात होगी।
Need a color system built to scale, not just to swatch? Brainy builds palettes with token tiers, dark mode, and accessibility baked in.
Get Started
