Utiliome

ডমিন্যান্ট কালার এক্সট্রাক্টর

স্থানীয় K-Means ক্লাস্টারিং দিয়ে যেকোনো ইমেজের সঠিক ডমিন্যান্ট রং ও পিক্সেল কভারেজ শতাংশ (%) খুঁজুন, Primary/Secondary/Accent থিম রোল ও WCAG কনট্রাস্টসহ।

কোন আপলোডকোন সাইন আপব্যাচ প্রসেসিং
K-Means Pixel Coverage %Primary / Accent Theme PreviewHEX / RGB / HSL / JSONPNG Report Card
ডাউনলোড করুন
অফলাইন ইঞ্জিন প্রস্তুত100% ব্যক্তিগত ইন-ব্রাউজার ওয়ার্কস্পেস • জিরো ক্লাউড আপলোড
আপনার প্রয়োজন হতে পারে সরঞ্জাম

সম্পর্কিত সরঞ্জাম

কালার প্যালেট বের করুন

যেকোনো ইমেজ থেকে সুরেলা ৫–১২ রঙের প্যালেট অনলাইনে বের করুন। আইড্রপারে পিক্সেল ক্লিক করে HEX, RGB, HSL, CSS, Tailwind বা PNG এক্সপোর্ট করুন।

অ্যাক্সেসিবল কালার চেকার

WCAG 2.1 কনট্রাস্ট কমপ্লায়েন্স চেক করুন, বর্ণান্ধতা অনুকরণ করুন এবং অ্যাক্সেসযোগ্য রঙ জোড়া আবিষ্কার করুন।

কালার প্যালেট জেনারেটর

আপনার পরবর্তী UI প্রকল্পের জন্য সুন্দর রঙ প্যালেট এবং গ্রেডিয়েন্ট তৈরি করুন, টুইক করুন এবং এক্সপোর্ট করুন।

ম্যাটেরিয়াল প্যালেট জেনারেটর

যে কোনো রঙ বা আপলোড করা ছবি থেকে মেটেরিয়াল ডিজাইন 3 এবং মেটেরিয়াল ডিজাইন 2 কালার প্যালেট, টোনাল শেড এবং UI প্রিভিউ তৈরি করুন।

CSS গ্র্যাডিয়েন্ট জেনারেটর

দৃশ্যত সুন্দর CSS গ্রেডিয়েন্ট তৈরি এবং কাস্টমাইজ করুন এবং কোডটি তাৎক্ষণিক কপি করুন।

ইমেজ সাইজ ইন্সপেক্টর

আপনার ব্রাউজারে সরাসরি চিত্রের মাত্রা, ফাইলের আকার এবং MIME প্রকার পরিদর্শন করুন।

১০০% প্রাইভেট • জিরো সার্ভার ফাইল আপলোড

Utiliome-এর K-Means ডমিন্যান্ট কালার ও কভারেজ অ্যানালাইজার কেন ব্যবহার করবেন?

কঠোর প্রাইভেসি, তাৎক্ষণিক এক্সিকিউশন ও জিরো ঘর্ষণের জন্য তৈরি। সাবস্ক্রিপশন, পেওয়াল বা অ্যাকাউন্ট রেজিস্ট্রেশন লাগে না।

সত্যিকারের K-Means পিক্সেল এরিয়া কভারেজ (%)

ইমেজ পিক্সেলকে k = 3, 5, 6 বা 8 স্ট্যাটিস্টিক্যাল ক্লাস্টারে ভাগ করে প্রতিটি ডমিন্যান্ট রঙের অস্বচ্ছ সারফেস এরিয়ার সঠিক শতাংশ (%) হিসাব করে।

লাইভ Primary / Secondary / Accent UI মকআপ

আপনার #1 ডমিন্যান্ট ব্যাকগ্রাউন্ড, #2 সেকেন্ডারি সারফেস ও সর্বোচ্চ-স্যাচুরেশন Accent হাইলাইট স্বয়ংক্রিয়ভাবে লাইভ UI কার্ড প্রিভিউতে বসায়, রিয়েল-টাইম WCAG 2.1 কনট্রাস্ট রেশিও স্কোরিংসহ।

আনুপাতিক স্ট্যাকড ডিস্ট্রিবিউশন বার

আনুপাতিক স্ট্যাকড শতাংশ বার দিয়ে ইমেজের ক্রোম্যাটিক ব্যালেন্স এক নজরে দেখুন এবং এক-ক্লিক HEX, RGB, HSL ও JSON কভারেজ রিপোর্ট নিন।

১০০% ব্যক্তিগত ব্রাউজার এক্সিকিউশন ও ব্যাচ ট্যাব

একাধিক প্রোডাক্ট ফটো, অ্যাপ স্ক্রিনশট বা ব্র্যান্ড ব্যানার স্থানীয় ব্রাউজার মেমোরিতে ক্রমান্বয়ে বিশ্লেষণ করুন এবং 1200×760 PNG Dominant Color Breakdown Report ডাউনলোড করুন।

Utiliome বনাম প্রচলিত ক্লাউড বিকল্প

আমাদের লোকাল-ফার্স্ট WebAssembly ইঞ্জিনকে পুরনো ক্লাউড টুলের সাথে তুলনা করুন।

ফিচার Utiliome (লোকাল ব্রাউজার) পুরনো ক্লাউড কনভার্টার
ক্লাস্টারিং ম্যাথ ও এরিয়া শেয়ার (%) প্রতি রঙের সঠিক % পিক্সেল কভারেজসহ ডিটারমিনিস্টিক K-Means++ ক্লাস্টারিং শতাংশ শেয়ার ডেটা ছাড়া বেসিক বাকেট রাউন্ডিং
UI থিম রোল ও WCAG কনট্রাস্ট প্রিভিউ Primary, Secondary ও Accent রোল স্বয়ংক্রিয় ম্যাপ + লাইভ WCAG কনট্রাস্ট রেশিও UI প্রসঙ্গ বা কনট্রাস্ট চেক ছাড়া কাঁচা কালার লিস্ট
স্ট্যাটিস্টিক্যাল JSON ও ভিজ্যুয়াল PNG রিপোর্ট এক-ক্লিক JSON রিপোর্ট (HEX, RGB, HSL, %, Role) + ডাউনলোডযোগ্য PNG চার্ট শুধু ম্যানুয়াল HEX কপি
ডেটা গোপনীয়তা ১০০% ক্লায়েন্ট-সাইড HTML5 ক্যানভাস হিসাব (সার্ভার আপলোড শূন্য) প্রোপ্রাইটারি ডিজাইন ও ফটো দূরবর্তী সার্ভারে আপলোড করে
কীভাবে কাজ করে

৩ সহজ ধাপে ডমিন্যান্ট রং ও পিক্সেল শেয়ার (%) কীভাবে খুঁজবেন

সফটওয়্যার ইনস্টল লাগে না। সবকিছু সরাসরি ওয়েব ব্রাউজারে চলে।

1

এক বা একাধিক ইমেজ ছাড়ুন

JPG, PNG, WebP, SVG বা AVIF ফাইল ওয়ার্কস্পেসে টেনে ছাড়ুন। স্বচ্ছ ব্যাকগ্রাউন্ড পিক্সেল স্বয়ংক্রিয়ভাবে বাদ পড়ে যাতে কভারেজ শতাংশ বিকৃত না হয়।

2

K-Means ক্লাস্টার সংখ্যা নির্বাচন করুন (k = 3, 5, 6 বা 8)

পরিষ্কার Primary/Secondary/Accent ব্রেকডাউনের জন্য k=3 বেছে নিন (60-30-10 নিয়ম), অথবা সূক্ষ্ম ক্রোম্যাটিক ডিস্ট্রিবিউশন অডিটের জন্য k=6 থেকে k=8 বেছে নিন।

3

HEX / JSON রিপোর্ট কপি করুন বা PNG ব্রেকডাউন ডাউনলোড করুন

যেকোনো ক্লাস্টার কার্ডে ক্লিক করে HEX কোড কপি করুন, পূর্ণ JSON শতাংশ রিপোর্ট কপি করুন, অথবা হাই-রেজোলিউশন PNG Dominant Color Report ডাউনলোড করুন।

K-Means++ কীভাবে ডমিন্যান্ট রং ও পিক্সেল শেয়ার (%) খুঁজে

দ্রুত উত্তর: ধারাবাহিক গ্রেডিয়েন্টকে ইচ্ছামতো বিনে ভাগ করা ফিক্সড গ্রিড কোয়ান্টাইজেশনের বিপরীতে K-Means++ 3D RGB স্পেসে পিক্সেলকে k প্রাকৃতিক সেন্ট্রয়েডের চারপাশে পুনরাবৃত্তভাবে গ্রুপ করে এবং প্রতিটি ক্লাস্টারের পিক্সেল সংখ্যাকে মোট অস্বচ্ছ পিক্সেল দিয়ে ভাগ করে সঠিক এরিয়া শেয়ার (%) হিসাব করে।

ব্র্যান্ড ব্যানার, UI স্ক্রিনশট বা প্রোডাক্ট ফটো বিশ্লেষণে কোন রং আছে জানা সমীকরণের অর্ধেক—প্রতিটি রঙের ভিজ্যুয়াল ওজন (% সারফেস এরিয়া) কত তাও জানা দরকার।

Utiliome-এর Dominant Color Extractorআপনার ব্রাউজারে সরাসরি ৮-ইটারেশন ডিটারমিনিস্টিকK-Means++ ক্লাস্টারিং পাইপলাইন চালায়:

  1. আলফা-সচেতন পিক্সেল ফিল্টারিং: স্বচ্ছ ব্যাকগ্রাউন্ড পিক্সেল (alpha < 128 PNG, WebP বা SVG কাটাউটে) ক্লাস্টারিংয়ের আগে সরানো হয় যাতে স্বচ্ছ জায়গা কখনো কালো (#000000) বা সাদা (#FFFFFF) হিসেবে ভুল গোনা না হয়।
  2. K-Means++ স্প্রেড ইনিশিয়ালাইজেশন: শুরুর সিডগুলোর মধ্যে স্কোয়ার্ড ইউক্লিডিয়ান দূরত্ব (d² = ΔR² + ΔG² + ΔB²) সর্বোচ্চ করে k প্রাথমিক সেন্ট্রয়েড সিড করে, একই ফাইল ছাড়লে প্রতিবার ডিটারমিনিস্টিক, পুনরাবৃত্তিযোগ্য ফলাফল নিশ্চিত করে।
  3. সেন্ট্রয়েড কনভারজেন্স ও রোল শ্রেণিবিন্যাস:পিক্সেল শেয়ার (%) অনুযায়ী কনভার্জড ক্লাস্টার র‍্যাঙ্ক করেPrimary Dominantসারফেস,Secondary Toneএবং সর্বোচ্চ-ক্রোমাAccent Highlight শনাক্ত করে।

৬০-৩০-১০ ডিজাইন নিয়ম অডিট ও ডমিন্যান্ট রং দিয়ে ডায়নামিক UI থিমিং

দ্রুত উত্তর: ক্লাস্টার সংখ্যা k = 3 সেট করলে ডিজাইনার ও ডেভেলপাররা লেআউট, ইলাস্ট্রেশন বা রুম ফটো ক্লাসিক ৬০-৩০-১০ কালার অনুপাত মেনে চলে কিনা অডিট করতে পারেন—এবং সেই রংগুলো লাইভ UI কার্ড থিম হিসেবে WCAG কনট্রাস্ট স্কোরিংসহ কেমন কাজ করে তা প্রিভিউ করেন।

UI/UX ইঞ্জিনিয়ারিং, ইন্টেরিয়র ডিজাইন ও ব্র্যান্ড আইডেন্টিটি সিস্টেমে ভারসাম্যপূর্ণ কম্পোজিশন সাধারণত ৬০-৩০-১০ নিয়ম মেনে চলে:

ক্লাস্টার র‍্যাঙ্ক লক্ষ্য এরিয়া শেয়ার ডিজাইন সিস্টেম রোল ও Utiliome লাইভ প্রিভিউ ম্যাপিং
#1 Primary Dominant ~55% – 65% ব্যাকগ্রাউন্ড / ক্যানভাস সারফেস: Live Theme Preview কার্ডে সামগ্রিক লুমিন্যান্স মুড (ডার্ক মোড বনাম লাইট মোড) সেট করে
#2 Secondary Tone ~25% – 35% কার্ড, নেভিগেশন ও কন্টেইনার: প্রাথমিক ব্যাকগ্রাউন্ডকে সমর্থন করে মনোযোগ কেড়ে না নিয়ে
#3 Accent Highlight ~5% – 15% কল-টু-অ্যাকশন (CTA) বাটন ও ব্যাজ: সর্বোচ্চ HSL স্যাচুরেশন (S%) বিশিষ্ট ক্লাস্টার থেকে স্বয়ংক্রিয় নির্বাচিত এবং Primary Dominant রঙের বিপরীতে WCAG 2.1 কনট্রাস্ট পরীক্ষিত

Dominant Color Extractor বনাম Extract Color Palette: সঠিক টুল বেছে নেওয়া

দ্রুত উত্তর: স্ট্যাটিস্টিক্যাল K-Means পিক্সেল শতাংশ (%), ৬০-৩০-১০ অনুপাত অডিট এবং লাইভ Primary/Secondary/Accent UI থিম প্রিভিউ লাগলে Dominant Color Extractor ব্যবহার করুন। বৈচিত্র্যময় ৫–১২ সোয়াচ ক্রিয়েটিভ প্যালেট, মুড ফিল্টার ও ক্লিক-টু-পিক পিক্সেল আইড্রপার চাইলে Extract Color Palette ব্যবহার করুন।

স্ট্যাটিস্টিক্যাল এরিয়া পরিমাপনাক্রিয়েটিভ সোয়াচ কিউরেশন দরকার তার ভিত্তিতে আমাদের দুটি পরিপূরক কালার টুল বেছে নিন:

ওয়ার্কফ্লো প্রয়োজন Dominant Color Extractor (এই টুল) Extract Color Palette
সঠিক পিক্সেল কভারেজ % ও স্ট্যাকড বার হ্যাঁ (k = 3, 5, 6, 8 K-Means ক্লাস্টার % শেয়ারসহ) না (এরিয়া শেয়ারের চেয়ে সোয়াচ বৈচিত্র্য অপটিমাইজ করে)
লাইভ Primary / Secondary / Accent UI কার্ড + WCAG কনট্রাস্ট হ্যাঁ (রিয়েল-টাইম কনট্রাস্ট রেশিও ব্যাজ) না (ইউনিফর্ম সোয়াচ স্ট্রিপ রেন্ডার করে)
ইন্টারঅ্যাকটিভ ক্লিক-অন-ইমেজ পিক্সেল আইড্রপার স্বয়ংক্রিয় সেন্ট্রয়েড ক্লাস্টারিং হ্যাঁ (যেকোনো পিক্সেল ক্লিক করে স্যাম্পল ও পিন)
মুড ফিল্টার (Vibrant / Pastel / Warm / Cool) ও CSS/Tailwind JSON % রিপোর্ট ও PNG Breakdown চার্ট এক্সপোর্ট করে হ্যাঁ(:root CSS ভেরিয়েবল, Tailwind কনফিগ ও PNG Swatch Card এক্সপোর্ট)
FAQ

ডমিন্যান্ট কালার এক্সট্রাক্টর FAQ ও K-Means ক্লাস্টারিং গাইড

Utiliome-এর ফ্রি অনলাইন ডমিন্যান্ট কালার এক্সট্রাক্টর ব্যবহার নিয়ে যা জানা দরকার।

ডমিন্যান্ট কালার শতাংশ (%) কীভাবে হিসাব হয়?

Utiliome আপনার ইমেজের সব অস্বচ্ছ পিক্সেলে (স্বচ্ছ PNG/WebP/SVG পিক্সেল উপেক্ষা করে) K-Means++ ক্লাস্টারিং চালায়। প্রতিটি পিক্সেল নিকটতম RGB ক্লাস্টার সেন্ট্রয়েডে যায় এবং প্রতিটি ক্লাস্টারের পিক্সেল সংখ্যা মোট অস্বচ্ছ পিক্সেল দিয়ে ভাগ করে সঠিক এরিয়া শতাংশ পাওয়া যায়।

স্বচ্ছ PNG ব্যাকগ্রাউন্ড কি ডমিন্যান্ট কালার ফলাফলকে প্রভাবিত করে?

না। ৫০%-এর নিচে আলফা ভ্যালুর যেকোনো পিক্সেল (alpha < 128) K-Means ক্লাস্টারিং শুরুর আগে বাদ পড়ে, তাই লোগো, প্রোডাক্ট কাটাউট বা আইকনের চারপাশের স্বচ্ছ এলাকা ডমিন্যান্ট কালার শতাংশ কখনো বিকৃত করে না।

৬০-৩০-১০ কালার নিয়ম চেক করতে সেরা K-Means ক্লাস্টার সংখ্যা (k) কত?

সাইডবারে 'k=3' নির্বাচন করুন। ইমেজকে ৩টি ডমিন্যান্ট ক্লাস্টারে ভাগ করলেই Primary, Secondary ও Accent শতাংশ স্প্লিট দেখা যায়, কম্পোজিশন ৬০% / ৩০% / ১০% ডিজাইন অনুপাতের কত কাছাকাছি তা বোঝা যায়।

লাইভ Dominant Theme Preview Accent রং কীভাবে বেছে নেয়?

পিক্সেল শেয়ার অনুযায়ী #1 ক্লাস্টার Primary Dominant ব্যাকগ্রাউন্ড এবং #2 Secondary সারফেস হয়; Utiliome বাকি ক্লাস্টারের HSL স্যাচুরেশন মূল্যায়ন করে সবচেয়ে উজ্জ্বল, হাই-ক্রোমা ক্লাস্টারকে Accent CTA হাইলাইট করে—তারপর তাদের মধ্যে WCAG 2.1 কনট্রাস্ট রেশিও হিসাব করে।

Dominant Color Extractor বনাম Extract Color Palette কখন ব্যবহার করব?

স্ট্যাটিস্টিক্যাল পিক্সেল কভারেজ শতাংশ (%), K-Means ক্লাস্টারিং ও UI থিম কনট্রাস্ট প্রিভিউ লাগলে Dominant Color Extractor ব্যবহার করুন। আইড্রপার দিয়ে ম্যানুয়ালি পিক্সেল স্যাম্পল, Pastel/Vibrant/Warm/Cool মুড ফিল্টার বা CSS/Tailwind ভেরিয়েবল কপি করতে চাইলে Extract Color Palette ব্যবহার করুন।

কালার অ্যানালাইসিসের সময় আমার ইমেজ কি কোনো ক্লাউড সার্ভারে আপলোড হয়?

কখনো না। সব ইমেজ ডিকোডিং, K-Means ক্লাস্টারিং গণিত এবং PNG রিপোর্ট জেনারেশন ১০০% আপনার ওয়েব ব্রাউজারে স্থানীয়ভাবে চলে।