আপনার ব্লগে যোগ করুন ‘Image Color Picker Pro Tool’ (HTML/JS/Canvas Powered)

আসসালামুআলাইকুম বন্ধুরা, ওয়েবসাইট ডিজাইন, ডিজিটাল আর্ট বা গ্রাফিক্সে কাজ করার সময় সঠিক রঙের কোড খুঁজে বের করা একটি গুরুত্বপূর্ণ কাজ। স্ক্রিনশট থেকে রঙ কপি করা, তারপর অনলাইনে একটি পিকার ব্যবহার করা বেশ সময়সাপেক্ষ।

তাইতো বন্ধুরা,আজ আমি আপনার জন্য নিয়ে এসেছি একটি “Image Color Picker Pro Tool”—একটি সম্পূর্ণ ফ্রন্ট-এন্ড সমাধান, যা আপনি সহজেই আপনার Blogger-এর একটি স্ট্যাটিক পেজে যুক্ত করতে পারবেন। এর জন্য কোনো সার্ভার সাইড কোডিং বা ডেটাবেসের প্রয়োজন নেই। এটি HTML5 Canvas এবং Pure JavaScript দিয়ে তৈরি, যা ছবি আপলোড থেকে শুরু করে নির্ভুল রঙ বাছাইয়ের জন্য Loupe Magnifier এবং HSV (Hue, Saturation, Value) ফরম্যাট পর্যন্ত সাপোর্ট করে।

টুলের মূল বৈশিষ্ট্য ও কার্যকারিতা

এই টুলটি ডিজাইনার এবং ডেভেলপারদের কথা মাথায় রেখে তৈরি করা হয়েছে। এর প্রধান বৈশিষ্ট্যগুলো নিচে দেওয়া হলো:

বৈশিষ্ট্য (Feature): Pure Frontend (HTML/JS/Canvas)
বিশদ বিবরণ (Description): আপনার ব্রাউজারে সরাসরি চলে। ছবি কোথাও আপলোড হয় না, তাই এটি সম্পূর্ণ নিরাপদ (Privacy-focused)।

বৈশিষ্ট্য (Feature): Loupe Magnifier (নতুন!)
বিশদ বিবরণ (Description): মাউস বা টাচ মুভমেন্টের সময় একটি ছোট ম্যাগনিফাইং গ্লাস দেখায়, যা পিক্সেল-লেভেলে নির্ভুলভাবে রঙ বাছাই করতে সাহায্য করে।

বৈশিষ্ট্য (Feature): Multiple Color Formats
বিশদ বিবরণ (Description): HEX, RGB, HSL, এবং HSV (Hue, Saturation, Value) সহ চারটি গুরুত্বপূর্ণ কালার ফরম্যাট একসাথে প্রদর্শন করে।

বৈশিষ্ট্য (Feature): Persistent Color Palette
বিশদ বিবরণ (Description): বাছাই করা রঙগুলো সেভ করে একটি প্যালেট তৈরি করার সুবিধা, যা সেশনজুড়ে সংরক্ষিত থাকে।

বৈশিষ্ট্য (Feature): Palette Management
বিশদ বিবরণ (Description): প্যালেটে থাকা রঙগুলো সহজে কপি, ডিলিট এবং ড্র্যাগ-এন্ড-ড্রপ করে পুনর্বিন্যাস (reorder) করার ব্যবস্থা।

বৈশিষ্ট্য (Feature): Export Options
বিশদ বিবরণ (Description): তৈরি করা প্যালেটটি .json অথবা .txt ফরম্যাটে এক্সপোর্ট করার সুবিধা।

বৈশিষ্ট্য (Feature): Keyboard Shortcuts
বিশদ বিবরণ (Description): দ্রুত কাজের জন্য শর্টকাট: ‘C’ (Copy HEX) এবং ‘P’ (Add to Palette)।

 ব্যবহার করার পদ্ধতি (How to Use)

টুলটি ব্যবহার করা অত্যন্ত সহজ।

1. ছবি আপলোড (Upload Image): টুলটির ড্রপজোনে আপনার কাঙ্ক্ষিত ছবিটি Drag & Drop করুন অথবা “Or click to upload” বাটনে ক্লিক করে ফাইলটি সিলেক্ট করুন।

2. রঙ বাছাই (Pick Color): ছবিটি লোড হওয়ার পর, ক্রসহেয়ার কার্সর বা Loupe Magnifier ব্যবহার করে ছবির যেকোনো পিক্সেলের উপর ক্লিক করুন।

3. কালার ডিটেইলস দেখুন: ডানপাশে “Current Pick” সেকশনে ক্লিক করার সাথে সাথেই সেই পিক্সেলের রঙটি HEX, RGB, HSL, এবং HSV ফরমেটে দেখতে পাবেন।

4. প্যালেটে যোগ করুন (Add to Palette): যদি রঙটি সেভ করতে চান, তবে “Add to Palette” বাটনে ক্লিক করুন (অথবা ‘P’ প্রেস করুন)।

5. প্যালেট এক্সপোর্ট: আপনার পছন্দের রঙগুলো যোগ করার পরে, প্যালেটের নিচে .json বা .txt বাটনে ক্লিক করে সম্পূর্ণ প্যালেটটি সেভ করে নিন।

 Blogger এ টুলটি সেটআপ গাইড

এই টুলটিকে আপনার Blogger ব্লগে একটি স্থায়ী page হিসেবে যুক্ত করতে, আপনাকে HTML কোডটি একটি নতুন “Page”-এ পেস্ট করতে হবে।
এখান থেকে কোডটি কপি করুন

ধাপ ১: নতুন পেজ তৈরি

1. আপনার Blogger ড্যাশবোর্ডে লগইন করুন।

2. বামদিকের মেনু থেকে “Pages” (পেজেস) অপশনে ক্লিক করুন।

3. উপরে “New Page” (নতুন পৃষ্ঠা) বাটনে ক্লিক করুন।

4. পেজটির একটি title দিন, যেমন: “Image Color Picker Tool”।

ধাপ ২: HTML মোডে কোড পেস্ট

Blogger এর পোস্ট/পেজ এডিটর স্বাভাবিকভাবে “Compose View”-এ থাকে। আপনাকে কোড পেস্ট করার জন্য মোড পরিবর্তন করতে হবে।

1. পেজ এডিটরের বামদিকের উপরের কোণে, যেখানে কলমের (Pencil) আইকন আছে, সেখানে ক্লিক করুন।

2. ড্রপডাউন মেনু থেকে “HTML View” নির্বাচন করুন।

3. এবার, সম্পূর্ণ HTML কোডটি (যেটা উপরের লিংক থেকে কপি করছেন) এডিটর বক্সে কপি-পেস্ট করুন।

ধাপ ৩: পেজ পাবলিশ (Publish)

1. কোডটি পেস্ট করার পর, এডিটরের ডানদিকে উপরে থাকা “Publish” বাটনে ক্লিক করুন।

ধাপ ৪: মেনুতে লিঙ্ক যোগ করা

সাধারণত, আপনার নতুন পেজটি সরাসরি প্রদর্শিত হয় না। ভিজিটরদের জন্য এটি দৃশ্যমান করতে:

1. Blogger ড্যাশবোর্ডের মেনু থেকে “Layout” (লেআউট) অপশনে যান।

2. আপনার থিমের মেনু বা নেভিগেশন বারে “Add a Gadget” এ ক্লিক করুন।

3. গ্যাজেট লিস্ট থেকে “Pages” (পেজেস) নির্বাচন করুন।

4. পেজের তালিকায় আপনার তৈরি করা “Image Color Picker Tool” পেজটি চেক করে Save করুন।

ব্যাস! আপনার নিজস্ব কালার পিকার টুল এখন আপনার ব্লগের একটি স্থায়ী page হিসেবে চালু হয়ে গেল। এখন আপনার ভিজিটররা সহজেই ডিজাইন(color related)সংক্রান্ত কাজগুলো আপনার ব্লগের মাধ্যমেই করতে পারবেন।

কেমন লাগলো এই ফ্রন্ট-এন্ড টুলটি? আপনি কি আপনার ব্লগে এটি সেটআপ করেছেন অথবা করবেন ভাবছেন? নিচে কমেন্ট করে জানাতে ভুলবেন না! 👇
তো বন্ধুরা ভালো থাকুন, সুস্থ থাকুন ট্রিকবিডির সাথেই থাকুন।