एक ऐसा ब्रांड कलर पैलेट कैसे बनाएं जो वास्तव में कारगर हो
एक पेशेवर डिज़ाइनर के लिए ब्रांड कलर पैलेट बनाने की गाइड जो डार्क मोड, डिसेबल्ड स्टेट्स और लोगो के अलावा हर सतह पर टिकाऊ रहे। इसमें पाँच वास्तविक ब्रांड शामिल हैं।
अधिकांश ब्रांड कलर पैलेट लोगो पिच के लिए बनाए जाते हैं, और जब तक किसी असली बटन को डिसेबल करने की आवश्यकता नहीं होती, तब तक वे काफी हद तक ठीक-ठाक ही रहते हैं।
एक कारगर ब्रांड कलर पैलेट सिर्फ पांच रंग नहीं होते। यह एक स्तरित प्रणाली है: एक एंकर, एक वास्तविक न्यूट्रल स्केल, सिमेंटिक रंग, स्टेट कलर और एक डार्क मोड प्लान जो Figma खोलने से पहले ही मौजूद होता है। यह लेख इन स्तरों की व्याख्या करता है, पांच ब्रांडों को सही तरीके से लागू करते हुए दिखाता है, और निर्माण क्रम के साथ समाप्त होता है।
अधिकांश ब्रांड कलर पैलेट विफल क्यों होते हैं
अधिकांश ब्रांड कलर पैलेट इसलिए विफल नहीं होते क्योंकि रंग गलत होते हैं, बल्कि इसलिए विफल होते हैं क्योंकि वे किसी शिपिंग सिस्टम के बजाय लोगो पिच के लिए बनाए गए होते हैं।
सामान्य प्रक्रिया इस प्रकार है: एक डिज़ाइनर मूडबोर्ड बनाता है, ब्रीफ के अनुरूप पांच रंग चुनता है, उन्हें प्राथमिक, द्वितीयक, एक्सेंट, हल्का, गहरा नाम देता है, और पैलेट को उत्पाद, साइट, दस्तावेज़ और कैंपेन को शिप करने वाली टीमों को सौंप देता है। जब ये पांच रंग चुने गए थे, तब इनमें से कोई भी टीम मौजूद नहीं थी।
"सेकेंडरी" रंग में कोई उपयोगी मध्य रेंज नहीं है। "प्राइमरी" रंग बॉडी टेक्स्ट के लिए बहुत अधिक संतृप्त है। किसी ने भी तटस्थ ग्रे रंग नहीं चुना, इसलिए डिज़ाइनर ने खुद एक बना लिया।
डार्क मोड टीम ने हार मान ली और CSS फ़िल्टर के ज़रिए सब कुछ उलट दिया। पैलेट ने पिच के लिए तो अपना काम कर दिया, लेकिन असल काम में नाकाम रहा।
एक कारगर पैलेट की पाँच परतें
एक पैलेट जो असल ब्रांड के काम में टिकता है, उसमें पाँच परतें होती हैं, पाँच रंग नहीं। बड़े पैमाने पर ब्रांड सिस्टम शिप करने वाले डिज़ाइनर इस बात पर बहस करते हैं कि कौन सा रंग किस परत में आता है, न कि इस बात पर कि हरे रंग का कौन सा शेड "हमारे लिए ज़्यादा उपयुक्त" है।
| परत | इसका कार्य | सामान्य संख्या |
|-------|--------------|----------------|
| एंकर | ब्रांड पहचान | 1 (शायद 1 सपोर्ट) |
न्यूट्रल | सतहें, टेक्स्ट, बॉर्डर, बैकग्राउंड | 9-12 चरण |
सिमेंटिक | सफलता, चेतावनी, गंभीर, जानकारी | 3-5 रंग समूह |
स्टेट | होवर, फोकस, प्रेस्ड, डिसेबल्ड | हर इंटरेक्टिव रंग के साथ युग्मित |
डार्क | हर लेयर का डार्क-मोड रिज़ॉल्यूशन | पूर्ण समानांतर सेट |
ध्यान दें कि इस सूची में क्या नहीं है। कोई "सेकेंडरी ब्रांड कलर", कोई "टर्शियरी" या कोई "एक्सेंट 2" नहीं है। ज़्यादातर ब्रांड जिन्हें लगता है कि उन्हें दूसरे ब्रांड कलर की ज़रूरत है, उन्हें असल में एक व्यापक न्यूट्रल स्केल या एक बोल्ड एंकर कलर की ज़रूरत होती है।
फ्लैटनिंग एक बग है। लेयर्स इसकी खासियत हैं।
एंकर कलर को पहले और आखिर में चुनें
एंकर वह रंग है जो हर सतह पर ब्रांड की पहचान को दर्शाता है, और इसे दो बार चुना जाता है: एक बार शुरुआत में, और एक बार यह जानने के बाद कि इसे किसके साथ इस्तेमाल करना है।
पहला चुनाव दिशात्मक होता है। एंकर वह रंग होना चाहिए जो वर्डमार्क हटा दिए जाने पर भी ब्रांड की पहचान को दर्शाता रहे। रंग का चुनाव एक भावनात्मक जुड़ाव भी है, और यहीं पर रंग मनोविज्ञान हेक्स को अंतिम रूप देने से पहले ही आधा काम तय कर देता है। उदाहरण के लिए, Stripe बैंगनी, Linear बैंगनी, Figma नीला, Notion काला, Slack मैजेंटा। एक ही रंग पहचान का काम कर देता है।
दूसरा महत्वपूर्ण पहलू तकनीकी है। न्यूट्रल स्केल बन जाने के बाद, एंकर में लगभग हमेशा थोड़ा बदलाव करना पड़ता है। इसे उस न्यूट्रल रंग के साथ कंट्रास्ट में फिट होना चाहिए जिस पर यह स्थित है, इसके लिए एक ट्यून्ड डार्क-मोड सिबलिंग की आवश्यकता होती है, और होवर और प्रेस करने पर दिखने वाले रंग धुंधले नहीं होने चाहिए। वास्तविक ब्रांड सिस्टम में 5-9 एंकर स्टेप होते हैं, न कि केवल एक अंतिम हेक्स।
तटस्थ रंग ही पैलेट बनाते हैं
किसी भी इंटरफ़ेस का अधिकांश भाग तटस्थ रंगों से बना होता है, और जिस ब्रांड के पास सही तटस्थ रंग पैमाना नहीं होता, उसके पास कोई पैलेट नहीं होता, बल्कि एक मूड बोर्ड होता है।
सही तटस्थ रंग पैमाना लगभग सफेद से लगभग काले रंग तक 9 से 12 चरणों का होता है, जिसे इसके आस-पास के एंकर रंग के अनुसार समायोजित किया जाता है। शुद्ध धूसर रंग अक्सर गर्म एंकर रंग के साथ फीके और नीले एंकर रंग के साथ बहुत ठंडे लगते हैं।
तटस्थ रंग पैमाना ही वह आधार है जहाँ सुलभ रंग कंट्रास्ट रंगों को डिज़ाइन में शामिल या बाहर किया जाता है। प्रत्येक सतह चरण में एक टेक्स्ट चरण और एक बॉर्डर चरण होता है जो कंट्रास्ट को मापता है। प्रत्येक चरण की एक भूमिका होती है: पृष्ठभूमि, सूक्ष्म पृष्ठभूमि, सतह, उभरी हुई सतह, ओवरले, विभाजक, बॉर्डर, म्यूटेड टेक्स्ट, डिफ़ॉल्ट टेक्स्ट, स्ट्रॉन्ग टेक्स्ट।
सबसे मजबूत तटस्थ रंगों का उपयोग करने वाले ब्रांड तटस्थ रंगों को पैलेट का मुख्य रंग मानते हैं, न कि केवल भरने वाला। एंकर रंग झंडा है। तटस्थ रंग पूरा देश हैं।
तीन ब्रांड जो एंकर डिसिप्लिन में माहिर हैं
ये तीनों ब्रांड गहरे तटस्थ रंग के साथ एक संयमित एंकर का उपयोग करते हैं, और एंकर आसानी से पहचाना जा सकता है क्योंकि यह कभी भी बहुत अधिक फैला हुआ नहीं होता।
Notion
इसे notion.com/product पर लाइव देखें
Notion न्यूनतमवाद का चरम उदाहरण है। लगभग पूरी कार्य सतह हल्के सफेद रंग की है जिस पर काले रंग का टेक्स्ट है। मार्केटिंग बैंड गहरे नीले रंग का है, और सिमेंटिक टियर दृश्य रंगों का काम करता है: लाल, नारंगी, नीला, हरा कार्य स्थितियों के लिए।
क्या सीखें: एक एंकर चुनें, फिर पूछें कि क्या ब्रांड को दूसरे एंकर की आवश्यकता है। इसका सीधा जवाब आमतौर पर 'नहीं' होता है।
क्या सीखें: ### Linear
Linear इस श्रेणी में सबसे स्पष्ट और विशिष्ट डार्क-फर्स्ट पैलेट का उपयोग करता है। इसका एंकर रंग एक बैंगनी है। न्यूट्रल रंग डार्क-मोड के सभी शेड्स (सरफेस, सबटल सरफेस, रेज़्ड सरफेस, ओवरले) का उपयोग करते हैं, जो अलग-अलग काम करते हैं।
सीखने लायक बात: यदि उत्पाद डार्क मोड में उपलब्ध है, तो डार्क पैलेट को लाइट पैलेट की तरह ही सावधानी से बनाएं, न कि सिर्फ एक फिल्टर की तरह।
Stripe
इसे stripe.com/payments पर लाइव देखें
Stripe SaaS में सबसे साफ-सुथरा एंकर-टियर डिसिप्लिन अपनाता है। बैंगनी रंग की झलक CTA, इनलाइन लिंक, इलस्ट्रेशन और ब्रांड मोमेंट्स में दिखाई देती है, और लगभग कहीं और नहीं। जब बैंगनी रंग दिखाई देता है, तो आंखें इसे सजावट के रूप में नहीं, बल्कि एक क्रिया के रूप में देखती हैं।
क्या सीखें: एंकर जितना संयमित होगा, ब्रांड उतना ही अधिक पहचाने जाने योग्य होगा। ढीले-ढाले एंकर शोर की तरह लगते हैं।
दो ब्रांड जहां न्यूट्रल रंग ही सब कुछ हैं
ये दो ब्रांड दिखाते हैं कि क्या होता है जब न्यूट्रल स्केल ही ब्रांड को आगे बढ़ाता है और एंकर या तो मोनोक्रोम होता है या उसे अलग-अलग भूमिकाओं में ढाल दिया जाता है।
सुपाबेस
इसे supabase.com पर लाइव देखें
सुपाबेस अपने डेवलपर टूल्स में सबसे अनुशासित, एक-एक्सेंट पैलेट का उपयोग करता है। सतह लगभग मोनोक्रोम गहरे न्यूट्रल रंगों की है। एंकर एक पन्ना हरा रंग है, और यह केवल ब्रांड तत्वों, CTA और सफलता की स्थिति में दिखाई देता है। किसी अन्य ब्रांड रंग को कभी आमंत्रित नहीं किया जाता है। न्यूट्रल स्केल ही ब्रांड है। हरा रंग क्रिया है।
क्या सीखें: यदि न्यूट्रल सिस्टम पर्याप्त रूप से अनुशासित है, तो एक ब्रांड शोरगुल वाले एंकर को पूरी तरह से छोड़ सकता है। कुछ ब्रांडों को सिग्नेचर कलर नहीं, बल्कि सिग्नेचर ग्रेस्केल की आवश्यकता होती है।
Shopify
इसे polaris.shopify.com पर लाइव देखें।
Shopify का पोलारिस सिस्टम दिखाता है कि पूरी तरह से टोकनाइज्ड ब्रांड पैलेट कैसा दिखता है। पैलेट को एक रोल-टोकन ट्री के रूप में प्रस्तुत किया गया है: सरफेस, टेक्स्ट, आइकन, बॉर्डर, इंटरेक्टिव, क्रिटिकल, कॉशन, सक्सेस, इन्फो, प्रत्येक रोल में लाइट और डार्क वैल्यू होती हैं। पोलारिस डिज़ाइनर को परिभाषित टोकन से आगे बढ़ने की कोई गुंजाइश नहीं छोड़ता। पैलेट कोई वाइब नहीं है, यह एक कॉन्ट्रैक्ट है।
क्या सीखें: टोकन को पहले रोल के रूप में लिखें और हेक्स में केवल अंतिम चरण में ही बदलें। यदि टोकन का नाम किसी रोल के बजाय रंग का वर्णन करता है, तो पैलेट में बदलाव आ सकता है।
6-चरण निर्माण क्रम
पैलेट को इस क्रम में बनाएं और अधिकांश सामान्य गलतियाँ होने से बच जाएंगी।
-
रंगों की सूची से पहले भूमिकाओं की सूची लिखें। एंकर, तटस्थ सतहें, तटस्थ पाठ, तटस्थ बॉर्डर, सिमेंटिक सफलता, सिमेंटिक चेतावनी, सिमेंटिक गंभीर, सिमेंटिक जानकारी, स्टेट होवर, स्टेट फोकस, स्टेट डिसेबल्ड। इसे पहले कागज पर लिखें।
-
अंतिम हेक्सागोनल आयाम नहीं, बल्कि एंकर की दिशा चुनें। एक ह्यू, अनुमानित लाइटनेस लक्ष्य, अनुमानित सैचुरेशन लक्ष्य। इसे संपादन योग्य रखें।
-
इसके बाद उस एंकर के अनुरूप तटस्थ स्केल बनाएं। 9 से 12 चरण। प्रत्येक चरण का दूसरे चरण से परीक्षण करें। ठंडे एंकर के लिए ठंडे तटस्थ रंग, गर्म एंकर के लिए गर्म तटस्थ रंग।
-
सिमेंटिक रंगों को अलग-अलग नहीं, बल्कि एक समूह के रूप में जोड़ें। सफलता, चेतावनी, गंभीर, जानकारी। ये रंग आपस में जुड़े हुए प्रतीत होने चाहिए। बाद में जोड़ा गया अकेला हरा रंग लगभग हमेशा उस पैलेट के साथ बेमेल लगता है जिसके साथ इसे नहीं बनाया गया था।
-
स्टेट रंगों को नए रंग बनाने के बजाय, युग्मन द्वारा परिभाषित करें। होवर आमतौर पर स्केल पर एक या दो चरण का बदलाव होता है। फोकस आमतौर पर एंकर ह्यू में एक आउटलाइन वाला रिंग होता है। डिसेबल्ड आमतौर पर एक विशिष्ट न्यूट्रल चरण होता है।
-
एंकर के अंतिम हेक्स को सबसे अंत में कमिट करें। जिस न्यूट्रल पर यह स्थित है, उसके साथ कंट्रास्ट जांच करें। डार्क-मोड सिबलिंग को ट्यून करें। होवर और प्रेस्ड चरण जोड़ें। अब एंकर एक कमिटेड वैल्यू बन जाता है।
क्रम क्यों महत्वपूर्ण है
प्रत्येक परत अगली परत को सीमित करती है, और चरणों को उल्टा चलाने से पैलेट में ऐसे रंग आ जाते हैं जो आपस में मेल नहीं खाते।
एंकर को अंत में चुनना, उस तटस्थ पैमाने की पूरी जानकारी के साथ होता है जिस पर उसे आधारित होना है। इसे पहले चुनने पर, हर तटस्थ रंग का चुनाव इंटरफ़ेस बनने से पहले ही तय किए गए रंग के साथ समझौता बन जाता है।
इस लेयरिंग के पीछे के सिद्धांत के लिए, डिजाइनरों के लिए रंग सिद्धांत स्तंभ पूरे स्टैक को कवर करता है। तटस्थ-प्लस-एंकर युग्मों के पीछे के कंट्रास्ट नियमों के लिए, सुलभ रंग कंट्रास्ट विशिष्टताओं को संभालता है। डिज़ाइन सिस्टम के भीतर पैलेट के लिए, डिजाइन सिस्टम गाइड व्यापक परिप्रेक्ष्य प्रस्तुत करता है।
--
तीन गलतियाँ जो अधिकांश पैलेट को बर्बाद कर देती हैं
लगभग हर असफल ब्रांड कलर पैलेट में वही तीन गलतियाँ दिखाई देती हैं, और ये तीनों गलतियाँ भूमिकाएँ चुनने से पहले हेक्स चुनने से होती हैं।
लोगो-स्वॉच की गलती। पाँच पैलेट रंग क्योंकि लोगो में पाँच रंग हैं। आगे किसी भी चीज़ के लिए पाँच रंगों की आवश्यकता नहीं थी। कोई तटस्थ रंग नहीं, कोई अर्थपूर्ण स्तर नहीं, कोई डार्क मोड योजना नहीं। विफलता का सबसे आम तरीका।
संतृप्ति का जाल। हर रंग एक ही संतृप्ति पर, आमतौर पर उच्च। मूडबोर्ड में तो यह रंग जीवंत दिखता है, लेकिन असल इंटरफ़ेस में थका देने वाला लगता है। अच्छे पैलेट संतृप्ति को व्यापक रूप से बदलते हैं, और 60-30-10 नियम जैसे अनुपात नियम सबसे चटख रंगों को फ्रेम पर हावी होने से रोकते हैं।
मध्यम स्तर की कमी। एक हल्का तटस्थ रंग, एक गहरा तटस्थ रंग, इनके बीच कुछ नहीं। असल इंटरफ़ेस रंग पैमाने के मध्य में होते हैं। केवल दो तटस्थ रंगों वाला पैलेट, एंकर रंग कितना भी अच्छा क्यों न हो, फीका लगता है।
प्रक्रिया को सुधारें और गलतियाँ दिखना बंद हो जाएँगी।
अक्सर पूछे जाने वाले प्रश्न
ब्रांड कलर पैलेट में कितने रंग होने चाहिए?
जितने एंकर रंग आप सोचते हैं उससे कम, जितने तटस्थ रंग आप सोचते हैं उससे ज़्यादा। ज़्यादातर सफल ब्रांडों में 1 एंकर रंग, 9-12 तटस्थ रंग, 3-5 अर्थपूर्ण रंग परिवार, युग्मित राज्य रंग और एक समानांतर डार्क-मोड सेट होता है। रंगों की संख्या कम होती है। रंगों की संख्या ज़्यादा होती है।
क्या मुझे डार्क मोड के लिए एक अलग पैलेट की आवश्यकता है?
अलग पैलेट की आवश्यकता नहीं है। उसी पैलेट का एक समानांतर संस्करण। भूमिकाएँ एक जैसी ही रहती हैं, केवल थीम के अनुसार मूल हेक्स मान बदलते हैं। यदि कोई डिज़ाइनर डार्क मोड को शुरू से मैन्युअल रूप से फिर से बना रहा है, तो पैलेट को एक सिस्टम के रूप में नहीं बनाया गया था।
क्या मैं ब्रांड पैलेट बनाने के लिए पैलेट जनरेटर का उपयोग कर सकता हूँ?
एक जनरेटर एंकर और एक मोटा-मोटा न्यूट्रल दिशा-निर्देश दे सकता है। यह सिस्टम नहीं बना सकता। इस लेख में दिए गए प्रत्येक पैलेट को मैन्युअल रूप से तैयार किया गया है: एंकर के अनुरूप न्यूट्रल को गर्म या ठंडा किया गया है, सिमेंटिक फ़ैमिली को समायोजित किया गया है, डार्क-मोड मानों को कस्टम रूप से ट्यून किया गया है, और स्टेट रंगों को चरणबद्ध तरीके से जोड़ा गया है।
सिस्टम बनाएँ, स्वैच नहीं
एक ब्रांड कलर पैलेट मूडबोर्ड पर पाँच रंग नहीं होते। यह भूमिकाओं, एक न्यूट्रल स्केल, सिमेंटिक सिग्नल, स्टेट रंगों और एक डार्क-मोड प्लान के साथ एक स्तरित सिस्टम है, जिसे एक विशिष्ट क्रम में बनाया गया है।
Notion, Linear, Stripe, Supabase और Shopify स्वैच के मामले में सफल नहीं हुए। उन्होंने पैलेट को बुनियादी ढांचे के रूप में इस्तेमाल करके जीत हासिल की: एक आधार, एक पूर्ण तटस्थ पैमाना, एक अर्थपूर्ण स्तर, एक युग्मित अवस्था स्तर, और पहले दिन से ही डिज़ाइन किया गया डार्क मोड।
स्तरों का निर्माण करें, 6-चरण क्रम का पालन करें, और ब्रांड के रंगों को ऐसे चुनना बंद करें जैसे आप कोई कमरा सजा रहे हों।
Want a brand color palette built for everything past the logo? Brainy builds palettes with a real neutral scale, dark mode, and semantic tokens baked in.
Get Started
