મફત ઇમેજ કલર પેલેટ એક્સટ્રેક્ટર

આ કેવી રીતે કાર્ય કરે છે

Color extraction Canvas API માંથી વાંચેલા raw pixel data પર લાગુ કરેલા હાથે લખેલા k-means++ clustering algorithm વડે સંપૂર્ણપણે તમારા બ્રાઉઝરમાં ચાલે છે — કોઈ સર્વર નહીં, કોઈ થર્ડ-પાર્ટી લાઇબ્રેરી નહીં. એક જ ઇમેજ અને color-count settings હંમેશા એક જ palette બનાવે છે કારણ કે algorithm Math.random ને બદલે ડિટરમિનિસ્ટિક pseudo-random number generator (mulberry32) વાપરે છે.

1. 1
   Canvas pixel data વાંચે છે

   ઇમેજ off-screen HTML Canvas એલિમેન્ટ પર દોરવામાં આવે છે અને તેની સૌથી લાંબી બાજુ પર વધુમાં વધુ 200px સુધી downsample કરવામાં આવે છે. Canvas API નું getImageData() દરેક pixel ને raw RGBA bytes તરીકે પરત આપે છે, અને clustering શરૂ થાય તે પહેલાં સંપૂર્ણ transparent pixels (alpha < 128) કાઢી નાખવામાં આવે છે.
2. 2
   k-means++ pixels ને cluster કરે છે

   એક k-means++ initializer centroids ને ડિટરમિનિસ્ટિકલી seed કરે છે, પછી algorithm 20 વખત સુધી iterate કરે છે: દરેક pixel ને RGB space માં તેના nearest centroid ને assign કરવામાં આવે છે, પછી centroids assigned pixels ના mean તરીકે ફરીથી ગણવામાં આવે છે. એક જ hex value માં collapse થતા clusters merge થાય છે, તેથી પરિણામમાં દરેક swatch અનન્ય છે.
3. 3
   દરેક color નો metadata ગણવામાં આવે છે

   દરેક centroid ને HEX, HSL, અને કુલ pixels માંનો તેનો share (ટકાવારી) માં રૂપાંતરિત કરવામાં આવે છે. WCAG relative luminance સ્ટાન્ડર્ડ ફોર્મ્યુલા મુજબ ગણવામાં આવે છે, અને black અને white બંને સામે contrast ratios દરેક swatch સાથે બતાવવામાં આવે છે.
4. 4
   Export અને eyedropper આઉટપુટ

   Palette ને CSS custom properties, SCSS variables, Tailwind config snippet, કે JSON તરીકે કૉપી કરી શકાય છે. Click-to-sample eyedropper preview પર તમારા click ને full-resolution canvas પરના ચોક્કસ source pixel coordinates સાથે મેપ કરે છે, એ pixel ના color ને અલગ picked-colors list માં ઉમેરીને. PNG palette strip Canvas toBlob() દ્વારા ડાઉનલોડ કરી શકાય છે.

સંબંધિત સાધનો