स्पेस दबाकर मेल खाते रंगों के पैलेट बनाएँ, पसंदीदा रंग लॉक करें, फिर HEX कोड कॉपी करें या CSS वेरिएबल, Tailwind और JSON एक्सपोर्ट करें। सब कुछ आपके ब्राउज़र में बनता है और कुछ भी अपलोड नहीं होता।
ऑनलाइन कलर पैलेट जनरेटर
स्पेस दबाकर मेल खाते रंगों के पैलेट बनाएँ, पसंदीदा रंग लॉक करें, फिर HEX कोड कॉपी करें या CSS वेरिएबल, Tailwind और JSON एक्सपोर्ट करें। सब कुछ आपके ब्राउज़र में बनता है और कुछ भी अपलोड नहीं होता।
पैलेट आपके ब्राउज़र में बनते और जाँचे जाते हैं, और कुछ भी अपलोड नहीं होता। शेयर लिंक में सिर्फ़ # के बाद वाले हिस्से में रंगों के कोड रहते हैं, और आपके मोड, शैली और आकार के चुनाव सिर्फ़ इसी डिवाइस पर याद रखे जाते हैं।
कलर पैलेट जनरेटर ऐसे रंगों का एक समूह बनाता है जो आपस में मेल खाते हैं। स्पेस या Generate बटन दबाएँ और दो से दस रंगों का नया पैलेट दिख जाता है, जो पूरी तरह रैंडम हो सकता है (रंग जितना हो सके उतने दूर-दूर रखे जाते हैं) या बेस रंग के आसपास की क्लासिक हार्मनी पर टिका हो सकता है: एनालॉगस, कॉम्प्लिमेंटरी, स्प्लिट-कॉम्प्लिमेंटरी, ट्रायडिक, टेट्राडिक, मोनोक्रोमैटिक, शेड्स और टिंट्स। जो रंग पसंद आए उसे लॉक करें और बाकी उसके आसपास बदलते रहेंगे, अनडू से अपने पिछले तीस पैलेट तक वापस जाएँ और स्वैच को खींचकर नए क्रम में लगाएँ। हर रंग के साथ उसके HEX, RGB और HSL मान, सबसे पास का नामित रंग और सफ़ेद व काले टेक्स्ट के साथ उसका सटीक WCAG कंट्रास्ट दिखता है। पैलेट तैयार होने पर उसे HEX कोड, CSS वेरिएबल, SCSS, Tailwind स्निपेट या JSON के रूप में कॉपी करें, या ऐसा लिंक साझा करें जिसमें सिर्फ़ रंगों के कोड हों।
विशेषताएँ
नौ जनरेशन मोड: रैंडम, एनालॉगस, कॉम्प्लिमेंटरी, स्प्लिट-कॉम्प्लिमेंटरी, ट्रायडिक, टेट्राडिक, मोनोक्रोमैटिक, शेड्स और टिंट्स
चुनी हुई शैली (कोई भी, वाइब्रेंट, पेस्टल, म्यूटेड, डार्क या लाइट) में रैंडम पैलेट, जिनमें रंग हमेशा साफ़ तौर पर एक-दूसरे से अलग रहते हैं
बेस कलर का फ़ील्ड, जो आपके ब्रांड रंग या किसी पसंदीदा शेड के आसपास हर हार्मनी बनाता है
लॉक बटन, जो चुने हुए रंगों को अपनी जगह पर रोके रखते हैं जबकि बाकी दोबारा बनते हैं, ताकि आप पैलेट को कदम-दर-कदम निखार सकें
दो से दस रंग, खींचकर या तीर वाले बटनों से क्रम बदलना, और पिछले 30 पैलेट तक अनडू और रीडू
हर स्वैच पर HEX, RGB और HSL मान, सबसे पास का नामित रंग और सफ़ेद व काले टेक्स्ट का सटीक WCAG कंट्रास्ट
कंट्रास्ट चेकर, जो आपके पैलेट के किसी भी टेक्स्ट और बैकग्राउंड जोड़े को AA और AAA के हिसाब से आँकता है
HEX सूची, CSS वेरिएबल, SCSS, Tailwind स्निपेट या JSON के रूप में एक्सपोर्ट, साथ में एक शेयर लिंक जिसमें सिर्फ़ रंगों के कोड रहते हैं
कलर पैलेट जनरेटर का उपयोग कैसे करें
कोई मोड चुनें और Random के लिए एक शैली भी; अगर पैलेट किसी एक रंग के आसपास बनाना हो तो बेस कलर जोड़ें
स्पेस या Generate तब तक दबाएँ जब तक कोई पसंदीदा रंग न दिख जाए, फिर उसे लॉक करें ताकि बाकी रंग बदलते रहें और वह टिका रहे
किसी स्वैच पर क्लिक करके उसका HEX कोड कॉपी करें, RGB, HSL और कंट्रास्ट के लिए उसका विवरण खोलें और स्वैच को खींचकर मनचाहे क्रम में रखें
किसी भी जोड़े पर टेक्स्ट कंट्रास्ट जाँचें, फिर Export खोलें और पैलेट को CSS वेरिएबल, SCSS, Tailwind या JSON के रूप में कॉपी करें
उदाहरण
इनपुट
Mode: Analogous · base color #2a9d8f · 5 colors
आउटपुट
#3d4dc3 #2b668a #2a9d8f #69d391 #5aca4b
White text: AA on #3d4dc3 (6.89) and #2b668a (6.23) · black text: AA or better on the other three
एनालॉगस रंग कलर व्हील पर एक-दूसरे के बगल में बैठते हैं, ज़्यादा से ज़्यादा 30 डिग्री के फ़ासले पर। कंट्रास्ट अनुपात WCAG फ़ॉर्मूले से निकाले जाते हैं, इसलिए हर स्वैच बताता है कि उस पर किस रंग का टेक्स्ट रखना है।
सामान्य त्रुटियाँ और समस्या निवारण
स्पेस दबाने पर नया पैलेट नहीं बनता। — स्पेस तभी पैलेट बनाता है जब किसी बटन, लिंक या टेक्स्ट फ़ील्ड पर कीबोर्ड फ़ोकस न हो, क्योंकि वे स्पेस को अपने लिए रखते हैं। Tab तब तक दबाएँ जब तक कुछ भी हाइलाइट न रहे, या Generate बटन पर क्लिक करें।
Generate बटन धूसर है। — हर रंग लॉक है, इसलिए बदलने को कुछ बचा ही नहीं। लॉक बटन या L कुंजी से कम से कम एक रंग अनलॉक करें।
शेयर किए गए पैलेट का लिंक खाली या अलग पैलेट खोलता है। — रंग पते में # चिह्न के बाद वाले हिस्से में रहते हैं। अगर किसी चैट ऐप ने लिंक छोटा काट दिया हो, तो पूरा पता दोबारा कॉपी करें; # के बाद का जो हिस्सा दो से दस वैध छह अंकों वाले HEX कोड न हो, उसे अनदेखा कर दिया जाता है।
Tailwind स्निपेट मेरे मौजूदा रंगों को नहीं बदलता। — यह theme.extend.colors के अंदर एक पैलेट समूह जोड़ता है। इसे अपने कॉन्फ़िग के colors ऑब्जेक्ट में चिपकाएँ और bg-palette-1 या text-palette-3 जैसी क्लास इस्तेमाल करें।
अक्सर पूछे जाने वाले प्रश्न
कलर पैलेट जनरेटर में हार्मनी मोड कैसे काम करते हैं?
हर मोड एक बेस ह्यू से शुरू करके कलर व्हील पर तय दूरी वाले ह्यू चुनता है: एनालॉगस रंग ज़्यादा से ज़्यादा 30 डिग्री के फ़ासले पर होते हैं, कॉम्प्लिमेंटरी सामने वाला ह्यू लेता है, स्प्लिट-कॉम्प्लिमेंटरी उसके दोनों बगल के दो ह्यू, ट्रायडिक तीन ह्यू को 120 डिग्री के अंतर पर रखता है और टेट्राडिक चार ह्यू को 90 डिग्री के अंतर पर। मोनोक्रोमैटिक, शेड्स और टिंट्स एक ही ह्यू रखकर उसकी लाइटनेस और सैचुरेशन बदलते हैं, और Random रंगों को जितना हो सके उतना दूर-दूर फैलाता है।
अपने ब्रांड रंग के आसपास कलर पैलेट कैसे बनाऊँ?
अपना ब्रांड रंग बेस कलर के रूप में लिखें या चुनें, फिर कोई हार्मनी मोड चुनें। बेस पैलेट में रखा जाता है और स्थिर रहता है, और हर बार स्पेस दबाने पर बाकी रंग उसके आसपास बनते हैं। एनालॉगस, कॉम्प्लिमेंटरी और ट्रायडिक के बीच बदलकर देखें कि आप पैलेट को ब्रांड रंग से कितना दूर ले जाना चाहते हैं।
कलर पैलेट जनरेटर में कुछ रंग रखकर बाकी कैसे बदलूँ?
जो रंग पसंद हों उन्हें स्वैच के लॉक बटन या L कुंजी से लॉक करें। लॉक किया हुआ रंग अपनी जगह पर रहता है और उसके आसपास नया पैलेट बनता है, और नया पैलेट बुरा निकले तो अनडू पिछले पैलेट पर लौटा देता है। सारे रंग लॉक करने पर Generate बंद हो जाता है।
यह WCAG फ़ॉर्मूला इस्तेमाल करता है, जो दो रंगों के सापेक्ष ल्यूमिनेंस की तुलना करता है। सामान्य टेक्स्ट के लिए AA में कम से कम 4.5:1 और AAA में 7:1 का अनुपात चाहिए; बड़े टेक्स्ट के लिए 3:1 और 4.5:1। हर स्वैच सफ़ेद और काले टेक्स्ट का अनुपात दिखाता है, और कंट्रास्ट चेकर पैलेट के किसी भी टेक्स्ट और बैकग्राउंड जोड़े को आँकता है।
पैलेट को CSS वेरिएबल या Tailwind में एक्सपोर्ट कैसे करूँ?
Export पैनल खोलें और कोई फ़ॉर्मैट चुनें। CSS variables --color-1 से --color-5 वाला :root ब्लॉक देता है, SCSS $color वेरिएबल देता है, Tailwind theme.extend.colors में चिपकाने के लिए एक पैलेट समूह देता है, और JSON तथा HEX सूची सादे ऐरे देती हैं। हर एक के लिए कॉपी बटन है।
क्या मैं कलर पैलेट जनरेटर से बनाया पैलेट शेयर कर सकता हूँ?
हाँ। आपके ब्राउज़र के पते में # के बाद हमेशा मौजूदा रंग रहते हैं, जैसे #264653-2a9d8f-e9c46a, और Copy link उसे कॉपी करता है। जो भी उसे खोलेगा उसे वही पैलेट दिखेगा। # के बाद का हिस्सा कभी किसी सर्वर को नहीं भेजा जाता, और इस डिवाइस पर सिर्फ़ आपके मोड, शैली और आकार के चुनाव याद रखे जाते हैं।