मुफ़्त इमेज रंग पैलेट एक्सट्रैक्टर

यह कैसे काम करता है

कलर निकालना पूरी तरह आपके ब्राउज़र में Canvas API से पढ़े रॉ पिक्सेल डेटा पर लागू एक हाथ से लिखे k-means++ क्लस्टरिंग एल्गोरिदम का उपयोग करके चलता है — कोई सर्वर नहीं, कोई थर्ड-पार्टी लाइब्रेरी नहीं। एक ही इमेज और कलर-काउंट सेटिंग हमेशा एक ही पैलेट बनाती हैं क्योंकि एल्गोरिदम Math.random की बजाय एक निर्धारक pseudo-random नंबर जनरेटर (mulberry32) उपयोग करता है।

1. 1
   Canvas पिक्सेल डेटा पढ़ता है

   इमेज एक off-screen HTML Canvas एलिमेंट पर खींची जाती है और अपनी सबसे लंबी साइड पर ज़्यादा से ज़्यादा 200px तक डाउनसैंपल की जाती है। Canvas API का getImageData() हर पिक्सेल को रॉ RGBA बाइट्स के रूप में लौटाता है, और पूरी तरह पारदर्शी पिक्सेल (alpha < 128) क्लस्टरिंग शुरू होने से पहले हटा दिए जाते हैं।
2. 2
   k-means++ पिक्सेल क्लस्टर करता है

   एक k-means++ इनिशियलाइज़र सेंट्रॉइड को निर्धारक रूप से बीज करता है, फिर एल्गोरिदम 20 बार तक इटरेट करता है: हर पिक्सेल RGB स्पेस में अपने निकटतम सेंट्रॉइड को असाइन होता है, फिर सेंट्रॉइड सभी असाइन किए पिक्सेल के मीन के रूप में फिर से गणना किए जाते हैं। एक ही हेक्स वैल्यू में गिरने वाले क्लस्टर मिला दिए जाते हैं, ताकि परिणाम में हर स्वैच अद्वितीय हो।
3. 3
   प्रति-रंग मेटाडेटा गणना किया जाता है

   हर सेंट्रॉइड HEX, HSL, और कुल पिक्सेल में उसके हिस्से (प्रतिशत) में बदला जाता है। WCAG रिलेटिव ल्यूमिनेंस स्टैंडर्ड फ़ॉर्मूले के अनुसार गणना की जाती है, और काले और सफ़ेद दोनों के मुक़ाबले कंट्रास्ट रेश्यो हर स्वैच के साथ दिखाए जाते हैं।
4. 4
   एक्सपोर्ट और आईड्रॉपर आउटपुट

   पैलेट को CSS custom properties, SCSS variables, एक Tailwind config स्निपेट, या JSON के रूप में कॉपी किया जा सकता है। एक क्लिक-टू-सैंपल आईड्रॉपर प्रीव्यू पर आपके क्लिक को एक फ़ुल-रिज़ॉल्यूशन कैनवस पर सटीक स्रोत पिक्सेल कोऑर्डिनेट में वापस मैप करता है, उस पिक्सेल का रंग एक अलग picked-colors सूची में जोड़ते हुए। एक PNG पैलेट स्ट्रिप Canvas toBlob() के ज़रिए डाउनलोड की जा सकती है।

संबंधित टूल