ইমেজ কালার পিকার
নতুনছবি থেকে যেকোনো রং বেছে নিন এবং এর প্রধান প্যালেট HEX, RGB ও HSL হিসেবে বের করুন।
Hover the image and click
to pick a color.
Picked colors (click to copy)
Dominant palette
Runs entirely in your browser. Nothing is uploaded.
যেকোনো ছবি থেকে রং বেছে নিন — HEX, RGB এবং HSL
এই ফ্রি ইমেজ কালার পিকার যেকোনো ছবিকে একটি ক্লিকযোগ্য কালার সোর্সে পরিণত করে দেয়: একটি ফটো, স্ক্রিনশট বা লোগো ড্রপ করুন (অথবা Ctrl+V দিয়ে পেস্ট করুন), হোভার করে একটি ম্যাগনিফায়েড পিক্সেল লুপ দেখুন, এবং ক্লিক করে ঠিক সেই HEX কোড, RGB ও HSL ভ্যালু পেয়ে যান — সঙ্গে সঙ্গে আপনার ক্লিপবোর্ডে কপি হয়ে যায়। একটি পিক হিস্ট্রি আপনার শেষ ১৬টি রং জমিয়ে রাখে, তাই একই ছবি থেকে একাধিক শেড তুলে নিতে পারবেন।
ছবিটি আপনার ব্রাউজারের canvas API দিয়ে পড়া হয় এবং কখনও কোথাও পাঠানো হয় না। তাই এটি অপ্রকাশিত ডিজাইন, ক্লায়েন্ট লোগো এবং স্পর্শকাতর কাজের জন্য নিরাপদ — imagecolorpicker.com-এর মতো নয়, যেটি আপনার ফাইল সার্ভারে আপলোড করে দেয়। কোনো সাইনআপ নেই, কোনো অ্যাকাউন্ট নেই, কাজের মাঝে বিরক্তিকর বিজ্ঞাপনও নেই।
পিক্সেল-পারফেক্ট পিকের জন্য একটি ম্যাগনিফায়ার লুপ
সঠিক পিক্সেলে ক্লিক করাটাই গুরুত্বপূর্ণ — অ্যান্টি-অ্যালিয়াসড প্রান্ত, গ্রেডিয়েন্ট এবং টেক্সট সবই মাঝামাঝি শেডে ভরা থাকে। হোভার করলে ভেসে ওঠা লুপ আপনার কার্সারের চারপাশের পিক্সেলগুলো বড় করে দেখায়, ঠিক যে পিক্সেলটি স্যাম্পল করতে যাচ্ছেন তার ওপর একটি ক্রসহেয়ার সহ — যাতে আপনি নিখুঁতভাবে ছবি থেকে রং বের করতে পারেন: একটি বাটনের সমতল ফিল, তার ঝাপসা প্রান্ত নয়; লোগোর নিরেট অংশ, কোনো JPEG কম্প্রেশন আর্টিফ্যাক্ট নয়।
ছবিগুলো পূর্ণ পিক্সেল বিশ্বস্ততায় রাখা হয় (বড় ছবি শুধু প্রদর্শনের জন্য স্কেল হয়), এবং আপনি কার্সার সরানোর সাথে সাথেই প্রতিটি ভ্যালু লাইভ আপডেট হয়। ক্লিক করলেই হেক্স কোড আপনার ক্লিপবোর্ডে চলে যায়।
স্বয়ংক্রিয় কালার প্যালেট এক্সট্র্যাকশন
একক-পিক্সেল পিকিং এর পাশাপাশি, টুলটি ছবির ডমিনেন্ট কালার প্যালেট স্বয়ংক্রিয়ভাবে বের করে দেয় — আটটি সোয়াচ, ছবিতে তাদের অংশ অনুযায়ী র্যাঙ্ক করা এবং প্রতিটিতে হেক্স কোড লেবেল করা। একটি ফটোকে কালার স্কিমে রূপান্তরিত করার এটাই দ্রুততম উপায়: ব্র্যান্ড মুডবোর্ড, হিরো ইমেজ থেকে ওয়েব থিম, ইনস্পিরেশন ফটো থেকে ইন্টেরিয়র প্যালেট।
এক্সট্র্যাকশনটি পিক্সেলগুলোকে ক্লাস্টারে ভাগ করে প্রতিটি ক্লাস্টারের গড় বের করে, তাই সোয়াচগুলো ছবির প্রকৃত চরিত্রই প্রতিফলিত করে, আউটলায়ার পিক্সেল নয়। যেকোনো সোয়াচে ক্লিক করে কপি করুন, বা একবারে পুরো তালিকার জন্য 'Copy all' ব্যবহার করুন — CSS ভ্যারিয়েবল, ডিজাইন ডকুমেন্ট বা নোটে পেস্ট করার জন্য প্রস্তুত।
EyeDropper API দিয়ে আপনার স্ক্রিন থেকে পিক করুন
সেভ করা কোনো ছবিতে নেই এমন একটি রং দরকার — একটি লাইভ ওয়েবসাইট, অন্য কোনো অ্যাপ, ভিডিওর একটি ফ্রেম? Pick from screen বাটনটি আপনার ব্রাউজারের নেটিভ EyeDropper খুলে দেয় (Chrome ও Edge-এ), যা দিয়ে আপনার ডিসপ্লের যেকোনো জায়গা থেকে যেকোনো পিক্সেল স্যাম্পল করা যায়। পিক করা রংটি ছবি থেকে পিক করা রঙের মতোই একই HEX/RGB/HSL প্যানেল ও হিস্ট্রিতে জমা হয়।
যেসব ব্রাউজারে এই API নেই (Safari, Firefox), সেখানে পেস্ট ওয়ার্কফ্লো কাজে দেয়: PrtScn (বা Mac-এ Cmd+Shift+4) চেপে, তারপর সরাসরি এই পেজে Ctrl+V করুন — ফাইল সেভ করার দরকার নেই। এই প্যাটার্নটি ব্রাউজারে খোলা PDF বা ভিডিও ফ্রেম থেকে স্যাম্পলিংয়েও কাজ করে।
imagecolorpicker.com, Adobe Color এবং Canva-এর সাথে তুলনা
imagecolorpicker.com সবচেয়ে জনপ্রিয় বিকল্প এবং একই ধরনের ফিচার দেয়, কিন্তু প্রতিবার আপনার ছবি সার্ভারে আপলোড করে এবং বিজ্ঞাপন দেখায়। Adobe Color ফটো থেকে প্যালেট বের করে কিন্তু Adobe অ্যাকাউন্ট প্রয়োজন, ছবি Adobe-এর সার্ভারে পাঠায়, এবং জুম লুপসহ একক-পিক্সেল পিকিং দেয় না — এটি একটি প্যালেট টুল, আইড্রপার নয়। Adobe-এর পেইড টুল (Photoshop, Illustrator) নিখুঁত আইড্রপার পিকিং দেয় বটে, কিন্তু মাসে প্রায় $২০ থেকে শুরু হওয়া সাবস্ক্রিপশন প্রয়োজন।
Canva-এর কালার পিকার শুধু Canva প্রজেক্টে থাকা ছবিতেই কাজ করে। macOS Digital Color Meter এবং Windows PowerToys Color Picker স্ক্রিন-লেভেল টুল যা ডেস্কটপের যেকোনো জায়গায় কাজ করে কিন্তু ফাইল থেকে প্যালেট বের করে না। Coolors.co ছবি থেকে প্যালেট বানাতে পারে কিন্তু ফাইল তাদের সার্ভারে পাঠায়। এই টুলটি জুম লুপ, প্যালেট এক্সট্র্যাকশন, স্ক্রিন আইড্রপার, ১৬-রঙের হিস্ট্রি, HEX/RGB/HSL আউটপুট এবং ক্লিক-এ-কপি একত্র করে — সবকিছুই ক্লায়েন্ট-সাইডে, ফ্রি এবং বিজ্ঞাপনহীন।
ডিজাইনার ও ডেভেলপারদের জন্য তৈরি
প্রতিটি আউটপুট আপনার প্রয়োজনীয় ফরম্যাটে এক ক্লিকেই ক্লিপবোর্ডে চলে আসে: CSS ও Tailwind-এর জন্য HEX, canvas ও কোডের জন্য RGB, নিয়মতান্ত্রিক প্যালেট টুইকিংয়ের জন্য HSL। একটি ব্র্যান্ড কালার পেয়েছেন? UtiloKit-এর সহযোগী টুলগুলো এগিয়ে নিয়ে যায় — Contrast Checker-এ টেক্সট রঙের বিপরীতে যাচাই করুন, Color Palette Generator-এ হারমনি বানান, বা Color Mixer-এ মিশিয়ে দেখুন।
পুরো টুলটি ক্লায়েন্ট-সাইড হওয়ায় দ্রুত লোড হয়, পেজ খোলার পর অফলাইনেও কাজ করে, এবং কখনও আপনার ছবিকে বিজ্ঞাপনের জিম্মায় রাখে না। ড্রপ করুন, ক্লিক করুন, কপি করুন — পুরো ওয়ার্কফ্লো এটাই। মোবাইলে, একটি পিক্সেল স্যাম্পল করতে ট্যাপ করুন, এবং ঘন কোনো ছবিতে নিখুঁত জায়গায় পৌঁছাতে প্রথমে পিঞ্চ-জুম করুন।
কালার মডেল ব্যাখ্যা: RGB, HSL, HSV এবং তারও বাইরে
RGB একটি অ্যাডিটিভ কালার মডেল — এটি আলো অনুকরণ করে। তিনটি চ্যানেলই ০ হলে খাঁটি কালো (কোনো আলো নেই), এবং সবগুলো ২৫৫ হলে সাদা (প্রতিটি চ্যানেলে পূর্ণ তীব্রতা)। এটিই স্ক্রিনের নেটিভ মডেল, এবং ব্রাউজার canvas ঠিক এটিই দেখায়। CMYK এর বিপরীত: কালির জন্য একটি সাবট্র্যাক্টিভ মডেল, যেখানে 0,0,0,0 সাদা কাগজ এবং 0,0,0,100 (১০০% কালো কালি) কালো। ওয়েব কালার পিক করার পর সেটি প্রিন্ট শপে দিতে চাইলে CMYK-এ সঠিকভাবে রূপান্তর করতে একটি কালার-ম্যানেজড ওয়ার্কফ্লো দরকার — সরল সূত্র নয় — কারণ কাগজে কালি আর স্ক্রিনের আলো ভিন্ন গ্যামুট আচ্ছাদন করে।
HSL (Hue 0–৩৬০°, Saturation 0–১০০%, Lightness 0–১০০%) একই RGB পয়েন্টকে এমন একটি রূপে প্রকাশ করে যা ডিজাইনারদের চিন্তাভাবনার সাথে মেলে। Lightness ৫০% একটি 'খাঁটি' রং; এটি বাড়ালে টিন্ট আর কমালে শেড পাওয়া যায়, hue স্পর্শ না করেই। HSV/HSB (Hue, Saturation, Value/Brightness) একই hue অক্ষ ব্যবহার করে কিন্তু Lightness-এর বদলে Value রাখে — যেখানে Value ১০০% একটি hue-এর সবচেয়ে উজ্জ্বল রূপ (সাদা নয়)। Photoshop-এর কালার পিকার HSB ব্যবহার করে; CSS ব্যবহার করে HSL। পার্থক্যটি সূক্ষ্ম মনে হলেও নিয়মতান্ত্রিক প্যালেট বানানোর সময় গুরুত্বপূর্ণ হয়ে ওঠে।
উন্নত কাজের জন্য পারসেপচুয়ালি ইউনিফর্ম মডেলও আছে। LAB (CIELAB) এমনভাবে ডিজাইন করা যাতে সমান সংখ্যাগত ধাপ মানুষের চোখে সমান দৃশ্যগত ধাপ মনে হয় — RGB-এর মতো নয়, যেখানে নীল চ্যানেলে ২০০ থেকে ২১০-এ যাওয়া সবুজ চ্যানেলে একই লাফের চেয়ে ছোট দেখায়। LAB ইমেজ প্রসেসিং, কালার সায়েন্স এবং দুটি রং কতটা আলাদা দেখায় তা মাপার Delta E (ΔE) মেট্রিকে ব্যবহৃত হয়: ΔE ১-এর নিচে বেশিরভাগ মানুষের কাছে অদৃশ্য, ১–২ শুধু প্রশিক্ষিত পর্যবেক্ষকরা ধরতে পারেন, আর ১০-এর ওপরে স্পষ্টভাবে দৃশ্যমান পার্থক্য। OKLCH ওয়েব কাজের জন্য আধুনিক উত্তরসূরি — এটি CSS Color Level 4-এর oklch() ফাংশনের মাধ্যমে CSS-এ পারসেপচুয়াল ইউনিফরমিটি নিয়ে আসে, যা দিয়ে লাইটনেস বা ক্রোমার মধ্যে সমান-দেখতে ধাপে পরিবর্তন করা যায়।
ক্যানভাস-ভিত্তিক কালার পিকিং কীভাবে কাজ করে
আপনি যখন এই টুলে একটি ছবি লোড করেন, সেটি একটি অদৃশ্য HTML Canvas এলিমেন্টে তার নেটিভ পিক্সেল মাত্রায় আঁকা হয়। ক্লিক করলে ctx.getImageData(x, y, 1, 1) কল হয়, যা একটি চার-উপাদানের RGBA পিক্সেল অ্যারে ফেরত দেয় — লাল, সবুজ, নীল ও আলফা, প্রতিটি ০ থেকে ২৫৫ পর্যন্ত পূর্ণসংখ্যা। একটি বড় canvas রিড-ব্যাক থেকে যেকোনো পিক্সেল পড়তে হলে, getImageData-এর ফেরত দেওয়া ফ্ল্যাট Uint8ClampedArray-তে ইনডেক্স এই সূত্র মেনে চলে: index = (y × imageWidth + x) × 4। সেই অফসেটের চারটি ভ্যালু হলো R, G, B ও A। HEX-এ রূপান্তর মানে প্রতিটি চ্যানেলকে দুই-ডিজিটের হেক্সাডেসিমাল স্ট্রিং হিসেবে ফরম্যাট করে জোড়া লাগানো: # + প্রতিটি চ্যানেল দুই হেক্স ডিজিটে জিরো-প্যাডেড।
প্রান্ত থেকে পিক করলে বিভ্রান্তিকর হওয়ার কারণ অ্যান্টি-অ্যালিয়াসিং। ব্রাউজার বা ইমেজ এডিটর যখন টেক্সট বা কোনো শেপ রেন্ডার করে, তখন সীমানার পিক্সেলগুলো ফোরগ্রাউন্ড রং এবং পেছনে থাকা যা-কিছু আছে তার মাঝে ব্লেন্ড করা থাকে — মাঝামাঝি ভ্যালু তৈরি করে। একটি অক্ষরের প্রান্তের পিক্সেল দেখতে 'লাল' মনে হলেও আসলে হতে পারে rgb(210, 120, 110): অংশত লাল ফিল, অংশত সাদা ব্যাকগ্রাউন্ড, একসাথে মিশে। এই টুলের জুম লুপ পিক্সেল গ্রিডকে বড় করে দেখায় যাতে আপনি এই মাঝামাঝি পিক্সেলগুলো স্পষ্ট দেখতে পান এবং একটি মিশ্রিত প্রান্তের পিক্সেলের বদলে নিরেট ফিল এরিয়ায় ক্লিক করতে পারেন।
EyeDropper Web API, Chrome 95+ এবং Edge-এ পাওয়া যায়, canvas-এর চেয়ে আরও এগিয়ে: এটি আপনার পুরো ডিসপ্লের যেকোনো পিক্সেল স্যাম্পল করে — অন্য ব্রাউজার ট্যাব, নেটিভ অ্যাপ, ভিডিও প্লেয়ার। এটি একটি প্রমিস-ভিত্তিক ইন্টারফেসের মাধ্যমে একটি sRGBHex স্ট্রিং ফেরত দেয়। canvas পদ্ধতির বিপরীতে, এটির কালার সোর্স ব্রাউজারে লোড হওয়ার দরকারই নেই। Firefox এবং Safari এখনও এটি সমর্থন করে না, যে কারণে স্ক্রিনশট-পেস্ট করার ফলব্যাক আছে: একই canvas পিক্সেল-রিডিং লজিক স্ক্রিনশট ব্রাউজারে এলে কাজ করে।
কালার একুরেসি, গ্যামুট এবং স্ক্রিন ক্যালিব্রেশন
একই HEX ভ্যালু বিভিন্ন মনিটরে লক্ষণীয়ভাবে ভিন্ন দেখাতে পারে, কারণ স্ক্রিনগুলোর কালার গ্যামুট — হার্ডওয়্যার ভৌতভাবে যে রংগুলো তৈরি করতে পারে তার পরিসীমা — এবং সেগুলো ক্যালিব্রেটেড কিনা, তা ভিন্ন হয়। sRGB স্ট্যান্ডার্ড ওয়েব কালার স্পেস: CSS-এ লেখা একটি হেক্স রং sRGB ধরে নেওয়া হয়, আর একটি ভালোভাবে ক্যালিব্রেট করা sRGB ডিসপ্লে সেটি নির্ভুলভাবে পুনরুৎপাদন করবে। একটি ক্যালিব্রেট না করা মনিটর একই হেক্সকে বেশি উষ্ণ, বেশি শীতল বা বেশি উজ্জ্বল দেখাতে পারে, কারণ প্যানেলের নেটিভ আউটপুট sRGB রেফারেন্সের সাথে ম্যাপ করা হয়নি।
ওয়াইড-গ্যামুট ডিসপ্লে — যেগুলো Display P3 কালার স্পেস সমর্থন করে, যা sRGB-এর চেয়ে প্রায় ২৬% বেশি রং আচ্ছাদন করে — আরেকটি স্তরের জটিলতা যোগ করে। iPhone-এ তোলা বা ProPhoto RAW-এ শুট করা একটি ফটোতে P3 রং থাকতে পারে যা sRGB ত্রিভুজের সম্পূর্ণ বাইরে। ব্রাউজার সেই ছবি রেন্ডার করলে এবং আপনি একটি পিক্সেল পিক করলে, আপনি sRGB-ম্যাপ করা ভ্যালু পান — যা প্রকৃত ওয়াইড-গ্যামুট রঙের একটি ক্লিপড বা শিফটেড অ্যাপ্রক্সিমেশন হতে পারে। CSS Color Level 4 এটি সমাধান করে color(display-p3 r g b) ফাংশন এবং @media (color-gamut: p3) কোয়েরি দিয়ে, যা দিয়ে সক্ষম স্ক্রিনে P3 রং পরিবেশন করা যায়। canvas-এর getImageData API সবসময় sRGB ভ্যালু ফেরত দেয়, তাই এই টুলের HEX কোড ওয়েব ব্যবহারের জন্য সবসময় নিরাপদ — এগুলো ঠিক তাই প্রতিনিধিত্ব করে যা ব্রাউজার রেন্ডার করছে।
Delta E (ΔE) পারসেপচুয়াল কালার পার্থক্য মাপার স্ট্যান্ডার্ড মেট্রিক। এটি LAB স্পেসে হিসাব করা হয়, যেখানে দুটি LAB পয়েন্টের মধ্যকার Euclidean দূরত্ব মানুষ কীভাবে সেই রংগুলো ভিন্ন দেখে তার সাথে সম্পর্কযুক্ত। ΔE ১-এর নিচে খালি চোখে অদৃশ্য; ১ থেকে ২-এর মধ্যে শুধু নিয়ন্ত্রিত পরিস্থিতিতে অভিজ্ঞ পর্যবেক্ষকরা ধরতে পারেন; ২-এর ওপরে পাশাপাশি তুলনায় বেশিরভাগ মানুষের কাছে দৃশ্যমান; ১০-এর ওপরে স্পষ্টভাবে ভিন্ন রং। এটি গুরুত্বপূর্ণ হয়ে ওঠে যখন একটি পিক্সেল-পিক করা রংকে অফিসিয়াল ব্র্যান্ড ভ্যালুর সাথে তুলনা করা হয় — আপনার এক্সট্র্যাক্ট করা হেক্স এবং Pantone রেফারেন্সের মধ্যে ৩ ΔE স্ক্রিনে অদৃশ্য হতে পারে কিন্তু প্রিন্টে তাৎপর্যপূর্ণ।
পিক করা রঙের অ্যাক্সেসিবিলিটি: কনট্রাস্ট রেশিও এবং WCAG
একটি ছবি থেকে রং বের করা শুধু প্রথম ধাপ — সেই রং কোনো UI-তে ব্যবহার করার মানে হলো যাচাই করা যে সেই রঙের ওপর বা কাছে রাখা টেক্সট পঠনযোগ্য থাকছে কিনা। WCAG 2.1 ফোরগ্রাউন্ড ও ব্যাকগ্রাউন্ডের মধ্যে ন্যূনতম কনট্রাস্ট রেশিও নির্ধারণ করে: Level AA-তে সাধারণ আকারের টেক্সটের জন্য ৪.৫:১, বড় টেক্সটের জন্য (১৮pt+ বা ১৪pt বোল্ড) AA-তে ৩:১, এবং কঠোরতর Level AAA-তে সব টেক্সটের জন্য ৭:১। রেশিওটি রিলেটিভ লুমিনেন্স থেকে হিসাব করা হয় — লিনিয়ারাইজড R, G ও B চ্যানেলের একটি ওজনযুক্ত যোগফল (Y = 0.２126R + 0.7152G + 0.0722B, প্রতিটি চ্যানেল প্রথমে গামা-বিস্তৃত করে)। কনট্রাস্ট তখন হয় (L1 + 0.05) / (L2 + 0.05), যেখানে L1 হলো বেশি উজ্জ্বল লুমিনেন্স।
ফটো থেকে বের করা ব্র্যান্ড রং প্রায়ই এই থ্রেশহোল্ডে ব্যর্থ হয়। একটি সূর্যাস্তের ফটো থেকে তোলা উজ্জ্বল অ্যাম্বার একটি মুডবোর্ডে সাদার বিপরীতে শক্তিশালী দেখাতে পারে, কিন্তু মাত্র ২.৮:১ কনট্রাস্ট রেশিও দেয় — একটি ডেকোরেটিভ এলিমেন্টের জন্য ঠিক আছে, কিন্তু বডি টেক্সটের জন্য ব্যর্থ। সমাধান সাধারণত হয় টেক্সট ব্যবহারের জন্য hue-টি গাঢ় করা এবং মূল এক্সট্র্যাক্ট করা রংটি ব্যাকগ্রাউন্ড, বর্ডার বা আইকনের জন্য সংরক্ষণ করা। HSL এই সমন্বয়কে নিয়মতান্ত্রিক করে তোলে: Hue এবং Saturation ধরে রাখুন, তারপর কনট্রাস্ট চেক পাস না করা পর্যন্ত ধাপে ধাপে Lightness কমান। সাদার বিপরীতে ৪.৫:১ পাস করতে হবে এমন উজ্জ্বল hue-এর জন্য Lightness ৩৫–৪০% একটি সাধারণ লক্ষ্য পরিসীমা।
ইন্টারঅ্যাক্টিভ এলিমেন্ট WCAG 1.4.11 (Non-text Contrast)-এর অধীনে আরেকটি প্রয়োজনীয়তা যোগ করে: বাটন, ইনপুট এবং ফোকাস রিং-এর মতো UI কম্পোনেন্টগুলোর পাশের রঙের বিপরীতে অন্তত ৩:১ কনট্রাস্ট থাকতে হবে — শুধু তাদের লেবেল টেক্সটের জন্য ৪.৫:১ নয়। একটি ব্র্যান্ড টিল টেক্সটের জন্য AA পাস করলেও একটি সাদা কার্ড ব্যাকগ্রাউন্ডের বিপরীতে বাটন বর্ডার হিসেবে ব্যবহার করলে ৩:১-এ ব্যর্থ হতে পারে। এই টুল দিয়ে একটি প্যালেট এক্সট্র্যাক্ট করার পর, প্রধান HEX ভ্যালুগুলো UtiloKit-এর Contrast Checker-এ পেস্ট করে প্রতিটি ফোরগ্রাউন্ড/ব্যাকগ্রাউন্ড জোড়া আপনার ডিজাইন সিস্টেমে যুক্ত করার আগেই যাচাই করে নিন।
Frequently asked questions
একটি ছবির হেক্স কোড কীভাবে বের করব?
ছবিটি এখানে আপলোড বা পেস্ট করুন এবং যে পিক্সেলটি চান তাতে ক্লিক করুন — টুলটি HTML canvas দিয়ে সেটি পড়ে এবং তাৎক্ষণিকভাবে HEX, RGB ও HSL ভ্যালু দেখায়, হেক্স কোডটি আপনার ক্লিপবোর্ডে কপি করে দেয়। ম্যাগনিফাইং লুপ আপনার কার্সারের চারপাশের আলাদা আলাদা পিক্সেল দেখায় যাতে আপনি ঠিক সঠিক জায়গায় ক্লিক করেন। কোথাও কোনো সার্ভারে আপলোড হয় না; সবকিছু HTML5 canvas API ব্যবহার করে আপনার ব্রাউজারেই চলে। এতে এটি তাৎক্ষণিক, প্রাইভেট এবং পেজ লোড হওয়ার পর অফলাইনেও ব্যবহারযোগ্য। অ্যান্টি-অ্যালিয়াসড টেক্সট বা লোগোর প্রান্তের মতো ক্লিক করা কঠিন জায়গার জন্য, ক্লিক করার আগে আপনার ব্রাউজারের বিল্ট-ইন জুম দিয়ে আগে বড় করে নিন।
Photoshop ছাড়া কীভাবে একটি ছবি থেকে রং পিক করব?
এই ফ্রি ব্রাউজার-ভিত্তিক আইড্রপার ব্যবহার করুন: ছবিটি ফেলুন, একটি পিক্সেলে ক্লিক করুন, আর কোডটি কপি করুন। ইনস্টল করার কিছু নেই, সাইনআপের দরকার নেই। মাসে প্রায় $২০ থেকে শুরু হওয়া Adobe Photoshop বা Illustrator-এর বিপরীতে, এই টুলটি সম্পূর্ণ ফ্রি। macOS Digital Color Meter বা Windows PowerToys Color Picker-এর বিপরীতে, এটি ছবির ডমিনেন্ট প্যালেটও স্বয়ংক্রিয়ভাবে বের করে দেয়, তাই একটি একটি করে ক্লিক করার বদলে একবারে সব প্রধান রং পেয়ে যান। imagecolorpicker.com সবচেয়ে জনপ্রিয় সমর্পিত বিকল্প, কিন্তু এটি আপনার ফাইল সার্ভারে আপলোড করে; এই টুলটি করে না।
HEX এবং RGB-এর মধ্যে পার্থক্য কী?
এগুলো একই রংকে দুইভাবে এনকোড করে। HEX লাল/সবুজ/নীলকে তিনটি হেক্সাডেসিমাল জোড়া হিসেবে লেখে (#FF5733) এবং CSS ও ওয়েব ডিজাইনে স্ট্যান্ডার্ড; RGB তিনটি 0-255 দশমিক সংখ্যা ব্যবহার করে — rgb(255, 87, 51) — যা ইমেজ এডিটর ও কোডে সাধারণ। এদের মধ্যে রূপান্তর ক্ষতিহীন, এবং এই টুলটি আপনার ক্লিক করা প্রতিটি পিক্সেলের জন্য দুটোই দেখায়। CSS বা Tailwind ক্লাস লেখার সময় HEX ব্যবহার করুন; canvas, WebGL বা সংখ্যাসূচক চ্যানেল প্রত্যাশা করা ইমেজ-প্রসেসিং কোডের সাথে কাজ করার সময় RGB ব্যবহার করুন। উভয় ফরম্যাটই একই sRGB কালার পয়েন্ট বর্ণনা করে।
HSL কী এবং কখন ব্যবহার করা উচিত?
HSL একটি রংকে Hue (0-360°), Saturation এবং Lightness দিয়ে বর্ণনা করে — যা রং সমন্বয় করার জন্য বেশি স্বজ্ঞাত। hue একদম না পাল্টিয়েই একটি রংকে হালকা বা কম স্যাচুরেটেড করা যায়। CSS-এ hsl() নেটিভভাবে সমর্থিত, তাই ডিজাইনাররা প্রায়ই HSL-এ প্যালেট বানান: টিন্টের জন্য Lightness বাড়ান, শেডের জন্য কমান। পিকারটি প্রতিটি পিক্সেলের জন্য HEX, RGB এবং HSL দেখায়, তাই আপনার ওয়ার্কফ্লোতে যেটি দরকার সেটিই কপি করতে পারবেন। Figma, Sketch বা Adobe XD-এর জন্য HEX সাধারণত পেস্ট করার দ্রুততম ফরম্যাট; Tailwind বা CSS কাস্টম প্রপার্টির জন্য HEX বা HSL দুটোই ভালো কাজ করে।
একটি ফটো থেকে কীভাবে কালার প্যালেট বের করব?
শুধু ফটোটি লোড করুন — ডমিনেন্ট প্যালেট স্বয়ংক্রিয়ভাবে আসবে। টুলটি ছবির পিক্সেলগুলোকে ক্লাস্টারে ভাগ করে এবং ফ্রিকোয়েন্সি অনুযায়ী র্যাঙ্ক করে, HEX কোডসহ সোয়াচ হিসেবে সবচেয়ে ডমিনেন্ট আটটি রং ফেরত দেয়। যেকোনো সোয়াচে ক্লিক করে কপি করুন, বা একবারে পুরো প্যালেট কপি করুন। Adobe Color এবং Canva-এর প্যালেট জেনারেটর একই কাজ করে কিন্তু অ্যাকাউন্ট প্রয়োজন; Coolors.co ফটো থেকে প্যালেট বানাতে পারে কিন্তু ছবি তাদের সার্ভারে পাঠায়। এখানে প্যালেট এক্সট্র্যাকশন সম্পূর্ণভাবে আপনার ব্রাউজারে চলে — কিছু আপলোড হয় না, অ্যাকাউন্ট দরকার নেই, এবং কোনো বিজ্ঞাপন ওয়ার্কফ্লোতে বাধা দেয় না।
ইমেজ কালার পিকার কীভাবে কাজ করে?
ছবিটি আপনার ব্রাউজারে একটি HTML canvas এলিমেন্টে আঁকা হয়; ক্লিক করলে getImageData API দিয়ে সেই পিক্সেলের লাল, সবুজ ও নীল ভ্যালু পড়া হয় এবং HEX, RGB ও HSL-এ রূপান্তরিত হয়। canvas লোকালি চলে বলে কোনো সার্ভার জড়িত থাকে না। ম্যাগনিফায়ার লুপ একটি দ্বিতীয় canvas এলিমেন্ট ব্যবহার করে আপনার কার্সারের চারপাশের পিক্সেল এলাকা জুম করে, যাতে অ্যান্টি-অ্যালিয়াসড টেক্সট, লোগো প্রান্ত বা ফটোগ্রাফিক গ্রেডিয়েন্টের মতো সূক্ষ্ম ডিটেইলসহ ছবিতেও ঠিক সঠিক পিক্সেলে টার্গেট করতে পারেন।
একটি কালার পিকারে আমার ছবি আপলোড করা কি নিরাপদ?
এই টুলে হ্যাঁ — ছবিটি শুধু আপনার ব্রাউজারের মেমরিতে লোড হয় এবং কখনও কোথাও পাঠানো হয় না। আপনি ব্রাউজারের Network ট্যাবে যাচাই করতে পারেন: পেজ লোড হওয়ার পর কোনো রিকোয়েস্ট তৈরি হয় না। অপ্রকাশিত ডিজাইন, ক্লায়েন্ট লোগো এবং ব্যক্তিগত ফটোর জন্য এটি গুরুত্বপূর্ণ। অনেক আপলোড-ভিত্তিক পিকার — imagecolorpicker.com এবং কিছু Canva ফিচারসহ — আপনার ফাইল সার্ভারে পাঠায় এবং সাময়িকভাবে জমা রাখে। এই টুলটি সবকিছু লোকালি প্রসেস করে, তাই আপনার ফাইল আপনার ডিভাইসেই থাকে এবং ট্যাব বন্ধ করলে তা চলে যায়।
শুধু একটি ছবির ফাইল নয়, আমার স্ক্রিন থেকেও কি রং পিক করা যাবে?
হ্যাঁ — 'Pick from screen' বাটনটি EyeDropper API ব্যবহার করে (Chrome ও Edge-এ সমর্থিত), যা দিয়ে আপনার ডিসপ্লের যেকোনো জায়গার, অন্যান্য উইন্ডো, অ্যাপ ও ব্রাউজার ট্যাবসহ যেকোনো পিক্সেল স্যাম্পল করা যায়। পিক করা রংটি ছবি থেকে পিক করা রঙের মতোই একই HEX/RGB/HSL প্যানেল ও হিস্ট্রিতে যায়। এই API ছাড়া ব্রাউজারের জন্য (Safari, Firefox), PrtScn বা Cmd+Shift+4 দিয়ে স্ক্রিনশট নিন, তারপর ফাইল সেভ না করেই সরাসরি পিকারে Ctrl+V দিয়ে পেস্ট করুন। এটি ভিডিও ফ্রেম, ব্রাউজারে থাকা PDF এবং যেকোনো লাইভ ওয়েব পেজও কভার করে।
একটি ওয়েবসাইট বা লোগো থেকে ব্র্যান্ড রং কীভাবে মেলাব?
লোগোটি সেভ বা স্ক্রিনশট করে এখানে ফেলুন, তারপর ব্র্যান্ড রঙে ক্লিক করে HEX কপি করুন। অথবা স্ক্রিনশট বাদ দিয়ে: স্ক্রিন আইড্রপার বাটন ব্যবহার করে অন্য ট্যাবে খোলা লাইভ ওয়েবসাইটটি সরাসরি স্যাম্পল করুন। SVG বা ইমেজ অ্যাসেটে রং এম্বেড করা থাকলে, CSS প্রপার্টির বদলে ব্রাউজার DevTools দিয়ে computed style দেখার চেয়ে এটি দ্রুত। পিক হিস্ট্রি আপনার শেষ ১৬টি রং জমিয়ে রাখে, তাই ডিজাইন টুলে যাওয়ার আগে একাধিক সোর্স থেকে পুরো ব্র্যান্ড প্যালেট সংগ্রহ করতে পারেন।
একটি কালার প্যালেটে কতগুলো রং থাকা উচিত?
বেশিরভাগ ব্যবহারযোগ্য প্যালেটে ৩–৬টি রং থাকে: একটি ডমিনেন্ট রং, একটি বা দুটি সেকেন্ডারি এবং কিছু অ্যাকসেন্ট। এক্সট্র্যাক্টরটি আটটি ডমিনেন্ট সোয়াচ ফেরত দেয় যাতে আপনি সবচেয়ে উপযুক্ত সাবসেট বেছে নিতে পারেন — একক সোয়াচ কপি করুন বা মুড বোর্ডের জন্য পুরো সেট নিন। বাস্তবে, চারটি রং একটি ভালো শুরুর বিন্দু: একটি প্রাইমারি, একটি সেকেন্ডারি, একটি নিউট্রাল এবং একটি অ্যাকসেন্ট। Stripe ও Linear-এর মতো কোম্পানির ডিজাইন সিস্টেম একই hue-এর অনেক লাইটনেস ও স্যাচুরেশন ভেরিয়েন্টসহ কমপ্যাক্ট প্যালেট ব্যবহার করে, অনেক আলাদা রঙের বদলে।
ডিজাইনার ও ডেভেলপাররা কোন কালার ফরম্যাট ব্যবহার করেন?
CSS ও ওয়েব কাজের জন্য HEX (কোডবেস ও ডিজাইন টুলে সবচেয়ে সাধারণ), স্ক্রিন ও canvas কোডের জন্য RGB/RGBA, প্যালেট বানানো ও নিয়মতান্ত্রিক টুইকিংয়ের জন্য HSL, এবং প্রিন্ট আউটপুটের জন্য CMYK। Figma, Sketch এবং Adobe XD সবই HEX, RGB এবং HSL সমর্থন করে। এই পিকারটি প্রতিটি পিক্সেলের জন্য HEX, RGB এবং HSL দেখায়, তাই ম্যানুয়াল রূপান্তর ছাড়াই আপনার ওয়ার্কফ্লোর প্রয়োজনীয়টি কপি করতে পারবেন। প্রিন্ট কাজের জন্য CMYK-ও দরকার হলে, একটি ফ্রি অনলাইন কনভার্টারে HEX পেস্ট করুন — canvas API স্বাভাবিকভাবে CMYK আউটপুট দেয় না।
পিকার থেকে হেক্স কোড কীভাবে কপি করব?
একটি পিক্সেলে ক্লিক করলে তার HEX স্বয়ংক্রিয়ভাবে ক্লিপবোর্ডে কপি হয়ে যায়। প্রতিটি ভ্যালু রো, হিস্ট্রি সোয়াচ এবং প্যালেট চিপও ক্লিক-এ-কপি — শুধু ভ্যালু বা সোয়াচে ক্লিক করলেই কপি হয়ে যায়। পিক হিস্ট্রি আপনার শেষ ১৬টি রং জমিয়ে রাখে, তাই অন্য ছবিতে যাওয়ার আগে একটি ছবি থেকে ধারাবাহিকভাবে একাধিক শেড সংগ্রহ করতে পারবেন। ক্লিক করার আগে সোয়াচের ওপর হোভার করে ভ্যালু দেখে নিন। পুরো প্যালেট একটি তালিকা হিসেবে দরকার হলে, আটটি হেক্স কোড কমা দিয়ে আলাদা করা তালিকা পেতে 'Copy all' ব্যবহার করুন, CSS ভ্যারিয়েবল বা ডিজাইন ডকে পেস্ট করার জন্য প্রস্তুত।
একটি PDF বা ভিডিও ফ্রেম থেকে কি রং পাওয়া যাবে?
হ্যাঁ — ফ্রেম বা পেজটি স্ক্রিনশট নিয়ে Ctrl+V দিয়ে পিকারে পেস্ট করুন (ফাইল সেভ করার দরকার নেই), অথবা PDF বা ভিডিও চলার সময় সরাসরি স্যাম্পল করতে স্ক্রিন আইড্রপার ব্যবহার করুন। ব্রাউজারে খোলা PDF-এর জন্য, স্ক্রিন আইড্রপার সাধারণত সবচেয়ে দ্রুত: Chrome-এ PDF খুলুন, 'Pick from screen'-এ ক্লিক করুন, তারপর পছন্দের রঙে ক্লিক করুন। ভিডিওর জন্য, সবচেয়ে নির্ভুল স্যাম্পলের জন্য প্রথমে ফ্রেমটিতে পজ করুন।
একই ছবি বিভিন্ন অ্যাপে সামান্য ভিন্ন রং দেখায় কেন?
ছবি রেন্ডার করার সময় ব্রাউজার কালার-প্রোফাইল (ICC) রূপান্তর প্রয়োগ করতে পারে, এবং স্ক্রিনশট আপনার ডিসপ্লের কালার প্রোফাইল উত্তরাধিকার সূত্রে পায়। পিকারটি আপনার ব্রাউজার যেভাবে রেন্ডার করেছে সেই প্রকৃত sRGB পিক্সেল ভ্যালু রিপোর্ট করে — যা CSS-এ ব্যবহার করার ভ্যালু — এবং ওয়েব কাজের জন্য সঠিক। Photoshop বা Figma-এর তুলনায় অমিল দেখলে, আপনার ডিসপ্লে sRGB-তে ক্যালিব্রেটেড আছে কিনা এবং ছবির ফাইলে এমবেডেড কালার প্রোফাইল মিলছে কিনা যাচাই করুন। লোগো অ্যাসেটের জন্য, ডিজাইনারের এক্সট্র্যাকশনের ওপর নির্ভর না করে সরাসরি ব্র্যান্ড HEX ভ্যালু দেওয়া উচিত।
imagecolorpicker.com এবং Adobe Color-এর সাথে এটি কীভাবে তুলনীয়?
imagecolorpicker.com সবচেয়ে ব্যবহৃত বিকল্প — এটি একক-পিক্সেল পিকিং এবং প্যালেট এক্সট্র্যাকশন দেয়, কিন্তু আপনার ছবি তাদের সার্ভারে আপলোড করে এবং বিজ্ঞাপন দেখায়। Adobe Color ফটো থেকে প্যালেট বের করে কিন্তু Adobe অ্যাকাউন্ট প্রয়োজন এবং ছবি Adobe-এর সার্ভারে পাঠায়; এটি জুম লুপসহ একক-পিক্সেল পিকিংও দেয় না। Canva-এর কালার পিকার Canva এডিটরে বিল্ট-ইন এবং শুধু Canva প্রজেক্টের ভেতরে থাকা ছবিতে কাজ করে। macOS Digital Color Meter এবং Windows PowerToys Color Picker স্ক্রিন স্যাম্পলিংয়ের জন্য কাজ করে কিন্তু ফাইল থেকে প্যালেট বের করে না। এই টুলটিই একমাত্র ফ্রি, সম্পূর্ণ ক্লায়েন্ট-সাইড বিকল্প যা জুম লুপ, স্ক্রিন আইড্রপার, ১৬-রঙের হিস্ট্রি এবং প্যালেট এক্সট্র্যাকশন একসাথে দেয় — কোনো অ্যাকাউন্ট নেই, বিজ্ঞাপন নেই, আপলোড নেই।
Related tools
সব টুল দেখুন
নতুন কালার প্যালেট জেনারেটর
complementary, analogous, triadic ও monochromatic প্যালেট তৈরি করুন।
নতুন Cubic Bezier জেনারেটর
কন্ট্রোল পয়েন্ট টেনে লাইভ প্রিভিউ সহ একটি CSS easing কার্ভ ডিজাইন করুন।
নতুন Border Radius জেনারেটর
দৃশ্যত CSS গোলাকার কোণ ও জৈব blob আকৃতি তৈরি করুন।
নতুন CSS Flexbox প্লেগ্রাউন্ড
লাইভ প্রিভিউ সহ flex প্রপার্টি সমন্বয় করুন এবং CSS কপি করুন।
নতুন CSS Grid প্লেগ্রাউন্ড
লাইভ প্রিভিউ ও CSS সহ গ্রিড কলাম, gap ও অ্যালাইনমেন্ট সমন্বয় করুন।
নতুন Glassmorphism জেনারেটর
একটি ফ্রস্টেড-গ্লাস কার্ড ডিজাইন করুন এবং লাইভ প্রিভিউ সহ CSS কপি করুন।