मोफत इमेज रंग पॅलेट एक्स्ट्रॅक्टर

हे कसे कार्य करते

रंग काढणे Canvas API मधून वाचलेल्या कच्च्या pixel डेटावर लावलेल्या गराज-लिहिलेल्या k-means++ clustering अल्गोरिदम वापरून पूर्णपणे तुमच्या ब्राउझरमध्ये चालते — सर्व्हर, थर्ड-पार्टी लायब्ररी नाही. तीच इमेज आणि रंग-संख्या सेटिंग्ज नेहमी तोच पॅलेट तयार करतात कारण अल्गोरिदम Math.random ऐवजी निश्चित pseudo-random संख्या जनरेटर (mulberry32) वापरतो.

1. 1
   Canvas pixel डेटा वाचतो

   इमेज off-screen HTML Canvas घटकावर काढली जाते आणि त्याच्या सर्वात लांब बाजूवर जास्तीत जास्त 200px पर्यंत downsampled होते. Canvas API चे getImageData() प्रत्येक pixel कच्चा RGBA बाइट्स म्हणून परत देते, आणि clustering सुरू होण्याआधी पूर्णपणे पारदर्शक pixels (alpha < 128) टाकून दिली जातात.
2. 2
   k-means++ pixels ला cluster करते

   k-means++ initializer centroids निश्चितपणे बीज घालतो, नंतर अल्गोरिदम 20 वेळा पर्यंत पुनरावृत्ती करतो: प्रत्येक pixel त्याच्या RGB space मधील सर्वात जवळच्या centroid ला नियुक्त होतो, नंतर centroids सर्व नियुक्त pixels च्या मध्यमानाने पुन्हा मोजले जातात. त्याच hex मूल्यात कोसळणारे clusters विलीन केले जातात, त्यामुळे निकालातील प्रत्येक swatch अद्वितीय आहे.
3. 3
   प्रति-रंग metadata मोजले जाते

   प्रत्येक centroid HEX, HSL, आणि एकूण pixels मधील त्याचा वाटा (टक्केवारी) मध्ये रूपांतरित होतो. WCAG relative luminance मानक सूत्रानुसार मोजले जाते, आणि काळ्या व पांढऱ्या दोन्हीविरुद्ध कॉन्ट्रास्ट प्रमाण प्रत्येक swatch सोबत दाखवले जातात.
4. 4
   एक्सपोर्ट आणि eyedropper आउटपुट

   पॅलेट CSS custom properties, SCSS variables, Tailwind config स्निपेट, किंवा JSON म्हणून कॉपी करता येतो. click-to-sample eyedropper प्रिव्ह्यूवरील तुमचा क्लिक पूर्ण-रिझोल्यूशन canvas वरील नेमक्या source pixel निर्देशांकांशी परत मॅप करतो, त्या pixel चा रंग वेगळ्या निवडलेल्या-रंगांच्या यादीत जोडत. Canvas toBlob() द्वारे PNG पॅलेट पट्टी डाउनलोड करता येते.

संबंधित साधने