হেক্স কালার কোড: ইমেজ থেকে পিক্সেল রঙ বের করার টুল
এই পৃষ্ঠাটি কেন আলাদা
ইমেজ থেকে রঙ নেওয়ার বেশ কিছু টুল ওয়েবে আছে, কিন্তু এই পৃষ্ঠাটি বিশেষভাবে হেক্সাডেসিমেল কালার কোড (HEX) কে প্রধান আউটপুট হিসেবে ব্যবহার করে। অন্যান্য পৃষ্ঠা যেমন RGB ফাংশনাল নোটেশন বা HSL ফোকাস করে, সেখানে এখানে হেক্স ফরম্যাটই মুখ্য। হেক্স হলো ছয় অঙ্কের (অথবা তিন অঙ্কের শর্টহ্যান্ড) আরজিবি নোটেশন যা CSS ও ডিজাইন টুলের আদর্শ। কারণ হেক্স খুবই সংক্ষিপ্ত এবং ওয়েব-নেটিভ ফরম্যাট, তাই যেকোনো CSS প্রপার্টিতে (color, background-color ইত্যাদি) সরাসরি ব্যবহার করা যায়, কোনো অতিরিক্ত বন্ধনী বা সিনট্যাক্স ছাড়া। এই পৃষ্ঠাটি দিয়ে আপনি একটি ইমেজ থেকে যেকোনো পিক্সেলের সঠিক হেক্স কোড বের করতে পারবেন।
উল্লেখ্য, হেক্সের ছয় অঙ্কের সংস্করণে আলফা চ্যানেল থাকে না। তাই কোনো পিক্সেল যদি আধা-স্বচ্ছ হয়, তবে তার স্বচ্ছতার পরিমাণ আলাদাভাবে দেখানো হয়: “Alpha ‹n›% — this pixel is partly transparent.” এই তথ্যটি অত্যন্ত গুরুত্বপূর্ণ, কারণ হেক্স কোড নিজে স্বচ্ছতা ধারণ করে না—আরজিবিএ বা এইচএসএলএ ফরম্যাটে আলফা থাকে, কিন্তু হেক্সে নেই।
কিভাবে কাজ করে: পিক্সেল থেকে হেক্স কোড বাছাই
এই টুলটি সম্পূর্ণ ক্লায়েন্ট-সাইডে কাজ করে—আপনার ছবি কোনো সার্ভারে আপলোড হয় না। আপনি আপনার ডিভাইস থেকে একটি ইমেজ নির্বাচন করেন (সাপোর্টেড ফরম্যাট: PNG, JPG, WebP, GIF, AVIF, HEIC), তারপর মাউস কার্সার ইমেজের ওপর নিয়ে যান অথবা ক্লিক করে যেকোনো পিক্সেল নির্বাচন করেন। টুলটি তৎক্ষণাৎ সেই পিক্সেলের রঙ তিনটি ফরম্যাটে দেখায়: HEX, RGB, এবং HSL। একটি ম্যাগনিফাইড ভিউ (বড় করে দেখা) আপনাকে সঠিক পিক্সেলটি চিহ্নিত করতে সাহায্য করে, বিশেষ করে যখন ইমেজটি অ্যান্টি-আলিয়াসিং বা কম্প্রেশনের কারণে পিক্সেলের মান পরিবর্তিত হতে পারে।
প্রথমে ইমেজ লোড হওয়ার পর, ইমেজের কেন্দ্রীয় পিক্সেলের রঙের মান ও কোঅর্ডিনেট স্বয়ংক্রিয়ভাবে দেখানো হয়। তারপর আপনি মাউস সরালে পিক্সেল বাই পিক্সেল রঙ বদলাতে থাকে। ক্লিক করলে বর্তমানে নির্বাচিত রঙটি আপনার কালেকশনে (picks) সেভ হয়। সেভ করা রঙগুলো হিস্টোরিতে (সর্বোচ্চ ১২টি) রাখা হয়—যেকোনো সোয়াচে ক্লিক করে সেই রঙ আবার দেখতে পারেন।
ইনপুট ও আউটপুটের বিস্তারিত
ইনপুট: একটি মাত্র ইমেজ ফাইল নিচের ফরম্যাটে—PNG, JPG, WebP, GIF, AVIF, HEIC। MIME টাইপ হিসেবে গ্রহণ করে: image/jpeg, image/png, image/webp, image/gif, image/avif, image/heic, image/heif। ইমেজের দীর্ঘতম দিক ৪০৯৬ পিক্সেলের বেশি হলে স্বয়ংক্রিয়ভাবে স্কেল ডাউন করা হয়।
আউটপুট: ইমেজ রেডি হলে দেখায় “Image ready — move over it to sample, click to save a color.” এর সঙ্গে ইমেজের ডাইমেনশন (প্রস্থ × উচ্চতা), বর্তমান পিক্সেলের কোঅর্ডিনেট (x, y), এবং তিনটি রঙিন মান (HEX, RGB, HSL) দেখানো হয়। যদি পিক্সেল সেমি-ট্রান্সপারেন্ট হয়, তাহলে Alpha মান দেখায়, যেমন “Alpha 45% — this pixel is partly transparent.” ক্লিক করলে মেসেজ আসে “Saved ‹hex› to your picks.” হিস্টোরির প্রতিটি আইটেমে ক্লিক করে সেটি আবার লোড করা যায়। আর যেকোনো রঙিন মানে (HEX, RGB, HSL) ক্লিক করলে তা ক্লিপবোর্ডে কপি হয়—কেননা হেক্স কোড সরাসরি CSS-এ ব্যবহারের জন্য সবচেয়ে সুবিধাজনক।
নিয়ম ও সীমারেখা
টুলটির কিছু নির্দিষ্ট নিয়ম ও প্রান্তিক ক্ষেত্র রয়েছে:
- অননুমোদিত ফাইল টাইপ ড্রপ করলে মেসেজ আসে: “That file type is not supported. Try a PNG, JPG, WebP, GIF, AVIF or HEIC image.”
- ইমেজ খোলা না গেলে (যেমন নষ্ট ফাইল): “That image could not be opened. It may be corrupted or in an unsupported format.”
- কীবোর্ড নেভিগেশন: আপনি তীর চিহ্ন (arrow keys) ব্যবহার করে ক্রসহেয়ার সরাতে পারেন। Shift ধরে তীর চাপলে ১০ পিক্সেল করে সরানো যায়। Enter বা Space চাপলে বর্তমান রঙ সেভ হয়।
- ক্লিপবোর্ড ব্লক হয়ে গেলে মেসেজ: “Could not copy — your browser blocked clipboard access.”
- সেমি-ট্রান্সপারেন্ট পিক্সেলের মান ইমেজে যেভাবে সংরক্ষিত আছে সেভাবেই পড়া হয়—পেছনের ব্যাকগ্রাউন্ডের সাথে মিশিয়ে দেখা হয় না। JPEG বা স্ক্রিনশটের ক্ষেত্রে কম্প্রেশন ও অ্যান্টি-আলিয়াসিংয়ের কারণে পিক্সেলের প্রকৃত মান পরিবর্তিত হতে পারে, সেটি টুল নির্ভুলভাবে দেখায়।
- হিস্টোরি সর্বোচ্চ ১২টি রঙ সঞ্চয় করতে পারে। একই RGB মান কিন্তু ভিন্ন আলফা মান থাকলে সেগুলো আলাদা এন্ট্রি হিসেবে গণ্য হয়।
- “Start over” বাটন ইমেজ মুছে ফেলে, কালার হিস্টোরি খালি করে, এবং টুলকে প্রাথমিক অবস্থায় নিয়ে যায়।
কেন হেক্স ফরম্যাট ওয়েবের জন্য আদর্শ
হেক্সাডেসিমেল রঙিন কোড হলো ছয়টি হেক্সাডেসিমেল অঙ্ক (০-৯, A-F) দিয়ে গঠিত, যেখানে প্রথম দুটি অঙ্ক লাল, মাঝের দুটি সবুজ, শেষ দুটি নীল রঙের তীব্রতা নির্দেশ করে (যেমন #1E90FF)। এটি আরজিবি ফাংশনের (rgb(30, 144, 255)) সমতুল্য কিন্তু আরও সংক্ষিপ্ত। CSS-এ হেক্স ব্যবহারের সুবিধা হলো এটি কোনো অতিরিক্ত সিনট্যাক্স ছাড়াই সরাসরি ব্যবহার করা যায়—শুধু color: #1E90FF; লিখলেই হয়। অন্যদিকে আরজিবিএ বা এইচএসএলএ ফরম্যাটে আলফা চ্যানেল থাকে, কিন্তু হেক্সের ছয় অঙ্কের সংস্করণে তা থাকে না। তাই এই টুলটি আলফা মান আলাদাভাবে রিপোর্ট করে, যা ব্যবহারকারীকে বুঝতে সাহায্য করে যে পিক্সেলটি কতটা স্বচ্ছ।
ডিজাইনার ও ডেভেলপারদের জন্য হেক্সের আরেকটি বড় সুবিধা হলো এটি ডিভাইস-ইন্ডিপেন্ডেন্ট—অর্থাৎ নির্দিষ্ট একটি হেক্স কোড যেকোনো ডিভাইসে একই রঙ দেখাবে (যদি স্ক্রিন ক্যালিব্রেশন স্বাভাবিক থাকে)। তাই ব্র্যান্ডিং, ইউআই ডিজাইন, ও সিএসএস ওয়ার্কফ্লোতে হেক্স অপরিহার্য।
সঠিক পিক্সেল বাছাইয়ের গুরুত্ব: ম্যাগনিফায়ার ও কীবোর্ড নিয়ন্ত্রণ
ইমেজ কম্প্রেশন (বিশেষ করে JPEG) এবং অ্যান্টি-আলিয়াসিংয়ের কারণে একটি আপাতদৃষ্টিতে সমতল রঙের এলাকার পিক্সেলগুলোতে সামান্য তারতম্য থাকতে পারে। উদাহরণস্বরূপ, একটি লাল বর্গের ধারে পিক্সেলে লালের সাথে কিছু সাদা বা কালো মিশে থাকতে পারে। তাই আপনি যে পিক্সেলটি বাছাই করছেন সেটি সঠিক কিনা তা নিশ্চিত করার জন্য টুলটি একটি ম্যাগনিফাইড ভিউ (বড় করে দেখার উইন্ডো) প্রদান করে। এটি ব্যবহার করে আপনি পিক্সেল-লেভেলের নির্ভুলতা অর্জন করতে পারেন।
কীবোর্ড নেভিগেশন আরেকটি গুরুত্বপূর্ণ বৈশিষ্ট্য যারা মাউস ব্যবহার করতে পারেন না বা আরও সূক্ষ্ম নিয়ন্ত্রণ চান তাদের জন্য। তীর চিহ্ন দিয়ে ১ পিক্সেল করে সরানো যায়, Shift ধরে ১০ পিক্সেল করে সরানো যায়। Enter বা Space দিয়ে রঙ সেভ করা যায়। এটি বিশেষভাবে উপযোগী যখন আপনাকে একটি নির্দিষ্ট স্থানের সঠিক পিক্সেলটি নিতে হবে, যেমন একটি আইকনের কোণা বা একটি লাইনের প্রান্ত।
কারা এই টুল ব্যবহার করেন এবং কেন
এই টুলটি প্রধানত তিন ধরনের ব্যবহারকারীর জন্য ডিজাইন করা হয়েছে:
- ডিজাইনার যারা রেফারেন্স ইমেজ থেকে সুনির্দিষ্ট রঙ বের করে ইউআই ডিজাইনে ব্যবহার করতে চান।
- ডেভেলপার যারা সিএসএস-এ সরাসরি ব্যবহারের জন্য হেক্স কোড (যেমন
#1E90FF) চান, কোনো অতিরিক্ত ফাংশন কল ছাড়া। - কন্টেন্ট ক্রিয়েটর যারা ব্র্যান্ডিং, থাম্বনেইল বা সোশ্যাল মিডিয়া গ্রাফিক্সের জন্য ইমেজ থেকে রঙ নমুনা করেন।
ফ্যাক্ট শিটে উল্লিখিত “যেকোনো ব্যক্তি” যিনি একটি ইমেজ থেকে হেক্স কালার কোড কপি করতে চান—লোগো, ফটো বা স্ক্রিনশটের কোনো নির্দিষ্ট রঙ মেলানোর জন্য—তিনি এই টুলটি ব্যবহার করতে পারেন। টুলটি ক্লায়েন্ট-সাইডে কাজ করে বলে আপনার ইমেজ কোথাও আপলোড হয় না, যা গোপনীয়তার জন্যও গুরুত্বপূর্ণ।
সীমাবদ্ধতা ও গুরুত্বপূর্ণ তথ্য
টুলটির কিছু সীমাবদ্ধতা ব্যবহারকারীদের জানা প্রয়োজন:
- JPEG ইমেজের ক্ষেত্রে কম্প্রেশন অ্যালগরিদম মূল পিক্সেলের মান পরিবর্তন করে দেয়। তাই একটি এলাকার সব পিক্সেল একই রকম দেখালেও প্রকৃতপক্ষে সামান্য ভিন্ন হতে পারে।
- অ্যান্টি-আলিয়াসিং (মসৃণকরণ) প্রক্রিয়ায় একটি বস্তুর ধারে পিক্সেলগুলো পটভূমির রঙের সাথে মিশে যায়, যা বাছাই করা রঙকে প্রভাবিত করে।
- সেমি-ট্রান্সপারেন্ট পিক্সেল ইমেজে যেমন আছে তেমনই পড়া হয়—পেছনের কোনো ব্যাকগ্রাউন্ড বিবেচনায় নেওয়া হয় না। তাই একটি লোগোর প্রান্তে থাকা ৫০% স্বচ্ছ পিক্সেলের রঙ বের করলে সেটি আসলে লোগোর রঙ ও ব্যাকগ্রাউন্ডের মিশ্রণ নয়, শুধু স্বচ্ছ পিক্সেলের নিজস্ব আরজিবি মান।
- ইমেজের দীর্ঘতম দিক ৪০৯৬ পিক্সেলের বেশি হলে স্কেল ডাউন করা হয়, তাই অতি উচ্চ রেজোলিউশনের ইমেজে কিছু সূক্ষ্ম বিবরণ হারিয়ে যেতে পারে।
প্রায়শ জিজ্ঞাসিত প্রশ্ন (FAQ)
প্রশ্ন: এই টুল কি ইমেজ আপলোড করে সার্ভারে পাঠায়?
উত্তর: না, পুরো প্রক্রিয়াটি আপনার ব্রাউজারেই ঘটে (ক্লায়েন্ট-সাইড)। ইমেজ কোথাও আপলোড হয় না—এটি সম্পূর্ণ প্রাইভেট।
প্রশ্ন: হেক্স কোডে কি আলফা (স্বচ্ছতা) অন্তর্ভুক্ত থাকে?
উত্তর: ছয় অঙ্কের হেক্স কোডে (যেমন #FF5733) আলফা চ্যানেল থাকে না। আপনার পিক্সেল যদি আধা-স্বচ্ছ হয়, টুলটি আলাদাভাবে “Alpha ‹n›%” দেখায়। আট অঙ্কের হেক্স (যেমন #FF573380) আলাদা একটি ফরম্যাট, কিন্তু এই টুলটি শুধু ছয় অঙ্কের হেক্স দেখায়।
প্রশ্ন: একই রঙের একাধিক পিক্সেল আলাদা আলাদা হেক্স মান দেখাচ্ছে—কেন?
উত্তর: JPEG কম্প্রেশন বা অ্যান্টি-আলিয়াসিংয়ের কারণে একটি এলাকার পিক্সেলের প্রকৃত মান ভিন্ন হতে পারে। টুলটি ইমেজে ডাটা যেমন আছে তেমনই দেখায়। ম্যাগনিফায়ার ব্যবহার করে সঠিক পিক্সেল নির্বাচন করুন।
প্রশ্ন: হিস্টোরিতে কতগুলি রঙ সেভ করা যায়?
উত্তর: সর্বোচ্চ ১২টি আলাদা রঙ। একই RGB মান কিন্তু ভিন্ন আলফা থাকলে সেটি আলাদা এন্ট্রি হিসেবে গণ্য হয়।
প্রশ্ন: মোবাইল বা ট্যাবলেটে কি এই টুল কাজ করে?
উত্তর: হ্যাঁ, যেকোনো আধুনিক ব্রাউজারে কাজ করে, যেখানে ক্যানভাস API সাপোর্টেড। কীবোর্ড নেভিগেশন মোবাইলে কাজ নাও করতে পারে—সেক্ষেত্রে টাচ বা মাউস ব্যবহার করুন।
প্রশ্ন: আমি ভুলে একটি ইমেজ ড্রপ করেছি—কিভাবে রিসেট করব?
উত্তর: “Start over” বাটনে ক্লিক করুন। এটি ইমেজ, হিস্টোরি এবং সব সেটিংস রিসেট করে প্রাথমিক অবস্থায় ফিরিয়ে নেয়।