বিনামূল্যে ছবির রঙ প্যালেট এক্সট্র্যাক্টর

কিভাবে কাজ করে

রং বের করা পুরোপুরি আপনার ব্রাউজারে চলে, 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 নির্ধারিতভাবে centroid বসায়, তারপর অ্যালগরিদম সর্বোচ্চ 20 বার চলে: প্রতিটি পিক্সেল RGB স্পেসে তার নিকটতম centroid-এ যায়, তারপর বরাদ্দকৃত সব পিক্সেলের গড় হিসেবে centroid আবার হিসাব হয়। একই hex মানে মিলে যাওয়া ক্লাস্টার একত্র করা হয়, তাই ফলাফলের প্রতিটি সোয়াচ অনন্য।
3. 3
   প্রতিটি রঙের মেটাডেটা হিসাব হয়

   প্রতিটি centroid HEX, HSL এবং মোট পিক্সেলে তার অংশে (শতাংশ) রূপান্তর হয়। আদর্শ সূত্রে WCAG relative luminance হিসাব হয়, এবং প্রতিটি সোয়াচের পাশে কালো ও সাদা দুটোর বিপরীতে কনট্রাস্ট অনুপাত দেখানো হয়।
4. 4
   এক্সপোর্ট ও আইড্রপার আউটপুট

   প্যালেটটি CSS custom property, SCSS ভেরিয়েবল, Tailwind config স্নিপেট বা JSON হিসেবে কপি করা যায়। একটি ক্লিক-করে-তোলা আইড্রপার প্রিভিউতে আপনার ক্লিককে পূর্ণ-রেজোলিউশনের ক্যানভাসে উৎস পিক্সেলের সঠিক স্থানাঙ্কে ফিরিয়ে নেয়, সেই পিক্সেলের রং আলাদা একটি বাছাই করা রঙের তালিকায় যোগ করে। Canvas toBlob() দিয়ে একটি PNG প্যালেট স্ট্রিপ ডাউনলোড করা যায়।

সম্পর্কিত টুলস