कलर पैलेट जनरेटर

कलर पैलेट जनरेटर का उपयोग कैसे करें

1. एक बेस रंग सेट करें — रंग बॉक्स से चुनें, हेक्स कोड टाइप करें, या किसी यादृच्छिक शुरुआती बिंदु के लिए शफ़ल दबाएँ।
2. एक हार्मनी चुनें — शांति के लिए एनालॉगस, दमदार कंट्रास्ट के लिए कॉम्प्लिमेंट्री, विविधता के लिए ट्रायडिक या टेट्राडिक, एकल-ह्यू स्कीम के लिए मोनोक्रोमैटिक, या खोजने के लिए ऑटो।
3. लॉक और शफ़ल — जिन स्वैच को रखना है उन पर लॉक क्लिक करें, फिर बाकी को ही दोबारा बनाने के लिए स्पेस या शफ़ल दबाएँ।
4. कॉपी या एक्सपोर्ट करें — हेक्स कॉपी करने के लिए किसी स्वैच पर क्लिक करें, विविधताओं के लिए टिंट और शेड लें, या पूरे पैलेट को CSS वेरिएबल, JSON या हेक्स सूची के रूप में एक्सपोर्ट करें।

कलर हार्मनी की व्याख्या

इससे आप क्या बना सकते हैं

• वेबसाइट या ऐप थीम — एक प्राथमिक रंग, कुछ एक्सेंट और सतहों व बॉर्डर के लिए न्यूट्रल टिंट/शेड।
• एक ब्रांड कलर सिस्टम — अपना ब्रांड रंग लॉक करें, फिर सामंजस्यपूर्ण द्वितीयक रंग खोजें।
• स्लाइड और इन्फोग्राफिक्स — चार्ट और सेक्शन के लिए अलग-अलग रंगों का एक सुसंगत सेट।
• डिज़ाइन टोकन — सीधे अपने कोड या डिज़ाइन सिस्टम में JSON या CSS वेरिएबल के रूप में एक्सपोर्ट करें।
• चित्रण और कला — किसी स्कीम पर तय करने से पहले हार्मनी को तेज़ी से खोजें।

कलर व्हील का संक्षिप्त इतिहास

इस जनरेटर की हर हार्मनी एक ही विचार से जुड़ी है: कि रंगों को एक वृत्त में इस तरह व्यवस्थित किया जा सकता है कि उनके आपसी संबंध दिखने लगें। यह विचार जितना आप सोचते हैं उससे नया है। 1704 में, आइज़क न्यूटन ने Opticks प्रकाशित की, जिसमें उन्होंने स्पेक्ट्रम की सीधी पट्टी को मोड़कर एक बंद वलय बना दिया — पहला सच्चा कलर सर्कल। न्यूटन सजावट नहीं कर रहे थे; वे मॉडल बना रहे थे। उन्होंने ह्यू को असमान दूरी पर रखा, संगीत के स्केल के अंतरालों की तरह, और दिखाया कि आप वृत्त पर घटक किरणों के "गुरुत्व-केंद्र" को खोजकर किसी मिश्रण के रंग का पूर्वानुमान लगा सकते हैं। स्पेक्ट्रम के सिरों को जोड़ने का अर्थ था लाल और बैंगनी के बीच बैंगनी-मैजेंटा रंग डालना, जिनकी कोई एक तरंगदैर्घ्य नहीं होती — व्हील का वह हिस्सा जो केवल भौतिकी आपको नहीं देती।

एक सदी बाद, 1810 में, गोएथे ने Theory of Colours (Zur Farbenlehre) प्रकाशित की। गोएथे को तरंगदैर्घ्य से कम, इस बात की अधिक परवाह थी कि आँख असल में क्या करती है, और उन्होंने देखा कि "एक-दूसरे के ठीक विपरीत रंग… आँख में परस्पर एक-दूसरे को जगा देते हैं" — आफ़्टर-इमेज और ऑपोनेंट कलर का एक आरंभिक वर्णन, जिसे बाद में एवाल्ड हेरिंग ने औपचारिक रूप दिया। उनके सममित व्हील ने, और अठारहवीं सदी में मोज़ेस हैरिस जैसे कलाकार-प्रकृतिविदों के काम ने, बाद के व्हील को समान दूरी और उस परिचित लेआउट की ओर बढ़ाया जिसे कलाकार आज भी इस्तेमाल करते हैं।

दो व्यक्तियों ने इन व्हील को सिखाने योग्य प्रणालियों में बदल दिया। बॉहाउस में (जहाँ उन्होंने 1919 से 1922 तक प्रसिद्ध प्रारंभिक पाठ्यक्रम पढ़ाया), योहानेस इटन ने बारह-ह्यू वाला कलर व्हील बनाया और सात प्रकार के कलर कंट्रास्ट को संहिताबद्ध किया — इनमें ह्यू का, प्रकाश-अंधकार का, तापमान का, पूरकों का, संतृप्ति का और विस्तार का कंट्रास्ट शामिल हैं — जिन विचारों को उन्होंने बाद में The Art of Color में संकलित किया। अलग से, अमेरिकी चित्रकार अल्बर्ट एच. मुनसेल ने 1898 में काम शुरू किया और 1905 में A Color Notation प्रकाशित की, जिसने रंग को तीन स्वतंत्र, मापने योग्य अक्ष दिए: ह्यू (रंग परिवार), वैल्यू (लाइटनेस, काले से सफ़ेद तक) और क्रोमा (तीव्रता)। मुनसेल ऐसे पहले व्यक्ति थे जिन्होंने उन आयामों को अलग किया ताकि वे इस बात से मेल खाएँ कि लोग वास्तव में अंतर को कैसे देखते हैं, न कि रंगद्रव्य कैसे मिलते हैं — CIELAB और OKLCH जैसी आधुनिक अवधारणात्मक अवकाशों (perceptual spaces) के वैचारिक पूर्वज।

कलर हार्मनी और उनके पीछे का गणित

यह टूल HSL में काम करता है, जहाँ हर रंग तीन संख्याएँ हैं: व्हील के चारों ओर 0° से 360° तक कोण के रूप में मापा गया ह्यू, एक सैचुरेशन और एक लाइटनेस। चूँकि ह्यू एक कोण है, इसलिए क्लासिक हार्मनी सरल अंकगणित बन जाती हैं। कॉम्प्लिमेंट खोजने के लिए आप 180° जोड़ते हैं; ट्रायड के लिए 120° और 240° जोड़ते हैं; वर्ग के लिए आप चार 90° की छलाँगों में घूमते हैं। जनरेटर केवल ह्यू को घुमाता है और सैचुरेशन तथा लाइटनेस को मोटे तौर पर ज्यों-का-त्यों रखता है, और ठीक इसीलिए परिणाम एक परिवार जैसे दिखते हैं: रंग एक ही व्हील पर जान-बूझकर तय कोणों पर बैठते हैं और एक साझा चमक व जीवंतता रखते हैं, बजाय इसके कि पाँच असंबद्ध चयन हों।

वे विशेष कोण "सामंजस्यपूर्ण" क्यों लगते हैं? दो कारण। समान दूरी पर रखे ह्यू (एनालॉगस, ट्रायडिक, वर्ग) वृत्त को बराबर चापों में बाँट देते हैं, इसलिए कोई एक रंग ह्यू-संतुलन पर हावी नहीं होता — आँख एक अव्यवस्थित ढेर के बजाय एक क्रमबद्ध सेट देखती है। विपरीत ह्यू (कॉम्प्लिमेंट्री, और 150° व 210° पर अधिक कोमल स्प्लिट-कॉम्प्लिमेंट्री) ह्यू कंट्रास्ट को अधिकतम कर देते हैं, यही किसी एक्सेंट को उसके बैकग्राउंड के मुक़ाबले "उभरा हुआ" बनाता है। एनालॉगस स्कीम, बेस के लगभग ±30° के भीतर बैठकर, इसके उलट करती हैं: वे व्हील पर इतने पास रहती हैं कि लगभग हमेशा एक ही तापमान साझा करती हैं और शांत व एकीकृत लगती हैं।

ज्यामिति के बारे में एक ईमानदार चेतावनी। चूँकि यह एक योगात्मक, स्क्रीन-आधारित (RGB/HSL) व्हील है, इसलिए किसी रंग का "विपरीत" उसका प्रकाश-पूरक होता है: यहाँ लाल का पूरक सियान है, वह हरा नहीं जो आपको पारंपरिक लाल-पीला-नीला पेंट-मिश्रण व्हील पर मिलेगा। इनमें से कोई भी "ग़लत" नहीं है — वे अलग-अलग सवालों के जवाब देते हैं (प्रकाश मिलाना बनाम रंगद्रव्य मिलाना) — पर इससे समझ आता है कि किसी स्क्रीन टूल की कॉम्प्लिमेंट्री जोड़ी किसी पुरानी कलाकार-पुस्तिका वाली जोड़ी से थोड़ी अलग क्यों दिख सकती है। HSL अवधारणात्मक रूप से एकसमान भी नहीं है: एक ही संख्यात्मक लाइटनेस पर पीला और नीला बराबर चमकीले नहीं दिखेंगे, और यही सबसे बड़ा कारण है कि गणितीय रूप से एकदम सही पैलेट को भी संतुलित करने के लिए एक इंसानी आँख की ज़रूरत पड़ सकती है।

टिंट, शेड और टोन

एक हार्मनी आपके ह्यू चुनती है; टिंट, शेड और टोन आपको हर एक के हल्के, गहरे और कोमल रूप देते हैं — और नए ह्यू की तुलना में आपको इनकी ज़रूरत कहीं ज़्यादा बार पड़ती है। चित्रकला की भाषा में यह भेद सटीक है: टिंट किसी रंग को सफ़ेद के साथ मिलाता है, शेड उसे काले के साथ मिलाता है, और टोन उसे स्लेटी (ग्रे) के साथ मिलाता है। इस जनरेटर के इस्तेमाल किए HSL अंकों में, टिंट और शेड ह्यू व सैचुरेशन को स्थिर रखते हैं और केवल लाइटनेस को ऊपर-नीचे करते हैं, जबकि टोन लाइटनेस को बनाए रखता है पर सैचुरेशन को स्लेटी की ओर खींचता है।

FAQ के ऊपर वाली टिंट-और-शेड पट्टी इसी के लिए है। एक असली इंटरफ़ेस शायद ही कभी पाँच सपाट रंग होता है — यह एक या दो ह्यू होते हैं जिन्हें वैल्यू की पूरी सीढ़ी के रूप में व्यक्त किया जाता है: लगभग-सफ़ेद बैकग्राउंड टिंट, थोड़ा गहरा बॉर्डर, एक मध्य-टोन बॉडी रंग, और शीर्षकों या दबे हुए स्टेट के लिए एक गहरा शेड। डिज़ाइन सिस्टम ठीक इसी को औपचारिक बनाते हैं। Google का Material Design और Tailwind CSS दोनों हर रंग को एक क्रमांकित रैंप (लगभग 50–900, हल्के से गहरे) के रूप में देते हैं जो एक ही स्रोत ह्यू से बनता है, इसलिए डिज़ाइनर दोबारा चुनने के बजाय "blue 100" या "blue 700" इस्तेमाल करते हैं। अपना पैलेट इसी तरह बनाएँ और आपके पास किसी प्रोजेक्ट को पूरा करने लायक रंग होंगे — न कि केवल शुरू करने भर के।

60-30-10 नियम और एक उपयोगी पैलेट बनाना

एक आम शुरुआती ग़लती है पैलेट के हर रंग को बराबर जगह देना। हार्मनी जितनी चयन के बारे में है उतनी ही अनुपात के बारे में, और सबसे टिकाऊ नियम इंटीरियर डिज़ाइन से आता है: 60-30-10 नियम। किसी लेआउट का लगभग 60% एक प्रमुख रंग पर ख़र्च करें (आमतौर पर कोई न्यूट्रल या शांत टिंट — बैकग्राउंड और बड़ी सतहें), लगभग 30% एक द्वितीयक रंग पर जो उसका साथ दे और गहराई जोड़े, और मोटे तौर पर 10% एक जीवंत एक्सेंट पर जो उन चीज़ों के लिए सुरक्षित रखा जाए जिन पर आप वास्तव में क्लिक करवाना चाहते हैं: बटन, लिंक, हाइलाइट। सटीक संख्याएँ पवित्र नहीं हैं, पर पदानुक्रम है — एक प्रमुख, एक सहायक और एक छोटी-सी चिंगारी।

यह इस टूल के बनाए रंगों पर साफ़-साफ़ लागू होता है। अपने सबसे धीमे या न्यूट्रल स्वैच को 60% बैकग्राउंड मानें, किसी मध्य-टोन हार्मनी साथी को 30% द्वितीयक, और अपने सबसे संतृप्त रंग को 10% एक्सेंट। फिर टिंट-और-शेड की सीढ़ी बीच का सब कुछ भर देती है — बटन का हॉवर स्टेट, हल्का बॉर्डर, डिसेबल्ड-टेक्स्ट वाला स्लेटी। एक व्यावहारिक तरीक़ा: अपने एंकर रंग को लॉक करें (कोई ब्रांड रंग, या बस वह जो आपको पसंद है), तब तक शफ़ल करें जब तक सहायक ह्यू सही न लगें, फिर जिन दो-तीन को रखें उनसे वैल्यू रैंप बनाएँ। आप लगभग हमेशा अपेक्षा से कम ह्यू और अधिक वैल्यू इस्तेमाल करते हुए ख़त्म करेंगे।

गर्म, ठंडे और न्यूट्रल की भूमिका

व्हील मोटे तौर पर एक गर्म आधे (लाल, नारंगी, पीले) और एक ठंडे आधे (हरे, नीले, बैंगनी) में बँटता है। गर्म रंग आगे बढ़ते और ऊर्जावान लगते हैं; ठंडे रंग पीछे हटते और शांत लगते हैं। यही आंशिक रूप से कारण है कि एनालॉगस पैलेट इतने जमे हुए लगते हैं — ±30° के भीतर रहना आमतौर पर आपको विभाजन के एक ही ओर रखता है — और यही कारण है कि एक अच्छी तरह चुना गया विपरीत एक्सेंट किसी अन्यथा ठंडे डिज़ाइन को जीवंत बना सकता है।

जो रंग किसी पैलेट को सबसे अधिक बार बचाता है वह वही है जो मुश्किल से रंग होता है: एक न्यूट्रल। सफ़ेद, ऑफ़-व्हाइट, स्लेटी, बेज और लगभग-काले रंग लगभग हर पेशेवर स्कीम के जोड़ने वाले ऊतक हैं। वे संतृप्त ह्यू को टिकने की जगह देते हैं, आपके अधिकांश टेक्स्ट को उठाते हैं, और एक चमकीले पैलेट को थका देने वाला बनने से रोकते हैं। एक उपयोगी तरकीब है शुद्ध #000000 और #FFFFFF से बचना: बजाय इसके, अपना प्रमुख ह्यू लें और उसे बैकग्राउंड के लिए बहुत ऊँची लाइटनेस और टेक्स्ट के लिए बहुत नीची लाइटनेस पर ले जाएँ। हल्का साझा अंडरटोन न्यूट्रल को ऐसा एहसास देता है कि वे पैलेट के ही हैं, बजाय इसके कि किसी दूसरे से उधार लिए गए हों — और ठीक यही टिंट-और-शेड पट्टी आपको मुफ़्त में देती है।

क्या कलर साइकोलॉजी टिकती है?

आपने ज़रूर पढ़ा होगा कि नीला "मतलब" भरोसा, हरा "मतलब" प्रकृति, और लाल "मतलब" ख़तरा। इन दावों को सावधानी से लें। शोध का ईमानदार सार यह है कि रंग–भावना के जुड़ाव असली हैं पर संस्कृति और संदर्भ पर बहुत निर्भर, और लोकप्रिय सलाह का बड़ा हिस्सा बढ़ा-चढ़ाकर कहा गया है। अर्थ सार्वभौमिक नहीं हैं: क्रॉस-कल्चरल अध्ययन कई देशों में लाल को क्रोध से जुड़ा पाते हैं, फिर भी दूसरे जुड़ाव तेज़ी से अलग हो जाते हैं — एक अध्ययन में पाया गया कि केवल पोलिश प्रतिभागियों ने बैंगनी को क्रोध और ईर्ष्या से जोड़ा, जबकि जर्मन प्रतिभागियों ने ईर्ष्या को पीले से जोड़ा। जो रंग-प्रतीकवाद एक संस्कृति में स्पष्ट लगता है (मसलन शादी के लिए सफ़ेद) वह दूसरी में उल्टा अर्थ रख सकता है।

कुछ प्रभाव बाकियों की तुलना में बेहतर समर्थित हैं। इसका उचित प्रमाण है कि लंबी-तरंगदैर्घ्य वाला लाल उत्तेजना बढ़ा सकता है और ध्यान खींच सकता है, और नीला प्रकाश शांत करने वाला होता है — ये निष्कर्ष इतने मज़बूत हैं कि कुछ शहरों ने नीली स्ट्रीट लाइटिंग के प्रयोग किए हैं। पर व्यापक क्षेत्र नरम विज्ञान है: गोल्डस्टीन के 1940 के दशक के रंग-और-गति प्रयोगों जैसे क्लासिक परिणाम बार-बार दोहराए जाने में विफल रहे हैं, और "कलर थेरेपी" को व्यापक रूप से छद्म-विज्ञान माना जाता है। व्यावहारिक सीख विनम्र और भरोसेमंद है: रंग के जुड़ावों को अपने दर्शकों के लिए एक शुरुआती परिकल्पना के रूप में इस्तेमाल करें, उन्हें अपने उत्पाद के भीतर सुसंगत रखें ताकि वे दोहराव से अर्थ बनाएँ, और भरोसा करने के बजाय परखें। ब्रांड पहचान, कंट्रास्ट और निरंतरता किसी ह्यू के कथित सहज "अर्थ" की तुलना में व्यवहार को कहीं अधिक भरोसेमंद ढंग से बदलते हैं।

एक्सेसिबिलिटी: हार्मनी काफ़ी नहीं है

एक पैलेट पूरी तरह सामंजस्यपूर्ण हो सकता है और फिर भी अपठनीय। हार्मनी बताती है कि ह्यू आपस में कैसे जुड़ते हैं; एक्सेसिबिलिटी बताती है कि क्या कोई इंसान वास्तव में दो निकटवर्ती रंगों में फ़र्क कर सकता है — और ये दोनों स्वतंत्र हैं। प्रासंगिक मानक Web Content Accessibility Guidelines (WCAG 2) द्वारा परिभाषित कंट्रास्ट अनुपात है: AA स्तर के लिए, सामान्य-आकार के टेक्स्ट को उसके बैकग्राउंड के मुक़ाबले कम-से-कम 4.5:1 कंट्रास्ट अनुपात चाहिए, और बड़े टेक्स्ट (लगभग 18 pt, या 14 pt बोल्ड) को कम-से-कम 3:1। बैकग्राउंड पर टेक्स्ट के रूप में रखे गए दो ख़ूबसूरती से कॉम्प्लिमेंट्री मध्य-टोन अक्सर इसमें विफल हो जाएँगे; एक शांत मोनोक्रोमैटिक स्कीम भी अक्सर विफल होती है, क्योंकि वैल्यू आपस में बहुत पास बैठती हैं।

इसलिए जाँचें, मान न लें। पहले रंग की भूमिकाएँ तय करें — कौन-सा स्वैच बैकग्राउंड है, कौन टेक्स्ट उठाता है, कौन एक इंटरैक्टिव एक्सेंट है — फिर हर टेक्स्ट-ऑन-बैकग्राउंड जोड़ी को हमारे WCAG कंट्रास्ट चेकर से 4.5:1 (या 3:1) की सीमा के मुक़ाबले सत्यापित करें। दो और आदतें मायने रखती हैं: अर्थ उठाने के लिए कभी अकेले ह्यू पर भरोसा न करें (कलर-ब्लाइंड उपयोगकर्ता आपके "सक्सेस ग्रीन" और "एरर रेड" के बीच फ़र्क शायद न देख पाएँ, इसलिए रंग के साथ एक आइकन, लेबल या पैटर्न जोड़ें), और याद रखें कि WCAG 2 अनुपात एक स्क्रीन-लाइट सूत्र है, अवधारणा का एकदम सही मॉडल नहीं — APCA जैसे नए तरीक़े असली पठनीयता का अधिक सटीक पूर्वानुमान लगाने का लक्ष्य रखते हैं, पर WCAG 2 अब भी मौजूदा एक्सेसिबिलिटी आधार-रेखा बना हुआ है।

आम पैलेट ग़लतियाँ

व्यवहार में जो पैलेट विफल होते हैं वे अधिकतर इन्हीं कुछ कारणों से विफल होते हैं। इन पर नज़र रखें:

• बहुत सारे आपस में होड़ करते ह्यू। पाँच पूरी तरह संतृप्त, असंबद्ध रंग शोर की तरह लगते हैं। अधिकांश मज़बूत पैलेट एक या दो ह्यू और न्यूट्रल पर टिकते हैं, और अपनी विविधता वैल्यू में पाते हैं, न कि अतिरिक्त ह्यू में।
• कोई न्यूट्रल या एंकर नहीं। एक प्रमुख बैकग्राउंड रंग और टिकने के लिए एक शांत न्यूट्रल के बिना, किताबी-रूप से एकदम सही हार्मनी भी बेचैन लगती है। अपने एक्सेंट को बैठने के लिए कोई जगह दें।
• बराबर भार। हर रंग को लगभग बराबर मात्रा में इस्तेमाल करना पदानुक्रम मिटा देता है — कुछ भी आँख को राह नहीं दिखाता। 60-30-10 विभाजन लागू करें ताकि एक रंग हावी रहे और एक्सेंट दुर्लभ बना रहे।
• कंट्रास्ट और एक्सेसिबिलिटी की अनदेखी। ऐसे रंग चुनना जो स्वैच के रूप में आस-पास अच्छे लगें, फिर पता चलना कि उन पर टेक्स्ट अपठनीय है। तय करने से पहले टेक्स्ट जोड़ियों को WCAG के मुक़ाबले सत्यापित करें।
• आँख से ज़्यादा संख्याओं पर भरोसा। चूँकि HSL अवधारणात्मक रूप से एकसमान नहीं है, समान संख्यात्मक क़दम एक जैसे नहीं दिखते। अंतिम पैलेट को हमेशा किसी असली स्क्रीन पर, हल्के और गहरे दोनों संदर्भों में आँख से परखें, और हाथ से थोड़ा समायोजित करें।
• हर जगह चरम सैचुरेशन। पूरी तरह जीवंत पैलेट कंपन करते हैं और आँख को थका देते हैं। सहायक रंगों पर सैचुरेशन को घटाकर एक टोन तक लाएँ और पूरी तीव्रता एक्सेंट के लिए सुरक्षित रखें।

अंत में थोड़ा संदर्भ: यह जनरेटर पैलेट टूल की एक लंबी कतार में बैठता है, Adobe Color (जो कभी Kuler कहलाता था) और फैब्रिज़ियो बियांची के Coolors से लेकर Material Design और Tailwind में बसे कलर रैंप तक। ये सभी उसी सदी-पुराने व्हील पर टिके हैं। यह टूल आपको एक पल में एक सामंजस्यपूर्ण, गणितीय रूप से ठोस शुरुआती बिंदु दे सकता है — पर अनुपात, न्यूट्रल, कंट्रास्ट और संदर्भ के बारे में निर्णय अब भी आपका है, और ठीक वहीं अच्छा कलर काम बसता है।

अक्सर पूछे जाने वाले सवाल