कलर पैलेट जनरेटर
एक बेस रंग चुनें और रंग-सिद्धांत की सामंजस्य योजनाएँ — पूरक, समरूप, त्रयी, चतुष्क, विभाजित पूरक और एकवर्णी — तुरंत लाइव स्वैच के रूप में बनाएँ, जिन्हें आप HEX, RGB, HSL, CSS वेरिएबल या Tailwind कॉन्फ़िग के रूप में कॉपी कर सकते हैं।
पूरक रंग
बेस रंग और चक्र पर उसका विपरीत रंग (ह्यू + 180°) — सबसे अधिक कंट्रास्ट वाली जोड़ी।
समरूप रंग
चक्र पर बेस रंग के दोनों ओर उसके दो पड़ोसी रंग (ह्यू ± 30°) — शांत और सुसंगत योजना।
त्रयी
120° के समान अंतराल पर तीन रंग (ह्यू, +120°, +240°) — जीवंत फिर भी संतुलित।
चतुष्क (आयत)
चक्र पर आयत बनाते चार रंग (ह्यू, +90°, +180°, +270°) — दो पूरक जोड़ियाँ।
विभाजित पूरक
बेस रंग के साथ उसके पूरक के दोनों ओर के दो रंग (ह्यू +150° और +210°) — मज़बूत कंट्रास्ट जिसे संतुलित करना आसान है।
एकवर्णी
एक ही ह्यू को हल्के से गहरे तक लाइटनेस के क्रम में दर्शाया गया — सहज ही सामंजस्यपूर्ण श्रेणी।
पैलेट एक्सपोर्ट करें
चयनित सामंजस्य को सीधे पेस्ट करने योग्य CSS कस्टम प्रॉपर्टीज़ या Tailwind रंग कॉन्फ़िग के रूप में कॉपी करें।
:root {
--color-1: #3498DB;
--color-2: #DB7633;
}कलर पैलेट जनरेटर के बारे में
कलर पैलेट जनरेटर रंग-चक्र की ज्यामिति का उपयोग करते हुए एक ही बेस रंग को ऐसे रंगों के समूह में बदल देता है जो साथ में अच्छे लगते हैं। रंग-सिद्धांत की सामंजस्य योजनाएँ दरअसल ह्यू के बीच परिभाषित संबंध ही हैं: ऐसे रंग जो एक-दूसरे के आमने-सामने हों, अगल-बगल हों, या चक्र के चारों ओर समान रूप से बँटे हों। यह टूल आपके बेस रंग को लेकर उसका ह्यू, सैचुरेशन और लाइटनेस (HSL) पढ़ता है, और ह्यू को निश्चित मात्रा में घुमाकर छह क्लासिक योजनाएँ बनाता है — पूरक (ह्यू + 180°), समरूप (ह्यू ± 30°), त्रयी (120° के अंतर पर), चतुष्क या आयत (90° के अंतर पर), विभाजित पूरक (पूरक के दोनों ओर), और एकवर्णी (एक ह्यू, बदलती लाइटनेस)। हर पैलेट लाइव स्वैच के रूप में दिखता है ताकि आप केवल संख्याएँ पढ़ने के बजाय संबंधों को देख सकें, और हर रंग के साथ उसके HEX, RGB और HSL मान कॉपी करने के लिए तैयार रहते हैं। जब कोई योजना आपको पसंद आ जाए, तो उसे CSS कस्टम प्रॉपर्टीज़ या Tailwind रंग कॉन्फ़िग के रूप में एक्सपोर्ट करके सीधे किसी प्रोजेक्ट में डाल दें। यह डिज़ाइनरों, डेवलपरों, इलस्ट्रेटरों और उन सभी के लिए बनाया गया है जो किसी वेबसाइट, ब्रांड, चार्ट, स्लाइड डेक या इंटीरियर के लिए रंग चुनते हैं — एक पसंदीदा रंग से पूरी संतुलित पैलेट तक तेज़ी से पहुँचने का तरीका।
इस जनरेटर का उपयोग कैसे करें
- 1 स्वैच पिकर से एक बेस रंग चुनें, या फ़ील्ड में कोई भी hex मान (उदाहरण के लिए #3498DB या #39F) टाइप करें।
- 2 छह सामंजस्य खंडों — पूरक, समरूप, त्रयी, चतुष्क, विभाजित पूरक और एकवर्णी — को देखें, हर एक लाइव रंग स्वैच के रूप में दिखाया गया है।
- 3 प्रत्येक स्वैच के बटन से किसी भी एकल रंग को HEX के रूप में कॉपी करें; हर स्वैच उससे मेल खाते RGB और HSL मान भी दिखाता है।
- 4 एक्सपोर्ट बॉक्स में एक पैलेट और एक प्रारूप चुनकर CSS कस्टम प्रॉपर्टीज़ या Tailwind रंग कॉन्फ़िग कॉपी करें, फिर उसे अपने प्रोजेक्ट में पेस्ट करें।
रंग सामंजस्य कैसे काम करते हैं (रंग-चक्र)
हर सामंजस्य बेस रंग के ह्यू को 360° रंग-चक्र के चारों ओर घुमाना है, जबकि उसका सैचुरेशन और लाइटनेस वही रहते हैं। HSL (ह्यू, सैचुरेशन, लाइटनेस) में काम करने से यह आसान हो जाता है: केवल ह्यू बदलता है। पूरक — ह्यू + 180°। दोनों रंग ठीक आमने-सामने होते हैं, जिससे सबसे तेज़ कंट्रास्ट मिलता है। समरूप — ह्यू − 30°, ह्यू, ह्यू + 30°। पड़ोसी रंग जो सहजता से घुल-मिल जाते हैं और सामंजस्यपूर्ण लगते हैं। त्रयी — ह्यू, ह्यू + 120°, ह्यू + 240°। समबाहु त्रिभुज के शीर्षों पर तीन रंग: जीवंत पर संतुलित। चतुष्क (आयत) — ह्यू, ह्यू + 90°, ह्यू + 180°, ह्यू + 270°। दो पूरक जोड़ियाँ, जो एक समृद्ध चार-रंगी योजना बनाती हैं। विभाजित पूरक — ह्यू, ह्यू + 150°, ह्यू + 210°। बेस रंग के साथ उसके पूरक के दोनों ओर के दो ह्यू — लगभग पूरक जितना कंट्रास्ट, पर अधिक कोमल। एकवर्णी — एक ही ह्यू कई लाइटनेस स्तरों पर, हल्के टिंट से लेकर गहरे शेड तक। उदाहरण के लिए, बेस रंग #3498DB का ह्यू लगभग 204° है। इसका पूरक 204° + 180° = 24° (एक नारंगी) है, इसके त्रयी साथी 324° और 84° पर हैं, और इसके विभाजित पूरक 354° और 54° पर हैं। गणना HSL में की जाती है और हर स्वैच के लिए वापस HEX में बदली जाती है।
अक्सर पूछे जाने वाले प्रश्न
पूरक रंग क्या है?
पूरक रंग वह रंग है जो रंग-चक्र पर किसी दूसरे रंग के ठीक विपरीत होता है — यानी ह्यू का 180° घुमाव। नीला और नारंगी, लाल और हरा, तथा पीला और बैंगनी पूरक जोड़ियाँ हैं। अगल-बगल रखने पर वे अधिकतम संभव कंट्रास्ट पैदा करते हैं, जिससे हर रंग और अधिक तीव्र दिखता है, इसीलिए पूरक जोड़ियाँ कॉल टू एक्शन, एक्सेंट और किसी भी उभारने वाली चीज़ के लिए लोकप्रिय हैं। यह जनरेटर आपके बेस रंग के ह्यू में 180° जोड़कर पूरक ढूँढता है।
कलर पैलेट कैसे बनाएँ?
किसी एक पसंदीदा बेस रंग से शुरू करें, फिर अनुमान लगाने के बजाय बाकी रंगों को रंग-सिद्धांत के संबंधों से निकालें। मूड के अनुरूप एक सामंजस्य चुनें: समरूप या एकवर्णी योजनाएँ शांत और एकीकृत लगती हैं, जबकि पूरक, त्रयी और विभाजित पूरक योजनाएँ कंट्रास्ट और ऊर्जा जोड़ती हैं। सैचुरेशन और लाइटनेस को सुसंगत रखें ताकि रंग एक समूह जैसे लगें, और रंगों को कुछ ही तक सीमित रखते हुए न्यूट्रल जोड़ें। यह टूल इस प्रक्रिया को स्वचालित कर देता है — एक बेस रंग दर्ज करें और यह छह तैयार पैलेट बनाता है जिन्हें आप HEX, RGB, HSL, CSS वेरिएबल या Tailwind कॉन्फ़िग के रूप में कॉपी कर सकते हैं।
त्रयी रंग योजना क्या है?
त्रयी रंग योजना रंग-चक्र के चारों ओर समान रूप से, 120° के अंतर पर बँटे तीन रंगों का उपयोग करती है — उदाहरण के लिए लाल, नीला और पीला। त्रयी पैलेट जीवंत और कंट्रास्ट से भरपूर होते हुए भी संतुलित लगते हैं, क्योंकि तीनों ह्यू एक-दूसरे से समान दूरी पर होते हैं। एक आम तरीका यह है कि एक रंग को प्रमुख रखें और बाकी दो को एक्सेंट के रूप में उपयोग करें। इस जनरेटर में त्रयी पैलेट आपका बेस रंग और +120° तथा +240° पर के ह्यू हैं।
समरूप रंग योजना क्या है?
समरूप रंग योजना चक्र पर एक-दूसरे के बगल में स्थित रंगों का उपयोग करती है, आमतौर पर बेस ह्यू के लगभग 30° के भीतर — जैसे नीला, नीला-हरा और हरा। चूँकि ह्यू बहुत निकट होते हैं, समरूप पैलेट चिकने, प्राकृतिक और सामंजस्यपूर्ण दिखते हैं, यही कारण है कि वे प्रकृति (सूर्यास्त, पत्तियाँ, समुद्र) में इतनी बार दिखते हैं। इनमें पूरक योजनाओं से कम कंट्रास्ट होता है, इसलिए एक रंग को प्रमुख चुनना मददगार रहता है। यह टूल −30°, बेस रंग और +30° के ह्यू से एक समरूप पैलेट बनाता है।
संबंधित डिज़ाइन और रंग टूल
पैलेट जनरेटर स्वाभाविक रूप से रंग परिवर्तक के साथ जुड़ता है, जो किसी भी स्वैच को HEX, RGB, HSL, HSV और CMYK के बीच बदलता है; कंट्रास्ट जाँचकर्ता के साथ, जो सुनिश्चित करता है कि आपके चुने रंग पठनीय और WCAG-सुलभ हों; CSS ग्रेडिएंट जनरेटर के साथ, जो पैलेट के रंगों को चिकनी पृष्ठभूमि में मिला देता है; और आपके बाकी डिज़ाइन वर्कफ़्लो के लिए आस्पेक्ट रेशियो कैलकुलेटर के साथ।