Color Picker একটি পিক্সেল-প্রিসাইজ আইড্রপার টুল যা ওয়েবপেজের যেকোনো এলিমেন্ট — টেক্সট, ব্যাকগ্রাউন্ড, ইমেজ, গ্রেডিয়েন্ট বা যেকোনো দৃশ্যমান পিক্সেল থেকে কালার পিক করার সুবিধা দেয়। তাৎক্ষণিকভাবে HEX, RGB এবং HSL ফরম্যাটে সঠিক কালার ভ্যালু পান এবং একটি ম্যাগনিফাইড পিক্সেল প্রিভিউয়ের মাধ্যমে নিখুঁতভাবে আপনার লক্ষ্য স্থির করুন। পূর্বে পিক করা কালারগুলো কুইক-অ্যাক্সেসের জন্য হিস্ট্রি স্ট্রিপে সেভ করা থাকে।
ওয়েবপেজ থেকে সঠিক কালার ভ্যালু খুঁজে বের করা একটি নিত্যনৈমিত্তিক কাজ — সেটি কোনো ব্র্যান্ড কালারের সাথে মেলানো হোক বা কোনো ডিজাইনের রেফারেন্স নেওয়া হোক। ব্রাউজারের ডেভটুলস (DevTools) স্টাইল প্যানেলে কালার দেখায় ঠিকই, কিন্তু তা কেবল সেই এলিমেন্টগুলোর জন্য যাদের নির্দিষ্ট CSS কালার প্রোপার্টি আছে — ইমেজ বা গ্রেডিয়েন্টের ক্ষেত্রে এটি কার্যকর নয়। 'Color Picker' আইড্রপারটি পিক্সেল লেভেলে কাজ করে — আপনার কার্সারের নিচে ঠিক যে পিক্সেলটি আছে এটি তার আসল রেন্ডার করা কালারটি রিড করে। কোনো ইমেজের নীল আকাশ হোক বা কোনো গ্রেডিয়েন্টের মাঝখানের অংশ — আপনি সবখান থেকেই সঠিক কালার ভ্যালু পাবেন। ম্যাগনিফাইড প্রিভিউ সার্কেলটি পিক্সেলগুলোকে জুম করে দেখায় যাতে আপনি একদম সঠিক পিক্সেলটি বেছে নিতে পারেন। HEX, RGB, HSL — এই তিনটি ফরম্যাটই একসাথে প্রদর্শিত হয় এবংযেকোনো একটিতে ক্লিক করলেই তা কপি হয়ে যায়। আপনার রিসেন্টলি পিক করা কালারগুলো নিচে হিস্ট্রি স্ট্রিপে সেভ থাকে যাতে আপনি খুব সহজেই পুরনো কালারগুলোতে ফিরে যেতে পারেন।
কার্সারের চারপাশের পিক্সেলগুলোকে জুম করে দেখানোর জন্য একটি ম্যাগনিফাইড সার্কুলার প্রিভিউ থাকে এবং নিখুঁত সিলেকশনের জন্য ক্রসহেয়ার টার্গেটিং সুবিধা দেওয়া হয়েছে। টেক্সট, ব্যাকগ্রাউন্ড, ইমেজ, গ্রেডিয়েন্ট, SVG বা পেজের যেকোনো পিক্সেল থেকে কালার পিক করুন।
প্রতিটি পিক করা কালার একসাথেই তিনটি ফরম্যাটে দেখানো হয়: HEX (#7c3aed), RGB (rgb(124, 58, 237)), এবং HSL (hsl(262, 83%, 58%))। বার বার কনভার্ট করার ঝামেলা ছাড়াই সব ফরম্যাট সরাসরি ব্যবহারের সুযোগ পান।
যেকোনো ফরম্যাট রো (HEX, RGB, বা HSL)-তে ক্লিক করলেই সেই সুনির্দিষ্ট ভ্যালুটি ক্লিপবোর্ডে কপি হয়ে যাবে। একটি "Copied!" অ্যানিমেশন আপনাকে এটি নিশ্চিত করবে। এরপর সরাসরি আপনার CSS বা ডিজাইন টুলে সেটি পেস্ট করুন।
আপনার রিসেন্টলি পিক করা কালারগুলো কালার সোয়াচসহ একটি হিস্ট্রি স্ট্রিপে সেভ থাকে। যেকোনো সোয়াচে ক্লিক করে পুনরায় সেই কালারটি সিলেক্ট করতে পারেন এবং এর ভ্যালুগুলো দেখতে পারেন। আপনার সেশন চলাকালীন এই হিস্ট্রি মুছে যায় না — অর্থাৎ বিভিন্ন পেজ থেকেও আপনি কালার পিক করতে পারেন।
কালার ভ্যালুগুলোর উপরে পিক করা কালারটি বড় একটি সোয়াচ হিসেবে দেখানো হয় যাতে আপনি সহজেই কালারটি যাচাই করতে পারেন। ছোট সাইজে প্রায় একই রকম দেখতে লাগে এমন সূক্ষ্ম শেডগুলোও এই বড় সোয়াচে পরিষ্কারভাবে বোঝা যায়।
দৃশ্যমান যেকোনো পিক্সেল থেকে কালার পিক করা যায়: যেমন CSS কালার, গ্রেডিয়েন্ট, ইমেজ (PNG, JPG, SVG), ক্যানভাস এলিমেন্ট, ভিডিও ফ্রেম, সেমি-ট্রান্সপারেন্ট ওভারলে এবং এমনকি আইফ্রেম (iframe) থেকেও। যা দেখা যায়, সেটিই পিক করা যায়।
কোনো কোম্পানির ওয়েবসাইট থেকে সঠিক ব্র্যান্ড কালার পিক করুন যাতে আপনার ডিজাইনে সঠিক শেডটি ব্যবহার হয়। আন্দাজের ওপর বা গাইডলাইন খোঁজার বদলে সরাসরি একদম সঠিক HEX ভ্যালুটি পান।
হিরো ইমেজ, প্রোডাক্ট ফটো বা ইলাস্ট্রেশন থেকে সরাসরি কালার পিক করুন। কোনো ছবি থেকে প্রধান কালারটি নিয়ে আপনার ডিজাইনের পরিপূরক ব্যাকগ্রাউন্ড হিসেবে ব্যবহার করুন।
ডিজাইন স্পেক অনুযায়ী বাটনের কালার হওয়া উচিত #7c3aed। এটি ইমপ্লিমেন্ট করার পর আসলে সঠিক হয়েছে কি না তা বাটন থেকে কালার পিক করে যাচাই করুন। খালি চোখে ধরা পড়ে না এমন সূক্ষ্ম পার্থক্যেও এর মাধ্যমে ধরা সম্ভব।
ডিজাইন ইন্সপিরেশন সাইটগুলো ব্রাউজ করুন এবং আপনার ভালো লাগা কালারগুলো পিক করুন। আপনার সেশন চলাকালীন পিক করা কালারগুলো নিয়ে একটি হিস্ট্রি স্ট্রিপ বা প্যালেট তৈরি হয়ে যাবে — যা আপনার নিজের কালার স্কিমের ভিত্তি হতে পারে।
একটি CSS গ্রেডিয়েন্টের বিভিন্ন পয়েন্ট থেকে কালার পিক করে প্রতিটি পজিশনের সঠিক কালারটি দেখুন। কোনো গ্রেডিয়েন্ট হুবহু তৈরি করতে বা গ্রেডিয়েন্ট স্টপগুলো কীভাবে মিশেছে তা বুঝতে এটি খুবই সহায়ক।
DevSuite Pro ফ্লোটিং ডক ওপেন করুন এবং Color Picker আইকনে ক্লিক করুন। আপনার কার্সারটি একটি আইড্রপার এবং ম্যাগনিফাইড প্রিভিউ সার্কেলে পরিণত হবে।
পেজের ওপর দিয়ে আপনার কার্সারটি নাড়াচাড়া করুন। ম্যাগনিফাইড প্রিভিউ কার্সারের চারপাশের পিক্সেলগুলোকে জুম করে দেখাবে এবং ক্রসহেয়ার আপনাকে সঠিক পিক্সেল টার্গেট করতে সাহায্য করবে।
যেকোনো পিক্সেলের কালার পিক করতে পেজের সেই অংশে ক্লিক করুন। কালার সোয়াচ এবং HEX, RGB, ও HSL ভ্যালুগুলো তাৎক্ষণিকভাবে আপডেট হবে।
HEX, RGB, বা HSL রো-তে ক্লিক করে ক্লিপবোর্ডে ভ্যালুটি কপি করুন। নিশ্চিত করতে একটি কুইক "Copied!" মেসেজ আসবে।
প্রয়োজন অনুযায়ী আরও কালার পিক করা চালিয়ে যান। প্রতিটি পিক করা কালার হিস্ট্রি স্ট্রিপে যুক্ত হবে। পুরনো কোনো কালার ফিরে পেতে হিস্ট্রি সোয়াচে ক্লিক করুন।
বিনামূল্যে DevSuite Pro ইনস্টল করুন এবং আপনার ব্রাউজারের জন্য ৩৯+ ডেভলপার টুল আনলক করুন।