यह टूल क्या करता है
कलर व्हील कैसे काम करता है
पैलेट के प्रकार कैसे कैलकुलेट किए जाते हैं
फीचर्स की जानकारी
ड्रैग करने योग्य व्हील पिकर
Hue और saturation को लाइव बदलने के लिए मार्कर को व्हील के चारों ओर ड्रैग करें। हर मूवमेंट पर पैलेट तुरंत री-कैलकुलेट होता है, जिससे आप रंग फाइनल करने से पहले ही कॉम्बिनेशन का बदलाव देख सकते हैं।
वैलिडेशन के साथ Hex इनपुट
सीधे hex कोड टाइप या पेस्ट करें (3 या 6 डिजिट, # के साथ या बिना)। अमान्य वैल्यू दर्ज करने पर यह बिना बताए फेल होने के बजाय तुरंत अलर्ट दिखाएगा।
Hue / Saturation / Luminance स्लाइडर्स
छोटे व्हील पर माउस से सूक्ष्म एडजस्टमेंट करना कठिन हो सकता है, इसलिए एडिट पैनल में रंग को तीन अलग-अलग स्लाइडर्स के रूप में दिया गया है जिन्हें आप एक-एक करके आसानी से बदल सकते हैं।
पांच तरह के पैलेट प्रकार
अपने बेस कलर को दोबारा चुने बिना complementary, monochromatic, analogous, triadic और tetradic के बीच स्विच करें — यह टूल उसी hue का पुन: उपयोग करता है और केवल व्हील पर उसके रोटेशन का तरीका बदलता है।
वन-क्लिक कॉपी
किसी भी रंग के hex कोड को कॉपी करने के लिए उस पर क्लिक करें, या पैलेट के नीचे दिए गए बटनों का उपयोग करके पूरे पैलेट को एक साथ प्लेन hex लिस्ट या रेडी-टू-पेस्ट CSS कस्टम प्रॉपर्टीज (--color-1, --color-2 आदि) के रूप में कॉपी करें।
हर रंग को स्वतंत्र रूप से एडिट किया जा सकता है
जनरेट किए गए रंग फॉर्मूले से बंधे नहीं हैं। व्हील पर किसी भी मार्कर को ड्रैग करें, या किसी रंग पर होवर करके छोटे एडजस्ट आइकॉन पर क्लिक करके उसके अपने Hue/Saturation/Luminance स्लाइडर्स खोलें। एक बार जब आप किसी रंग को बदलते हैं, तो वह कैलकुलेटेड पोजीशन पर वापस जाने के बजाय वहीं रहता है — केवल पैलेट प्रकार बदलने पर ही यह रिसेट होता है।
आपके रंग के अनुसार बदलने वाला बैकग्राउंड
पिकर के पीछे का एरिया चुने गए बेस कलर के हल्के और सॉफ्ट टिंट का रंग ले लेता है, जिससे आपको यह अंदाज़ा हो जाता है कि वह रंग किसी बड़े सरफेस पर कैसा दिखेगा।
इमेज के रूप में डाउनलोड करें
Hex कोड्स कॉपी करने के अलावा, पैलेट को PNG, JPG या SVG फॉर्मेट में कार्ड इमेज के रूप में डाउनलोड किया जा सकता है — यह कोड एडिटर के बाहर, किसी डॉक्यूमेंट या डिज़ाइन ब्रीफ़ में पैलेट शेयर करने के लिए उपयोगी है।
आप इसका उपयोग किन कामों के लिए कर सकते हैं?
वेबसाइट या ऐप का कलर स्कीम चुनना
पहले अपना प्राइमरी ब्रांड कलर चुनें, फिर बटन, लिंक और एक्सेंट के लिए complementary या triadic सेट जनरेट करें।
डिज़ाइन सिस्टम पैलेट तैयार करना
पैलेट को CSS variables के रूप में कॉपी करें और किसी थीम की शुरुआत के रूप में सीधे अपनी स्टाइलशीट में पेस्ट करें।
चेक करना कि दो रंग आपस में सही दिखते हैं या नहीं
एक रंग को बेस के रूप में सेट करें और देखें कि दूसरा रंग व्हील पर उसके सापेक्ष कहाँ आता है — पास-पास के रंग (कम कोण) अलग पहचानना कठिन होते हैं, जबकि विपरीत रंग सबसे अधिक कंट्रास्ट बनाते हैं।
एक ही रंग के शेड्स और टिंट्स एक्सप्लोर करना
अपने सटीक hue का गहरा शेड और हल्का टिंट पाने के लिए monochromatic विकल्प पर स्विच करें, जो UI रंग के होवर स्टेट्स, बॉर्डर्स या डिसेबल्ड वेरिएंट्स के लिए उपयोगी है।
टूल की जानकारी
| Input | Hex color code (टाइप करके) या व्हील पर क्लिक/ड्रैग करके |
|---|---|
| Output | HEX कोड्स और CSS कस्टम प्रॉपर्टीज (क्लिपबोर्ड पर कॉपी), या PNG, JPG या SVG के रूप में डाउनलोड किया गया पैलेट कार्ड |
| Palette types | Complementary, Monochromatic, Analogous, Triadic, Tetradic |
| Processing | पूरी तरह से ब्राउज़र में — कोई अपलोड नहीं, कोई अकाउंट नहीं, कोई सर्वर रिक्वेस्ट नहीं |
| Color model | HSL (hue, saturation, lightness), जिसे hex से कनवर्ट किया जाता है |
लाभ
- किसी अकाउंट या साइन-अप की आवश्यकता नहीं — पेज लोड होते ही व्हील काम करना शुरू कर देता है।
- जैसे ही आप ड्रैग करते हैं पैलेट तुरंत अपडेट होता है, जिससे आप जल्दी से विकल्पों की तुलना कर सकते हैं।
- CSS variables के रूप में कॉपी करने से आपको hex कोड्स को मैन्युअल रूप से रिनम या रीफॉर्मेट करने की आवश्यकता नहीं होती।
- प्रत्येक पैलेट प्रकार का गणित फिक्स्ड और सुसंगत है, इसलिए एक बार नियम समझ में आने के बाद रिज़ल्ट का अंदाज़ा लगाना आसान होता है।
सीमाएँ
- व्हील केवल hue और saturation दिखाता है — lightness को स्लाइडर से अलग से एडजस्ट करना पड़ता है।
- यह टूल कलर थ्योरी नियमों के आधार पर पैलेट जनरेट करता है; यह कंट्रास्ट रेश्यो या एक्सेसिबिलिटी (WCAG) नियमों की जांच नहीं करता है।
- क्लिपबोर्ड पर कॉपी करने के लिए ऐसे ब्राउज़र की आवश्यकता होती है जो Clipboard API का समर्थन करता हो; बहुत पुराने ब्राउज़रों में कॉपी बटन काम नहीं कर सकते हैं।
- डाउनलोड की गई PNG/JPG/SVG फ़ाइल एक साधारण पैलेट कार्ड (hex लेबल के साथ कलर ब्लॉक्स) होती है, न कि स्वयं इंटरैक्टिव व्हील की तस्वीर।
- किसी स्वैच मार्कर को ड्रैग करने से केवल hue और saturation सीधे बदलते हैं; इसकी lightness कैलकुलेट की गई वैल्यू से ही बनी रहती है जब तक कि इसे Luminance स्लाइडर से एडजस्ट न किया जाए।
प्राइवेसी
आपके द्वारा बनाया गया कोई भी रंग, hex कोड या पैलेट कहीं भी नहीं भेजा जाता है। सारा गणित आपके ब्राउज़र टैब में लोकल रूप से चलता है, और पेज को बंद या रिफ्रेश करने पर सब कुछ क्लियर हो जाता है।
डेटा प्रोसेसिंग
यह टूल कुकीज़ का उपयोग नहीं करता है, आपके पैलेट को स्टोर नहीं करता है, और इसके लिए लॉगिन की आवश्यकता नहीं है।
टिप्स
- यदि आपके पैलेट में दो रंग बहुत समान लगते हैं, तो एक व्यापक पैलेट प्रकार (analogous के बजाय triadic या tetradic) ट्राई करें।
- UI डिज़ाइन के काम के लिए, यदि आप एक शांत पैलेट चाहते हैं तो saturation को कम (40-60%) रखें।
- सिंगल ब्रांड कलर के होवर/एक्टिव/डिसेबल्ड वेरिएंट्स बनाने के लिए monochromatic प्रकार का उपयोग करें।
अक्सर पूछे जाने वाले प्रश्न
क्या यह टूल मेरे पैलेट्स को सेव करता है?
नहीं। कुछ भी स्टोर नहीं किया जाता है — यदि आप पेज को रिफ्रेश करते हैं या टैब बंद करते हैं, तो पैलेट तब तक हट जाता है जब तक कि आपने इसे पहले ही कहीं कॉपी न कर लिया हो।
व्हील और स्लाइडर्स के बीच क्या अंतर है?
व्हील आपके क्लिक या ड्रैग के आधार पर hue और saturation को एक साथ कंट्रोल करता है। एडिट पैनल के स्लाइडर्स आपको hue, saturation और luminance को अलग-अलग सेट करने की सुविधा देते हैं, जो सटीक वैल्यू दर्ज करने के लिए आसान है।
क्या मैं #1ec जैसे 3-डिजिट hex कोड का उपयोग कर सकता हूं?
हाँ, hex फ़ील्ड शुरुआती # के साथ या बिना 3-डिजिट और 6-डिजिट दोनों प्रकार के hex कोड स्वीकार करता है।
व्हील पूरी तरह रंगीन क्यों दिखता है, लेकिन मेरा चुना हुआ रंग हल्का दिखता है?
व्हील बैकग्राउंड हमेशा विजुअल रेफरेंस के लिए किनारे पर फुल saturation दिखाता है। आपके वास्तविक रंग की saturation यह दर्शाती है कि उसका मार्कर केंद्र से कितनी दूर है, और इसकी lightness एक अलग वैल्यू है जिसे Luminance स्लाइडर के साथ एडजस्ट किया जाता है।
यदि मैं एक रंग को बदलता हूं, तो क्या यह दूसरों को प्रभावित करता है?
नहीं। एक रंग को बदलने या एडिट करने से केवल वही रंग बदलता है। बाकी रंग अपनी कैलकुलेट की गई पोजीशन पर तब तक बने रहते हैं जब तक आप उन्हें भी न बदलें, या जब तक आप पैलेट प्रकार न बदलें, जो हर मैन्युअल एडजस्टमेंट को रिसेट कर देता है।
PNG/JPG और SVG डाउनलोड में क्या अंतर है?
वे एक ही पैलेट कार्ड दिखाते हैं। PNG और JPG फिक्स्ड-रिमोल्यूशन इमेजिस हैं, जबकि SVG किसी भी साइज़ में शार्प रहता है और बाद में किसी भी वेक्टर टूल में एडिट किया जा सकता है।