ইমেজ কালার পিকার

ইমেজ কালার পিকার কীভাবে ব্যবহার করবেন

1. আপনার ইমেজ যোগ করুন — একটি ফটো, স্ক্রিনশট বা লোগো ড্রপ জোনে টেনে আনুন, অথবা ব্রাউজ-এ ক্লিক করুন। এটি আপনার ডিভাইসে পড়া হয়; কিছুই আপনার ব্রাউজার থেকে বাইরে যায় না।
2. প্রিভিউ করতে হোভার করুন — ছবির উপর পয়েন্টার নাড়ান। জুম লুপ কার্সরের নিচের অংশ বড় করে দেখায় এবং রিডআউট লাইভ রং দেখায় যাতে আপনি সঠিক পিক্সেলে পৌঁছাতে পারেন।
3. বেছে নিতে ক্লিক করুন — রং লক করতে ক্লিক করুন। এর HEX, RGB ও HSL এক-ক্লিক কপি বোতামসহ দেখা যায়, এবং এটি আপনার সাম্প্রতিক-রঙের স্ট্রিপে যোগ হয়।
4. প্যালেট ধরুন — পুরো ইমেজের প্রধান রংগুলো স্বয়ংক্রিয়ভাবে বের করা হয়। যেকোনো সোয়াচের হেক্স কপি করতে তার উপর ক্লিক করুন, অথবা পুরো প্যালেটটি CSS ভেরিয়েবল বা JSON অ্যারে হিসেবে কপি করুন।

বের করা রং দিয়ে আপনি কী করতে পারেন

• কোনো ব্র্যান্ডের সঙ্গে মেলান — আন্দাজে রং ঠিক করার বদলে সঠিক ব্র্যান্ড রং পড়তে একটি লোগো বা স্ক্রিনশট ফেলুন।
• কোনো ফটো থেকে থিম তৈরি করুন — কোনো হিরো ইমেজ বা মুডবোর্ডকে কোনো সাইট বা স্লাইড ডেকের জন্য CSS ভেরিয়েবলের সমন্বিত প্যালেটে রূপান্তর করুন।
• কোনো UI উপাদান স্যাম্পল করুন — কোনো অ্যাপ বা চার্টের স্ক্রিনশট থেকে সঠিক পটভূমি, বর্ডার বা টেক্সট রং বেছে নিন।
• কোনো ডিজাইন পুনর্নির্মাণ করুন — কোনো অনুপ্রেরণা-শট থেকে রং বের করুন যাতে আপনি তা পুনরুৎপাদন বা পুনরায় রং করতে পারেন।
• কন্ট্রাস্ট যাচাই করুন — কোনো বেছে নেওয়া রং পঠনযোগ্য কিনা নিশ্চিত করতে তা WCAG কন্ট্রাস্ট চেকারে কপি করুন।

রঙের ফরম্যাট দ্রুত রেফারেন্স

কোনো ইমেজে রং কীভাবে সংরক্ষিত হয়

আপনি যখন কোনো পিক্সেলে ক্লিক করেন, যে মানটি আপনি ফেরত পান তা নিহিত আছে ডিজিটাল ইমেজ কীভাবে রং উপস্থাপন করে তার মধ্যে। আপনার স্ক্রিনের প্রায় প্রতিটি ফটো প্রতি চ্যানেলে ৮ বিট ব্যবহার করে — লাল, সবুজ ও নীলের জন্য একটি করে বাইট — যা প্রতি চ্যানেলে ২৫৬টি সম্ভাব্য স্তর (0–255) দেয়। তিনটি চ্যানেল মিলান এবং আপনি পাবেন ২৪-বিট "ট্রুকালার", যা 256 × 256 × 256 = 16,777,216 ভিন্ন রং, সেই বিখ্যাত "১.৬৭ কোটি"। একটি চতুর্থ চ্যানেল, আলফা, স্বচ্ছতা রেকর্ড করতে আরও ৮ বিট যোগ করে, যা একটি ৩২-বিট RGBA পিক্সেল তৈরি করে। সেই আলফা চ্যানেলই কোনো লোগোকে নরম, দেখা-যায়-এমন কিনারা দেয় — এবং সে কারণেই কোনো অ্যান্টি-অ্যালিয়াসড কিনারায় স্যাম্পল করা রং কোনো একটির বদলে দুটি রঙের মিশ্রণ হয়।

sRGB, গামা এবং স্ক্রিন কেন একমত হয় না

কোনো পিক্সেলের rgb(58, 123, 255) কোনো নিরঙ্কুশ রং নয় — এটি কোনো রঙের স্থানে একটি রং। ওয়েবের জন্য এবং কোনো এম্বেড করা প্রোফাইল ছাড়া যেকোনো ইমেজের জন্য ডিফল্ট হলো sRGB, যা Hewlett-Packard ও Microsoft যৌথভাবে তৈরি করা একটি মানদণ্ড (১৯৯৬-এ প্রস্তাবিত, ১৯৯৯-এ IEC কর্তৃক 61966-2-1 হিসেবে মানকীকৃত)। sRGB-এর দুটি বিবরণ ব্যাখ্যা করে কেন কোনো মান প্রত্যাশার চেয়ে আলাদা দেখাতে পারে। প্রথমত, sRGB মানগুলো একটি অ-রৈখিক গামা বক্র দিয়ে সংরক্ষণ করে, তাই সংখ্যাগুলো কাঁচা আলোর তীব্রতা নয় এবং কোনো ডিসপ্লেকে তা ডিকোড করতে হয়। দ্বিতীয়ত, সেই ডিকোডিং — সঙ্গে প্রতিটি মনিটরের উজ্জ্বলতা, ক্যালিব্রেশন ও ইমেজের নিজস্ব রঙের প্রোফাইল — মানে হলো একই RGB মান বিভিন্ন স্ক্রিনে সত্যিই সামান্য আলাদা রেন্ডার হয়। নতুন ওয়াইড-গ্যামাট ডিসপ্লে Display P3 নামে একটি বড় স্থান ব্যবহার করে (sRGB-এর চেয়ে প্রায় ২৫% বেশি রং), তাই কোনো P3 ইমেজ থেকে স্যাম্পল করা কোনো উজ্জ্বল লাল আসলে sRGB যা বর্ণনা করতে পারে তার বাইরে পড়তে পারে। পিক্সেল-সঠিক নির্বাচনের জন্য, এই টুল যে মান পড়ে তা সঠিক; এটি দৃশ্যরূপ যা স্ক্রিন-থেকে-স্ক্রিন বদলায়।

HSL বনাম HSV, এবং হেক্সের সংক্ষিপ্ত রূপ

উপরের রেফারেন্স টেবিলে HEX, RGB ও HSL তালিকাভুক্ত, তবে কিছু সূক্ষ্মতা জানার মতো। HEX-এর সংক্ষিপ্ত রূপ আছে: #8A3-এর মতো ৩-অঙ্কের শর্টহ্যান্ড #88AA33-এ বিস্তৃত হয় (প্রতিটি অঙ্ক দ্বিগুণ, যা কেবল তখনই কাজ করে যখন কোনো চ্যানেলের দুটি অঙ্ক মেলে), এবং একটি ৮-অঙ্কের রূপ #RRGGBBAA শেষে একটি আলফা বাইট যোগ করে।

ইমেজ এডিটরে আপনি HSV-এরও (Hue, Saturation, Value, কখনো কখনো HSB বলা হয়) দেখা পাবেন, এবং একে HSL-এর সঙ্গে গুলিয়ে ফেলা সহজ। দুটিতেই হিউ একই, কিন্তু তৃতীয় উপাদানটি এমনভাবে আলাদা যা গুরুত্বপূর্ণ: HSL-এ, ১০০% লাইটনেস সবসময় বিশুদ্ধ সাদা; HSV-এ, ১০০% ভ্যালু হিউয়ের সবচেয়ে উজ্জ্বল রূপ, সাদা নয়। তাই "এটি পুরো উপরে তুলে দাও" মানে HSL-এ সাদা এবং HSV-এ একটি স্যাচুরেটেড রং। তখন মনে রাখার মতো যখন Photoshop (HSV) থেকে কপি করা কোনো মান CSS-এ প্রত্যাশা মতো আচরণ করে না — যা HSL সমর্থন করে, HSV নয়।

এই টুল বনাম ব্রাউজারের নেটিভ আইড্রপার

আধুনিক Chromium ব্রাউজার একটি নেটিভ EyeDropper API দেয় (Chrome ও Edge 95+, ২০২১ থেকে) যা কোনো ওয়েব পেজকে আপনার স্ক্রিনের যেকোনো জায়গা থেকে রং স্যাম্পল করতে দেয়, ব্রাউজার উইন্ডোর বাইরেও। এটি সত্যিই সুবিধাজনক, তবে এর দুটি সীমা আছে: এটি Firefox বা Safari-তে সমর্থিত নয়, এবং এটি মূল ইমেজ ডেটার বদলে স্ক্রিন-রেন্ডার করা, স্কেল করা পিক্সেল পড়ে। এই ইমেজ কালার পিকার পরিপূরক পদ্ধতি নেয় — এটি সরাসরি আপনার আপলোড করা ইমেজের আসল পিক্সেল ডেটা থেকে ক্যানভাসের মাধ্যমে স্যাম্পল করে। এর মানে এটি প্রতিটি ব্রাউজারে কাজ করে, এটি সেই আসল সংরক্ষিত রং পড়ে, আপনার ডিসপ্লে যা রেন্ডার করেছে তা নয়, এবং আপনার ইমেজ কখনো পেজ থেকে বাইরে যায় না।

প্রধান-রঙের প্যালেট কীভাবে বের করা হয়

লক্ষ লক্ষ পিক্সেলের কোনো ফটো থেকে মুষ্টিমেয় প্রতিনিধি রং বের করা একটি ক্লাসিক সমস্যা যাকে রঙের কোয়ান্টাইজেশন বলা হয়, এবং এর কয়েকটি সুপরিচিত পদ্ধতি আছে:

• মিডিয়ান কাট — ক্লাসিক অ্যালগরিদম (Paul Heckbert, ১৯৮০-এর দশকের শুরু)। এটি সব রং একটি বাক্সে রাখে, বারবার বাক্সটিকে তার সবচেয়ে দীর্ঘ অক্ষ বরাবর মিডিয়ান রঙে ভাগ করে, এবং প্রতিটি চূড়ান্ত বাক্সকে একটি প্যালেট সোয়াচে গড় করে।
• অক্ট্রি — রংগুলোকে একটি আট-দিকের গাছে ঢোকায় যা রঙের ঘনককে উপবিভক্ত করে, সবচেয়ে কম ব্যবহৃত শাখাগুলো ততক্ষণ মিলিয়ে দেয় যতক্ষণ না লক্ষ্যকৃত রঙের সংখ্যা বাকি থাকে। মেমরি-সাশ্রয়ী।
• k-মিনস ক্লাস্টারিং — পিক্সেলগুলোকে কয়েকটি গতিশীল "কেন্দ্র" রঙের চারপাশে গোষ্ঠীবদ্ধ করে, ততক্ষণ পুনরাবৃত্তি করে যতক্ষণ না তারা প্রধান রঙে স্থির হয়। সঠিক কিন্তু ধীর।
• হিস্টোগ্রাম বাকেটিং — দ্রুত, সরল পদ্ধতি (এবং এই টুল যা ব্যবহার করে): রঙের ঘনককে বাকেটে ভাগ করুন, গণনা করুন প্রতিটিতে কতগুলো পিক্সেল পড়ে, এবং সবচেয়ে ভরা, দৃশ্যত আলাদা বাকেটগুলো বেছে নিন।

প্রসঙ্গত, আপনার ১৯৯০-এর দশকের পুরনো "ওয়েব-সেফ" ২১৬-রঙের প্যালেট মনে থাকতে পারে, যখন অনেক মনিটর কেবল ২৫৬টি রং দেখাতে পারত এবং তাদের মধ্যে ২১৬টি Mac ও Windows-এ একই রকম রেন্ডার হতো। প্রতিটি আধুনিক ডিভাইস লক্ষ লক্ষ রং দেখানোর সঙ্গে, সেই প্যালেট এখন সম্পূর্ণ একটি ঐতিহাসিক কৌতূহল মাত্র।

একটি রংকে প্যালেটে রূপান্তর — এবং তা পঠনযোগ্য রাখা

একবার আপনি কোনো রং বেছে নিলে, প্রাথমিক রঙ-চাকা তত্ত্ব তার চারপাশে একটি স্কিম তৈরিতে সাহায্য করে। একটি পরিপূরক (কমপ্লিমেন্টারি) জোড় সর্বোচ্চ কন্ট্রাস্টের জন্য ঠিক বিপরীত হিউ (প্রায় ১৮০° দূরে) ব্যবহার করে; সাদৃশ্য (অ্যানালগাস) রং চাকায় একে অপরের পাশে (প্রায় ৩০–৬০°-এর মধ্যে) একটি শান্ত, সামঞ্জস্যপূর্ণ অনুভূতির জন্য থাকে; একটি ত্রিভুজাকার (ট্রায়াডিক) স্কিম ভারসাম্যের সঙ্গে শক্তির জন্য ১২০° সমদূরত্বে তিনটি হিউ নেয়; এবং একটি একবর্ণী (মনোক্রোম্যাটিক) স্কিম একীভূত রূপের জন্য একটিমাত্র হিউয়ের লাইটনেস ও স্যাচুরেশন পরিবর্তন করে।

আপনি যা-ই বেছে নিন, তা অভিগম্যতা (অ্যাক্সেসিবিলিটি)-র জন্য যাচাই করুন। WCAG নির্দেশিকা AA স্তর পূরণ করতে সাধারণ টেক্সটের জন্য অন্তত 4.5:1 এবং বড় টেক্সটের জন্য 3:1 কন্ট্রাস্ট অনুপাত দাবি করে (এবং কঠোরতর AAA স্তরের জন্য 7:1), তাই যে রং পটভূমি হিসেবে সুন্দর দেখায় তা টেক্সট রং হিসেবে ব্যর্থ হতে পারে। WCAG এটিও পরামর্শ দেয় যে অর্থ বোঝাতে কখনো শুধুমাত্র রঙের উপর নির্ভর করবেন না — একটি লেবেল, আইকন বা প্যাটার্ন যোগ করুন — কারণ প্রায় ৮% পুরুষ ও ০.৫% নারীর কোনো না কোনো রূপের রঙ-দৃষ্টির ঘাটতি থাকে। এখানে বেছে নেওয়া যেকোনো রং আপনি সরাসরি WCAG কন্ট্রাস্ট চেকারে পেস্ট করে নিশ্চিত করতে পারেন যে তা পাস করে।

ব্র্যান্ড ও প্রিন্ট কাজের জন্য একটি শেষ সঠিকতা-নোট: স্ক্রিন রংকে আলো (RGB) দিয়ে মিশ্রিত করে, যেখানে প্রিন্টিং প্রেস তা কালি (CMYK) দিয়ে মিশ্রিত করে, এবং CMYK রঙের একটি ছোট পরিসর পুনরুৎপাদন করতে পারে। এর মানে আপনি কোনো ভৌত বা প্রিন্ট ব্র্যান্ড রং স্ক্রিনে তার ফটো স্যাম্পল করে সম্পূর্ণ ধরতে পারবেন না — প্রেস-সঠিক কাজের জন্য, কোনো বেছে নেওয়া স্ক্রিন মানের বদলে সবসময় ব্র্যান্ডের অফিশিয়াল CMYK বা Pantone স্পেসিফিকেশন ব্যবহার করুন।

একটি সঠিক রিডিং পাওয়া

একটি কালার পিকার একটি পিক্সেলের আক্ষরিক মান ফেরত দেয়, তাই সামান্য কৌশলে আপনি কোনো কাছাকাছি-মেলা রঙের বদলে যে রং সত্যিই চান তা পান:

• কোনো সমতল, কেন্দ্রীয় এলাকা থেকে স্যাম্পল করুন যে অংশটির আপনি যত্ন নেন তার — কখনো ঠিক কোনো কিনারায় নয়, যেখানে অ্যান্টি-অ্যালিয়াসিং দুটি রংকে একটি মধ্যবর্তী পিক্সেলে মিশিয়ে দিয়েছে যা কোনোটির সঙ্গে মেলে না।
• জুম লুপ ব্যবহার করুন সঠিক পিক্সেলে পৌঁছাতে। সাধারণ আকারে একটি পিক্সেল খুব ছোট, এবং একটি পিক্সেল সরে গেলে তা লক্ষণীয়ভাবে আলাদা মান হতে পারে।
• কোনো লসলেস উৎসকে অগ্রাধিকার দিন। JPEG কম্প্রেশন কোনো "সমতল" রঙেও পিক্সেল সামান্য বদলে দেয়, তাই যে এলাকা অভিন্ন দেখায় তা সম্পূর্ণ নয়। একটি PNG বা মূল অ্যাসেট একটি পরিষ্কার, আরও অভিন্ন রিডিং দেয়; কোনো সমতল UI রঙের স্ক্রিনশট আদর্শ।
• যখন সম্ভব, আর্টওয়ার্ক থেকে বেছে নিন, তার ফটো থেকে নয়। একটি লোগো ফাইল আপনাকে আসল ব্র্যান্ড রং দেয়; কোনো সাইন বা স্ক্রিনের ফটোকে আলো, ক্যামেরা ও কম্প্রেশন পুনরায় আকার দিয়েছে।

হেক্স, RGB বা HSL — আপনার CSS-এ কোনটি রাখবেন

তিনটিই একই রং বর্ণনা করে, তাই পছন্দটি হলো আপনি এটি দিয়ে কী করছেন সে সম্পর্কে। HEX হলো সেই সংক্ষিপ্ত ডিফল্ট যা আপনি অধিকাংশ স্টাইলশিট ও ডিজাইন টুলে কপি করবেন। RGB তখন সুবিধাজনক যখন আপনি কাঁচা 0–255 চ্যানেল নিয়ে কাজ করছেন বা rgba() -এর মাধ্যমে কোনো আলফা মান চান। HSL হলো সেটি যা তখন বেছে নেবেন যখন আপনি কোনো রংকে শুধু বলার বদলে তা সমন্বয় করতে চান: এটি চাকার চারপাশে সরাতে হিউ ঠেলুন, টিন্ট তৈরিতে লাইটনেস বাড়ান বা শেডের জন্য কমান, বা স্যাচুরেশন ধূসরের দিকে নামান — সবই একই রঙ পরিবারে থেকে। এটাই HSL-কে একটিমাত্র বেস রং থেকে হোভার অবস্থা, নিষ্ক্রিয় শৈলী ও অভিন্ন টিন্ট/শেড র‍্যাম্প তৈরিতে চমৎকার করে। এই পিকার প্রতিটি নির্বাচিত রঙের জন্য তিনটিই দেখায়, যাতে আপনি কাজের উপযোগী যেটি তা ধরতে পারেন।

কোনো প্যালেটকে ডিজাইন টোকেন হিসেবে সংরক্ষণ করা

আপনি যখন কোনো প্যালেট বের করেন, আপনার পুরো স্টাইলশিট জুড়ে কাঁচা হেক্স কোড ছড়িয়ে দেওয়ার প্রলোভন এড়ান। আধুনিক পদ্ধতি হলো প্রতিটি রং একবার CSS কাস্টম প্রপার্টি (একটি CSS ভেরিয়েবল) হিসেবে সংজ্ঞায়িত করা এবং সর্বত্র তা নাম ধরে উল্লেখ করা — যাকে ডিজাইনাররা "ডিজাইন টোকেন" বলে, তার ভিত্তি:

• প্যালেটটি একটি জায়গায় ঘোষণা করুন, সাধারণত :root-এ — উদাহরণস্বরূপ --brand: #3a7bff; এবং --accent: #f59e0b;।
• এটি যেকোনো জায়গায় প্রয়োগ করুন color: var(--brand); বা background: var(--accent); দিয়ে।
• রংটি উৎসে একবার বদলান এবং প্রতিটি ব্যবহার আপডেট হয় — ফাইল জুড়ে কোনো খোঁজ-ও-বদল নয়, এবং এটাই ঠিক সেই উপায় যেভাবে লাইট/ডার্ক থিম স্যুইচিং তৈরি হয়।

সে কারণেই এই টুলের "CSS কপি করুন" বোতাম প্যালেটটিকে পেস্ট-করার-জন্য-প্রস্তুত --color-1 … --color-5 ভেরিয়েবল হিসেবে আউটপুট করে: এটি সরাসরি কোনো :root ব্লকে আপনার রঙ স্কিমের একমাত্র সত্য-উৎস হিসেবে বসে যায়।

স্বচ্ছতা সম্পর্কে একটি নোট

ইমেজ লাল, সবুজ ও নীলের বাইরে একটি চতুর্থ চ্যানেল বহন করতে পারে — আলফা, যা রেকর্ড করে প্রতিটি পিক্সেল কতটা অস্বচ্ছ। আপনি যখন কোনো আংশিক-স্বচ্ছ পিক্সেল স্যাম্পল করেন, যে রং আপনি পান তা হলো সেই দৃশ্যমান RGB যা ক্যানভাস কম্পোজিট করে, যেখানে CSS স্বচ্ছতা আলাদাভাবে প্রকাশ করে: হয় ৮-অঙ্কের হেক্স #RRGGBBAA হিসেবে বা rgba() বা আধুনিক hsl() সিনট্যাক্সে একটি আলফা মান সহ। একটি ইচ্ছাকৃত আচরণ জানার মতো — এই টুল যখন বের করা প্যালেট তৈরি করে তখন এটি সম্পূর্ণ স্বচ্ছ পিক্সেল বাদ দেয়। সে কারণেই স্বচ্ছ পটভূমিতে কোনো লোগো ফেললে তা আপনাকে খালি জায়গা অন্তর্ভুক্ত করা কোনো ঘোলাটে গড়ের বদলে ব্র্যান্ডের আসল রং দেয়, যা ঠিক তা-ই যা আপনি চান যখন কোনো আইকন বা PNG এক্সপোর্ট থেকে কোনো প্যালেট বের করছেন।

প্রায়শই জিজ্ঞাসিত প্রশ্ন