मुफ़्त वेबसाइट कलर पैलेट एक्सट्रैक्टर

वेबसाइट कलर पैलेट एक्सट्रैक्टर एक मुफ़्त ऑनलाइन टूल है जो किसी भी वेबसाइट के CSS से पूरी रंग पैलेट निकालता है। ब्रांड रंग, टेक्स्ट रंग और बैकग्राउंड खोजें। यह पूरी तरह आपके ब्राउज़र में चलता है, किसी इंस्टॉलेशन या साइन-अप की ज़रूरत नहीं।

किसी वेबसाइट का CSS सोर्स कोड पेस्ट करें और टूल उसमें इस्तेमाल किए गए सभी रंग मानों को निकाल देगा।

हाँ, यह CSS वेरिएबल्स (--color-*) और उनके मानों का पता लगाता है।

हाँ, पूरी तरह मुफ़्त।

बिल्कुल। वेबसाइट कलर पैलेट एक्सट्रैक्टर सब कुछ आपके ब्राउज़र में क्लाइंट-साइड पर प्रोसेस करता है। कोई भी डेटा किसी सर्वर पर अपलोड या संग्रहीत नहीं किया जाता। आपकी सामग्री हर समय आपके डिवाइस पर निजी रहती है।

हाँ, वेबसाइट कलर पैलेट एक्सट्रैक्टर पूरी तरह रिस्पॉन्सिव है और स्मार्टफ़ोन व टैबलेट पर काम करता है। आप इसे किसी भी आधुनिक वेब ब्राउज़र वाले डिवाइस पर इस्तेमाल कर सकते हैं, किसी ऐप डाउनलोड की ज़रूरत नहीं।

किसी खाते या पंजीकरण की ज़रूरत नहीं है। बस अपने ब्राउज़र में वेबसाइट कलर पैलेट एक्सट्रैक्टर खोलें और तुरंत उपयोग शुरू करें। कोई साइन-अप बाधा या उपयोग प्रतिबंध नहीं है।

वेबसाइट कलर पैलेट एक्सट्रैक्टर सभी आधुनिक ब्राउज़रों में काम करता है, जिनमें Chrome, Firefox, Safari, Edge और Opera शामिल हैं। सर्वोत्तम अनुभव के लिए अपने पसंदीदा ब्राउज़र का नवीनतम संस्करण उपयोग करें।

साइट को अपने ब्राउज़र में खोलें, उसका सोर्स या स्टाइलशीट देखें (राइट-क्लिक करके View Page Source चुनें, या किसी लिंक की गई .css फ़ाइल खोलें), CSS कॉपी करें, और उसे एक्सट्रैक्टर में पेस्ट करें। यह टूल स्क्रीनशॉट के पिक्सेल सैंपल करने के बजाय रॉ कलर वैल्यू पढ़ता है, इसलिए आपको मिलने वाले हेक्स कोड बिल्कुल वही होते हैं जो डिज़ाइनर ने तय किए थे, न कि एंटी-एलियासिंग या कंप्रेशन से बिगड़े अनुमान। यह उन्हीं प्रॉपर्टी को स्कैन करता है जहाँ रंग होता है -- background, color, border colors, fill, stroke, box-shadow, और outline -- साथ ही CSS कस्टम प्रॉपर्टी भी, और फिर हर यूनीक रंग को एक ऐसे स्वैच के रूप में सूचीबद्ध करता है जिसे क्लिक करके कॉपी किया जा सके। चूँकि यह पेस्ट किए गए सोर्स पर काम करता है, आप किसी इंटरनल या अप्रकाशित स्टाइलशीट का भी विश्लेषण कर सकते हैं जहाँ तक कोई स्क्रीनशॉट टूल नहीं पहुँच सकता। पूरा और सटीक पैलेट एक क्लिक में पाने के लिए ऊपर CSS पेस्ट करें।

स्क्रीनशॉट कलर पिकर एक रेंडर हुए पिक्सेल को सैंपल करता है, इसलिए मिलने वाली वैल्यू मूल रंग से हट सकती है — किनारों की एंटी-एलियासिंग, JPEG या PNG कंप्रेशन, मॉनिटर के कलर प्रोफ़ाइल, और रेंडरिंग के दौरान हुई किसी भी ओपैसिटी ब्लेंडिंग की वजह से। CSS से एक्सट्रैक्ट करने पर वही शाब्दिक वैल्यू पढ़ी जाती है जो लेखक ने लिखी थी -- जैसे #2563eb -- इसलिए यह सटीक और हर बार दोहराई जा सकने वाली होती है। CSS एक्सट्रैक्शन ऐसे रंग भी सामने लाता है जो स्क्रीनशॉट कभी नहीं दिखा सकता: वे टोन जो केवल hover स्टेट्स, डार्क-मोड नियमों, डिसेबल बटनों, या ऐसे कॉम्पोनेंट्स में तय हों जिन्हें आपने कभी क्लिक करके नहीं देखा, क्योंकि ये सभी सोर्स में मौजूद होते हैं। इसका ट्रेड-ऑफ़ यह है कि आपको स्टाइलशीट तक पहुँच चाहिए होती है, जबकि पिकर किसी भी इमेज पर काम कर जाता है। यह टूल CSS वाला रास्ता अपनाता है, और हर वैल्यू को डुप्लिकेट-मुक्त करके हेक्स में बदलता है। छिपे हुए रंगों समेत हर परिभाषित रंग देखने के लिए ऊपर एक स्टाइलशीट पेस्ट करें।

हाँ। यह टूल हर आम CSS सिंटैक्स में लिखे कलर वैल्यू को पहचानता है और उन सभी को सामान्य करके हेक्स में बदल देता है ताकि नतीजे सुसंगत हों और आपस में तुलना करना आसान हो। यह rgb() और rgba() फ़ंक्शन, hsl() और hsla() फ़ंक्शन, #f0a जैसा 3-डिजिट शॉर्टहैंड, पूरा 6-डिजिट हेक्स, और crimson, teal, gold जैसे नामित CSS रंगों को उनके मैच किए गए नाम में बदल देता है। 8-डिजिट हेक्स और alpha चैनल वाली rgba/hsla वैल्यू के लिए, alpha हटा दिया जाता है और केवल मूल रंग रखा जाता है, क्योंकि लक्ष्य पैलेट है न कि हर एलिमेंट की पारदर्शिता। चूँकि सब कुछ अंत में एक ही हेक्स फ़ॉर्मैट में आ जाता है, अलग-अलग तरीक़े से लिखी गई दो वैल्यू -- जैसे rgb(220, 20, 60) और #dc143c -- एक ही स्वैच में मिलकर एक संयुक्त उपयोग गिनती दिखाती हैं। ऊपर अपना CSS पेस्ट करें और हर सपोर्टेड फ़ॉर्मैट एक साफ़-सुथरे हेक्स पैलेट में एकीकृत हो जाएगा।

चालीस हेक्स कोड का कच्चा ढेर समझना मुश्किल होता है, इसलिए यह एक्सट्रैक्टर हर रंग को उसकी लाइटनेस और सैचुरेशन के आधार पर चार समूहों में बाँट देता है। बेहद हल्के शेड Light / Background रंग बन जाते हैं, बेहद गहरे टोन Dark / Text रंग बन जाते हैं, कम-सैचुरेशन वाली वैल्यू Neutral / Gray रंग बन जाती हैं, और बाक़ी बचे गहरे रंग Accent / Brand रंग बन जाते हैं। यह उसी तरह से काम करता है जैसे असली डिज़ाइन सिस्टम बना होता है, और इससे आपको किसी ब्रांड के सिग्नेचर रंग बनाम उसके सहायक ग्रे रंग तुरंत दिखाई दे जाते हैं। यह ग्रुपिंग रंगों की अव्यवस्था भी उजागर करती है: अगर accent समूह में लगभग-समान तीन नीले रंग हों, तो इसका आमतौर पर मतलब है कि एक ही ब्रांड रंग को अलग-अलग जगहों पर थोड़ा अलग ढंग से डाला गया है और उसे एक साथ मिलाया जाना चाहिए। हर स्वैच अपना हेक्स कोड और उपयोग गिनती बनाए रखता है, और सबसे ज़्यादा इस्तेमाल होने वाले रंग सबसे ऊपर आ जाते हैं। पैलेट को इस तरह अपने-आप व्यवस्थित देखने के लिए ऊपर एक स्टाइलशीट पेस्ट करें।

एक्सट्रैक्ट करने के बाद, Export Palette सेक्शन खोलें और CSS Variables फ़ॉर्मैट चुनें। यह टूल एक तैयार :root ब्लॉक बनाता है जिसमें हर रंग एक नंबर वाली कस्टम प्रॉपर्टी बन जाता है, जैसे --color-1: #2563eb, ताकि आप पूरा सेट सीधे किसी स्टाइलशीट में डाल सकें और अपने पूरे प्रोजेक्ट में उन टोकन का इस्तेमाल कर सकें। अगर आपको डेटा कहीं और चाहिए, तो JSON Array पर स्विच करें ताकि हर रंग उसके हेक्स, मैच हुए नाम और उपयोग गिनती के साथ मिले जो स्क्रिप्ट या डिज़ाइन टूलिंग के लिए काम आता है, या Hex List चुनें जो एक साधारण कॉमा-सेपरेटेड स्ट्रिंग देता है जिसे Figma, किसी स्वैच पैनल, या डॉक्यूमेंटेशन में साफ़-साफ़ पेस्ट किया जा सके। एक कॉपी बटन चुने गए फ़ॉर्मैट को एक क्लिक में आपके क्लिपबोर्ड पर रख देता है। यह ऐसी थीम से टोकन वापस पाने के लिए काम आता है जिसकी डिज़ाइन फ़ाइल कब की खो चुकी है, या किसी रीडिज़ाइन से पहले किसी ब्रांड को दस्तावेज़ी रूप देने के लिए। ऊपर अपना CSS पेस्ट करें, फिर अपने वर्कफ़्लो के लिए ज़रूरी फ़ॉर्मैट एक्सपोर्ट करें।