ఉచిత చిత్రం కలర్ పాలెట్ ఎక్స్‌ట్రాక్టర్

ఇది ఎలా పనిచేస్తుంది

రంగు వెలికితీత Canvas API నుండి చదివిన ముడి పిక్సెల్ డేటాపై వర్తించే చేతితో రాసిన k-means++ క్లస్టరింగ్ అల్గారిథమ్ ఉపయోగించి పూర్తిగా మీ బ్రౌజర్‌లో నడుస్తుంది — సర్వర్ లేదు, థర్డ్-పార్టీ లైబ్రరీ లేదు. అల్గారిథమ్ Math.random కాకుండా నిర్ణీత pseudo-random number generator (mulberry32) ఉపయోగిస్తుంది కాబట్టి అదే చిత్రం మరియు రంగు-సంఖ్య సెట్టింగ్‌లు ఎల్లప్పుడూ అదే పాలెట్ ఇస్తాయి.

1. 1
   Canvas పిక్సెల్ డేటాను చదువుతుంది

   చిత్రం ఆఫ్-స్క్రీన్ HTML Canvas ఎలిమెంట్‌పై గీయబడి దాని పొడవైన వైపు గరిష్ఠంగా 200pxకు తగ్గించబడుతుంది. Canvas API యొక్క getImageData() ప్రతి పిక్సెల్‌ను ముడి RGBA బైట్‌లుగా ఇస్తుంది, క్లస్టరింగ్ ప్రారంభమయ్యే ముందు పూర్తిగా పారదర్శక పిక్సెల్‌లు (alpha < 128) విస్మరించబడతాయి.
2. 2
   k-means++ పిక్సెల్‌లను క్లస్టర్ చేస్తుంది

   k-means++ initializer centroidsను నిర్ణీతంగా ప్రారంభిస్తుంది, తర్వాత అల్గారిథమ్ 20 సార్లు వరకు పునరావృతం చేస్తుంది: ప్రతి పిక్సెల్ RGB స్పేస్‌లో దాని దగ్గరి centroidకు కేటాయించబడుతుంది, తర్వాత centroids కేటాయించిన అన్ని పిక్సెల్‌ల సగటుగా మళ్లీ లెక్కించబడతాయి. అదే hex విలువకు కుదించుకుపోయే క్లస్టర్‌లు విలీనం చేయబడతాయి, కాబట్టి ఫలితంలో ప్రతి స్వాచ్ ప్రత్యేకమైనది.
3. 3
   ప్రతి రంగుకు మెటాడేటా లెక్కించబడుతుంది

   ప్రతి centroid HEX, HSL, మరియు మొత్తం పిక్సెల్‌లలో దాని వాటా (శాతం)గా మార్చబడుతుంది. WCAG సాపేక్ష ప్రకాశం ప్రామాణిక సూత్రం ప్రకారం లెక్కించబడుతుంది, మరియు నలుపు మరియు తెలుపు రెండింటితో కాంట్రాస్ట్ నిష్పత్తులు ప్రతి స్వాచ్ పక్కన చూపబడతాయి.
4. 4
   ఎగుమతి మరియు eyedropper అవుట్‌పుట్

   పాలెట్‌ను CSS custom properties, SCSS variables, Tailwind config స్నిపెట్, లేదా JSONగా కాపీ చేయవచ్చు. క్లిక్-చేసి-శాంపిల్ eyedropper ప్రివ్యూపై మీ క్లిక్‌ను పూర్తి-రిజల్యూషన్ కాన్వాస్‌పై ఖచ్చితమైన సోర్స్ పిక్సెల్ కోఆర్డినేట్‌లకు మ్యాప్ చేసి, ఆ పిక్సెల్ రంగును ప్రత్యేక ఎంచుకున్న-రంగుల జాబితాకు జోడిస్తుంది. PNG పాలెట్ స్ట్రిప్‌ను Canvas toBlob() ద్వారా డౌన్‌లోడ్ చేయవచ్చు.

సంబంధిత సాధనాలు