Utiliome

ইমেজ থেকে কালার প্যালেট বের করুন

যেকোনো ফটো বা ইলাস্ট্রেশন থেকে সুরেলা ৫–১২ রঙের প্যালেট বের করুন, ইন্টারঅ্যাকটিভ আইড্রপারে সঠিক পিক্সেল স্যাম্পল করুন এবং CSS ভেরিয়েবল, Tailwind টোকেন বা PNG সোয়াচ কার্ড এক্সপোর্ট করুন।

কোন আপলোডকোন সাইন আপব্যাচ প্রসেসিং
5–12 Harmonious SwatchesClick-to-Pick EyedropperHEX / RGB / HSL / CSS / TailwindPNG Palette Card Export
ডাউনলোড করুন
অফলাইন ইঞ্জিন প্রস্তুত100% ব্যক্তিগত ইন-ব্রাউজার ওয়ার্কস্পেস • জিরো ক্লাউড আপলোড
আপনার প্রয়োজন হতে পারে সরঞ্জাম

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

প্রধান রং এক্সট্র্যাক্টর

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

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

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

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

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

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

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

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

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

SVG থেকে PNG কনভার্ট করুন

তাৎক্ষণিক আপনার ব্রাউজারে সরাসরি আপনার SVG ভেক্টর ছবিগুলিকে উচ্চ-মানের PNG ফর্ম্যাটে রূপান্তর করুন।

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

Utiliome-এর ইমেজ কালার প্যালেট এক্সট্রাক্টর ও আইড্রপার কেন ব্যবহার করবেন?

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

পারসেপচুয়াল দূরত্ব ও হারমনি ফিল্টারিং

পারসেপচুয়াল RGB দূরত্ব ফিল্টারিং দিয়ে ৫, ৬, ৮ বা ১২টি স্বতন্ত্র কালার সোয়াচ বের করে যাতে প্যালেটে হাইলাইট, মিডটোন ও শ্যাডো থাকে, কাছাকাছি ডুপ্লিকেট সোয়াচ ছাড়া।

ইন্টারঅ্যাকটিভ ক্লিক-অন-ইমেজ আইড্রপার

আপলোড করা ফটোর যেকোনো জায়গায় ক্লিক করে সেই পিক্সেলের সঠিক HEX/RGB/HSL মান স্যাম্পল করুন, প্যালেটের সামনে পিন করুন এবং ক্লিপবোর্ডে কপি করুন।

মুড প্রিসেট (Vibrant, Pastel, Warm, Cool)

HSL স্যাচুরেশন, লাইটনেস ও হিউ অ্যাঙ্গেল দিয়ে এক্সট্রাক্টেড ইমেজ রং ফিল্টার করে একই সোর্স ফটো থেকে Vibrant, Soft Pastel, Warm বা Cool ডিজাইন স্কিম তৈরি করুন।

১-ক্লিক CSS, Tailwind, JSON ও PNG সোয়াচ কার্ড

এক ক্লিকে :root CSS কাস্টম প্রপার্টি, Tailwind colors অবজেক্ট বা JSON অ্যারে কপি করুন, অথবা ফটো ও HEX কোডসহ হাই-রেজোলিউশন 1200×800 PNG Palette Card ডাউনলোড করুন।

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

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

ফিচার Utiliome (লোকাল ব্রাউজার) পুরনো ক্লাউড কনভার্টার
ইন্টারঅ্যাকটিভ পিক্সেল আইড্রপার ইমেজ ক্যানভাসের যেকোনো জায়গায় ক্লিক করে সঠিক পিক্সেল রং স্যাম্পল ও পিন করুন ম্যানুয়াল পিক্সেল পিকিং ছাড়া ফিক্সড অটো-জেনারেটেড সোয়াচ
হারমনি ও মুড ফিল্টারিং ৫–১২ সোয়াচ + Balanced, Vibrant, Pastel, Warm ও Cool HSL ফিল্টার ৫টি স্ট্যাটিক সোয়াচ যা প্রায়ই কাদাটে ব্যাকগ্রাউন্ড গ্রে পুনরাবৃত্ত করে
ডেভেলপার ও ডিজাইনার এক্সপোর্ট HEX, RGB, HSL + CSS :root ভেরিয়েবল, Tailwind কনফিগ, JSON ও PNG কার্ড ম্যানুয়াল এক-এক করে HEX কপি বা পেওয়ালেড এক্সপোর্ট
গোপনীয়তা ও গতি ১০০% ক্লায়েন্ট-সাইড HTML5 ক্যানভাস এক্সট্রাকশন (সার্ভার আপলোড শূন্য) মুডবোর্ড ও প্রাইভেট ক্লায়েন্ট অ্যাসেট ক্লাউড সার্ভারে আপলোড করে
কীভাবে কাজ করে

৩ সহজ ধাপে ইমেজ থেকে কালার প্যালেট কীভাবে বের করবেন

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

1

এক বা একাধিক ফটো বা ইলাস্ট্রেশন ছাড়ুন

যেকোনো JPG, PNG, WebP, SVG বা AVIF ইমেজ ড্রপজোনে টেনে ছাড়ুন। Utiliome পিক্সেল আপনার ব্রাউজারের RAM-এ স্থানীয়ভাবে ডিকোড করে।

2

সোয়াচ সংখ্যা, মুড বেছে নিন ও কাস্টম পিক্সেল পিক করুন

৫, ৬, ৮ বা ১২ সোয়াচ নির্বাচন করুন, Palette Mood (Balanced, Vibrant, Pastel, Warm বা Cool) দিয়ে ফিল্টার করুন, অথবা নির্দিষ্ট অ্যাকসেন্ট পিক্সেল পিন করতে ইমেজে সরাসরি ক্লিক করুন।

3

HEX / CSS / Tailwind কপি করুন বা PNG কার্ড ডাউনলোড করুন

যেকোনো সোয়াচে ক্লিক করে HEX, RGB বা HSL কোড কপি করুন, সাইডবারে :root CSS ভেরিয়েবল বা Tailwind টোকেন এক্সপোর্ট করুন, অথবা শেয়ারযোগ্য PNG Palette Card ডাউনলোড করুন।

পারসেপচুয়াল কালার কোয়ান্টাইজেশন কীভাবে ফটো থেকে সুরেলা প্যালেট তৈরি করে

দ্রুত উত্তর: সরল পিক্সেল গণনা প্রায়ই আকাশ নীল বা শ্যাডো গ্রের ৬টি প্রায় একই শেড ফেরায়। Utiliome 3D RGB হিস্টোগ্রাম বিনিংকে ইউক্লিডিয়ান পারসেপচুয়াল দূরত্ব ফিল্টারিং (ΔRGB >= 34) ও HSL মুড কনস্ট্রেইন্টের সাথে মিলিয়ে প্যালেটের প্রতিটি সোয়াচ ভিজ্যুয়ালি স্বতন্ত্র রাখে।

একটি ফটোতে ১.২ কোটি পিক্সেল থাকলে সেগুলোর ৭০%-এর বেশি প্রায়ই একটি ব্যাকগ্রাউন্ড গ্রেডিয়েন্টের (যেমন নীল আকাশ, গাঢ় স্টুডিও ব্যাকড্রপ বা পাতা)। সাধারণ ফ্রিকোয়েন্সি সর্ট একঘেয়ে প্যালেট দেয় যা কম্পোজিশনকে জীবন্ত করা ৩% উজ্জ্বল ফোকাল অ্যাকসেন্ট মিস করে।

Utiliome-এর Harmonious Palette Engine এটি তিন ধাপে সমাধান করে:

  1. সাব-স্যাম্পলড ২৪-স্টেপ স্পেশিয়াল কোয়ান্টাইজেশন: নরমালাইজড ক্যানভাস গ্রিড জুড়ে অস্বচ্ছ পিক্সেল (alpha >= 128) স্যাম্পল করে প্রতিটি ক্লাস্টার বিনে সত্যিকারের RGB মান গড় করে যাতে আউটপুট সোয়াচ কৃত্রিম গ্রিড মিডপয়েন্ট নয়, আসল ফটোগ্রাফিক টোন প্রতিফলিত করে।
  2. HSL মুড ও ক্রোমা ফিল্টারিং:ক্যান্ডিডেট বিনকে Hue (0°–360°), Saturation (0%–100%) এবং Lightness (0%–100%)-এ রূপান্তর করেVibrant(S >= 35%),Soft Pastel(L >= 60%, S <= 75%),Warm(H <= 70° বা H >= 310°) অথবাCool (70° < H < 310°) হারমনি আলাদা করতে দেয়।
  3. ন্যূনতম ইউক্লিডিয়ান কালার দূরত্ব (ΔE / ΔRGB গার্ডরেল): নির্বাচিত সোয়াচগুলোর মধ্যে ন্যূনতম 3D RGB ভেক্টর পৃথকীকরণ জোর করে যাতে হাইলাইট, মিডটোন ও অ্যাকসেন্ট সব উপস্থাপিত হয়।

প্যালেট এক্সপোর্ট: CSS ভেরিয়েবল, Tailwind ও ডিজাইন কার্ড

দ্রুত উত্তর: অন-ক্যানভাস আইড্রপার দিয়ে প্যালেট বের বা ফাইন-টিউন করার পর তাৎক্ষণিক CSS :root ভেরিয়েবল, Tailwind theme.extend.colors অবজেক্ট, স্ট্রাকচার্ড JSON অ্যারে বা 1200×800 PNG প্রেজেন্টেশন কার্ড হিসেবে এক্সপোর্ট করতে পারেন।

ভিজ্যুয়াল অনুপ্রেরণা থেকে ফ্রন্ট-এন্ড কোড বা ক্লায়েন্ট মুডবোর্ডে যাওয়ায় ছয়টি হেক্স কোড এক-এক করে কপি-পেস্ট করা উচিত নয়:

এক্সপোর্ট টার্গেট আউটপুট ফরম্যাট সেরা ওয়ার্কফ্লো ব্যবহার
আলাদা সোয়াচ ক্লিক #HEX, rgb(r, g, b), বা hsl(h, s%, l%) Figma, Photoshop, Canva বা Illustrator-এ একক রং পেস্ট
CSS ভেরিয়েবল (:root) --palette-1: #...; --palette-2: #...; ভ্যানিলা CSS, Astro, Svelte এবং Web Components থিমিং
Tailwind CSS কনফিগ colors: { "brand-100": "#...", ... } সরাসরি tailwind.config.mjs বা @theme ব্লকে ড্রপ
PNG Palette Swatch Card 1200 × 800 px হাই-রেজ PNG, ফটো + HEX লেবেলসহ Slack, Notion, পিচ ডেক ও ব্র্যান্ড গাইডলাইনে মুডবোর্ড শেয়ার

Extract Color Palette বনাম Dominant Color Extractor: কোন টুল ব্যবহার করবেন?

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

Utiliome ভিন্ন ক্রিয়েটিভ ও ইঞ্জিনিয়ারিং কাজের জন্য দুটি বিশেষায়িত ইমেজ কালার অ্যানালাইসিস টুল দেয়:

ফিচার / লক্ষ্য Extract Color Palette (এই টুল) Dominant Color Extractor
মূল অ্যালগরিদম পারসেপচুয়াল দূরত্ব বৈচিত্র্য + HSL মুড ফিল্টারিং (Balanced, Vibrant, Pastel, Warm, Cool) আনসুপারভাইজডK-Means ক্লাস্টারিং (k = 3..8) সঠিক পিক্সেল এরিয়া কভারেজ % পরিমাপ করে
ম্যানুয়াল পিক্সেল আইড্রপার ফটোর যেকোনো জায়গায় ক্লিক করে সঠিক পিক্সেল রং স্যাম্পল ও পিন স্বয়ংক্রিয় স্ট্যাটিস্টিক্যাল ক্লাস্টার সেন্ট্রয়েড
প্রাথমিক আউটপুট ৫–১২ সুরেলা সোয়াচ + CSS :root / Tailwind কনফিগ + PNG Swatch Card র‍্যাঙ্কড % কভারেজ বার চার্ট + Primary/Secondary/Accent UI কার্ড প্রিভিউ + WCAG কনট্রাস্ট রেশিও
সেরা ব্যবহার গ্রাফিক ডিজাইনার, ইলাস্ট্রেটর, ব্র্যান্ড মুডবোর্ড এবং CSS/Tailwind প্যালেট তৈরি UI/UX ডায়নামিক থিমিং, প্রোডাক্ট ফটোগ্রাফি ব্যাকগ্রাউন্ড অডিট এবং কালার ডিস্ট্রিবিউশন অ্যানালাইসিস
FAQ

ইমেজ কালার প্যালেট এক্সট্রাক্টর FAQ ও ডিজাইন টোকেন গাইড

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

ইমেজের ছোট বিস্তারিত থেকে নির্দিষ্ট রং কীভাবে পিক করব?

এডিটর ক্যানভাসের ভিতরে ইমেজের সেই অংশে সরাসরি ক্লিক করুন! বিল্ট-ইন আইড্রপার কার্সারের নিচের সঠিক 1×1 পিক্সেল স্যাম্পল করে, প্যালেটের প্রথম সোয়াচ হিসেবে পিন করে এবং কালার কোড ক্লিপবোর্ডে কপি করে।

Balanced, Vibrant এবং Pastel মুড ফিল্টারের পার্থক্য কী?

Balanced Full পুরো লাইটনেস ও স্যাচুরেশন স্পেকট্রাম জুড়ে সবচেয়ে প্রতিনিধিত্বমূলক স্বতন্ত্র রং বের করে। Vibrant মিউট গ্রে ও কাছাকাছি-কালো/সাদা বাদ দেয় (স্যাচুরেশন >= 35% চায়), আর Soft Pastel উচ্চ-লাইটনেসের নরম টোনকে অগ্রাধিকার দেয়।

এক্সট্রাক্টেড প্যালেট সরাসরি Tailwind CSS বা CSS ভেরিয়েবলে এক্সপোর্ট করা যায়?

হ্যাঁ। ডান সাইডবারে '3. Code Format & Copy Export'-এর নিচে 'Copy CSS Variables (:root)' বা 'Copy Tailwind Config' ক্লিক করে প্যালেটের সব সোয়াচসহ পেস্ট-রেডি কোড ব্লক কপি করুন।

'Download PNG Palette Card' কী তৈরি করে?

এটি পরিষ্কার 1200×800px প্রেজেন্টেশন কার্ড রেন্ডার করে—গাঢ় স্টুডিও ক্যানভাসে আপলোড করা আর্টওয়ার্কের নিচে গোলাকার কালার সোয়াচ সারি, সঠিক HEX কোড লেবেলসহ—ক্লায়েন্ট ডেক, Notion ডক বা সোশ্যাল পোস্টে ড্রপ করার জন্য প্রস্তুত।

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

অনুপ্রেরণামূলক ৫–১২ সোয়াচ ডিজাইন স্কিম, মুড ফিল্টারিং ও ইন্টারঅ্যাকটিভ আইড্রপার চাইলে Extract Color Palette ব্যবহার করুন। K-Means দিয়ে প্রতিটি কালার ক্লাস্টার ইমেজের কত স্ট্যাটিস্টিক্যাল শতাংশ (%) ঢেকেছে জানতে চাইলে Dominant Color Extractor ব্যবহার করুন।

রং বের করতে আমার আপলোড করা ফটো কি সার্ভারে পাঠানো হয়?

কখনো না। সব পিক্সেল স্যাম্পলিং, হিস্টোগ্রাম কোয়ান্টাইজেশন এবং PNG কার্ড রেন্ডারিং HTML5 Canvas 2D API দিয়ে ১০০% আপনার ব্রাউজারে স্থানীয়ভাবে হয়।