Click or tap anywhere on the image to pick a color. On a computer, move the mouse to preview the color under the pointer.
Picked color
Colors in this image
একটা ছবির দিকে তাকিয়ে আছেন, আর ভাবছেন ওই নীল রংটার কোড ঠিক কত? ডিজাইন করতে বসে ব্র্যান্ডের রঙটা মেলাতে পারছেন না? এই সমস্যাটা শুধু আপনার একার না। যারা ওয়েবসাইট বানান, গ্রাফিক ডিজাইন করেন, কিংবা ক্যানভা-ফটোশপে কাজ করেন, তাদের প্রায় প্রতিদিন কোনো না কোনো রঙের কোড দরকার হয়।
এই লেখায় আপনি শিখবেন কীভাবে ছবি থেকে সরাসরি কালার কোড বের করবেন, HEX আর RGB-এর পার্থক্য কী, প্রিন্টের জন্য কখন CMYK লাগে, আর একটা ফ্রি অনলাইন টুল দিয়ে পুরো কাজটা কয়েক সেকেন্ডে কীভাবে সারবেন। লেখাটা ডিজাইনার, ডেভেলপার আর শিক্ষার্থী সবার কাজে লাগবে।
ছবি থেকে রঙের কোড বের করতে চাইলে একটা কালার পিকার টুলই যথেষ্ট। ছবি আপলোড বা পেস্ট করে ছবির যেকোনো জায়গায় ক্লিক করলেই সেই পিক্সেলের HEX, RGB, HSL আর CMYK কোড পেয়ে যাবেন। এই কালার পিকার টুলটি পুরোটাই আপনার ব্রাউজারে চলে, কোনো ছবি সার্ভারে আপলোড হয় না, তাই আপনার ফাইল ব্যক্তিগত থাকে।
এক নজরে কী কী পাবেন:
- ছবির যেকোনো পিক্সেলের নিখুঁত রঙ
- একই রঙের HEX, RGB, HSL আর CMYK চারটা ফরম্যাট
- ছবির প্রধান রঙগুলোর প্যালেট
- যেকোনো রঙের হালকা ও গাঢ় শেড
- আগে তোলা রঙের একটা তালিকা
- হাতে থাকা কোড এক ফরম্যাট থেকে আরেক ফরম্যাটে রূপান্তর
কালার পিকার দিয়ে ঠিক কী করা যায়
সবচেয়ে সহজ কাজটা হলো ছবি থেকে রঙ তোলা। ধরুন একটা লোগোর ছবি আছে, আপনি ওই লোগোর ঠিক একই নীল রং আপনার ওয়েবসাইটে বসাতে চান। ছবিটা টুলে এনে লোগোর ওই অংশে ক্লিক করুন, কোড কপি করে কাজে লাগিয়ে দিন। চোখের আন্দাজে রং মেলানোর দিন শেষ।
এর বাইরেও কিছু কাজ আছে যেগুলো অনেকে খেয়াল করেন না:
- প্রধান রঙের প্যালেট। একটা ছবি আপলোড করলে টুল বলে দেয় ওই ছবিতে কোন কোন রঙ সবচেয়ে বেশি আছে। কোনো ব্র্যান্ডের কালার স্কিম বোঝার জন্য এটা দারুণ কাজে দেয়।
- শেড তৈরি। একটা রং নিলে তার হালকা আর গাঢ় সংস্করণ পাওয়া যায়। বাটনের হোভার, বর্ডার বা ব্যাকগ্রাউন্ডের জন্য এই শেডগুলো দরকার হয়।
- কোড কনভার্টার। হাতে HEX কোড আছে কিন্তু CMYK দরকার? সরাসরি লিখে দিলেই রূপান্তর হয়ে যাবে।
- স্ক্রিন থেকে পিক। সাপোর্ট করে এমন ব্রাউজারে (ক্রোম, এজের নতুন ভার্সন) একটা “Pick from screen” বোতাম আসে। এটা দিয়ে স্ক্রিনের যেকোনো জায়গা থেকে রঙ তুলতে পারবেন, এমনকি অন্য উইন্ডো থেকেও।
কীভাবে ব্যবহার করবেন
ধাপগুলো খুবই সোজা:
- টুলটি খুলুন।
- ছবি আপলোড করুন, ড্র্যাগ করে ছেড়ে দিন, অথবা সরাসরি পেস্ট করুন (Ctrl+V)।
- ছবির যে রঙটা দরকার, সেই জায়গায় ক্লিক করুন।
- HEX, RGB, HSL বা CMYK কোড কপি করুন।
ছবি ছাড়াই শুধু কোড রূপান্তর করতে চাইলে কনভার্টার অংশে গিয়ে কোড লিখলেই হবে।
HEX, RGB, HSL আর CMYK: কোনটা কখন লাগে
অনেকে এই চারটা শব্দ শুনে ঘাবড়ে যান। আসলে এগুলো একই রঙ লেখার আলাদা আলাদা পদ্ধতি। কোনটা কোথায় কাজে লাগে, নিচের টেবিলে পরিষ্কার করে দিলাম।
| ফরম্যাট | দেখতে কেমন | কোথায় লাগে |
|---|---|---|
| HEX | #2E86DE | ওয়েবসাইট, CSS, HTML |
| RGB | rgb(46, 134, 222) | স্ক্রিন ডিজাইন, ডিজিটাল আর্ট |
| HSL | hsl(209, 72%, 53%) | রঙের শেড আর টোন ঠিক করতে সুবিধা |
| CMYK | 79, 40, 0, 13 | প্রিন্টিং, ছাপার কাজ |
সহজ নিয়ম মনে রাখুন। স্ক্রিনে দেখানোর জিনিস, মানে ওয়েবসাইট বা অ্যাপ হলে HEX বা RGB নিন। কাগজে ছাপাবেন, যেমন ভিজিটিং কার্ড, ব্যানার, বই, তাহলে CMYK নিন। প্রেস থেকে প্রিন্ট আলাদা রঙের কালি মিশিয়ে কাজ করে, তাই প্রিন্টের জন্য CMYK কোড চাওয়া হয়। আর HSL তখনই নেবেন, যখন একই রঙকে একটু হালকা বা গাঢ় করতে চান, কারণ এতে শুধু একটা সংখ্যা বদলালেই শেড পাল্টে যায়।
কাদের জন্য এই টুল সবচেয়ে কাজের
- ওয়েব ডেভেলপার। CSS-এ রঙ বসানোর জন্য HEX কোড লাগবেই। ক্লায়েন্টের পাঠানো ডিজাইন থেকে সরাসরি কোড তুলে নেওয়া যায়।
- গ্রাফিক ডিজাইনার। ব্র্যান্ড কালার মেলানো, প্যালেট বানানো, শেড ঠিক করা সব এক জায়গায়।
- প্রিন্ট ব্যবসায়ী। কার্ড বা ব্যানার ছাপানোর আগে CMYK কোড হাতে থাকা জরুরি।
- শিক্ষার্থী। ডিজাইন বা প্রোগ্রামিং শিখছেন যারা, তাদের রঙ নিয়ে পরীক্ষা করার জন্য ভালো।
ছোট কিছু বাস্তব পরামর্শ
প্রিন্টের কাজে যাওয়ার আগে একটা কথা মনে রাখবেন, স্ক্রিনে যে রঙ উজ্জ্বল দেখায়, ছাপার পর তা একটু চাপা মনে হতে পারে। এটা স্বাভাবিক, কারণ স্ক্রিন আলো দিয়ে রং বানায় আর কাগজ কালি দিয়ে। তাই গুরুত্বপূর্ণ কাজে একটা টেস্ট প্রিন্ট করিয়ে নেওয়া বুদ্ধিমানের কাজ।
ব্র্যান্ডের রঙ ঠিক রাখতে চাইলে প্রধান রঙগুলোর HEX কোড একটা জায়গায় লিখে রাখুন। পরে প্রতিবার ছবি থেকে তোলার দরকার পড়বে না।
সুবিধা ও সীমাবদ্ধতা
সুবিধা:
- পুরোপুরি ফ্রি, কোনো সাইনআপ লাগে না
- ছবি ব্রাউজারেই থাকে, সার্ভারে যায় না
- একসাথে চারটা ফরম্যাট পাওয়া যায়
- ইনস্টল করার ঝামেলা নেই
সীমাবদ্ধতা:
- “Pick from screen” সব ব্রাউজারে কাজ করে না, নতুন ক্রোম বা এজ লাগে
- CMYK মান প্রিন্টারভেদে সামান্য আলাদা দেখাতে পারে, কারণ প্রিন্টিং-এ রঙের নিখুঁত হিসাব প্রেসের ওপরও নির্ভর করে
প্রায়ই জিজ্ঞেস করা প্রশ্ন
ছবি কি কোথাও আপলোড হয়? না। টুলটি পুরোটাই আপনার ব্রাউজারে চলে। ছবি আপনার ডিভাইসেই থাকে, কোনো সার্ভারে পাঠানো হয় না। তাই ব্যক্তিগত ছবি দিয়েও নিশ্চিন্তে কাজ করতে পারেন।
HEX আর RGB-এর মধ্যে পার্থক্য কী? দুটোই একই রঙ বোঝায়, শুধু লেখার ধরন আলাদা। HEX হলো # দিয়ে শুরু হওয়া ছয় অক্ষরের কোড, যেটা ওয়েবে বেশি ব্যবহার হয়। RGB হলো লাল, সবুজ, নীল তিনটা সংখ্যার মাধ্যমে রঙ বোঝানো। আপনি যেটা সুবিধা, সেটাই নিতে পারেন।
প্রিন্টের জন্য কোন কোড নেব? CMYK নিন। কাগজে ছাপার মেশিন এই ফরম্যাটেই কাজ করে। স্ক্রিনের HEX বা RGB কোড প্রিন্টে হুবহু আসবে না।
মোবাইলে কাজ করে কি? হ্যাঁ। ছবি আপলোড করে ক্লিক বা ট্যাপ করে রঙ তুলতে পারবেন। তবে “Pick from screen” সুবিধাটা মূলত কম্পিউটারের ব্রাউজারে ভালো চলে।
একাধিক রঙ একসাথে নেওয়া যায়? যায়। প্রতিটা ক্লিকের রঙ রিসেন্ট তালিকায় জমা হয়, তাই পরপর কয়েকটা রঙ তুলে একসাথে ব্যবহার করতে পারবেন।
শেষ কথা
রঙ মেলানো নিয়ে আর আন্দাজে কাজ করার দরকার নেই। ছবি থেকে ক্লিক করে HEX, RGB, HSL বা CMYK তুলে নিন, দরকারমতো শেড বানান, আর কোড কনভার্ট করুন এক জায়গাতেই। কাজটা ফ্রি, দ্রুত আর নিরাপদ। কালার পিকার টুলটি একবার চালিয়ে দেখুন, ডিজাইনের রঙ নিয়ে ঝামেলা অনেকটাই কমে যাবে।
