হেক্স থেকে আরজিবি রূপান্তর: পৃষ্ঠাটির কাজ ও বৈশিষ্ট্য
পৃষ্ঠাটি কী করে
একটি হেক্সাডেসিমেল রঙের কোড (যেমন #4f46e5 বা #abc) ইনপুট ফিল্ডে টাইপ করলেই এই পৃষ্ঠাটি তৎক্ষণাৎ তার আরজিবি মান—তিনটি পূর্ণসংখ্যা ০ থেকে ২৫৫ এর মধ্যে—দেখিয়ে দেয়। এই আরজিবি মান পর্দায় রঙ প্রদর্শনের জন্য সরাসরি প্রয়োজন। ফলে প্রাপ্ত আরজিবি ট্রিপলেটটি অন্যান্য রঙের ফরম্যাটের পাশাপাশি দেখানো হয়, যাতে আপনি এটি সরাসরি কোড বা ডিজাইন সফটওয়্যারে কপি করতে পারেন।
এই পৃষ্ঠাটিকে অন্য পৃষ্ঠাগুলো থেকে কী আলাদা করে
এই পৃষ্ঠাটি হেক্সাডেসিমেল (ভিত্তি-১৬) উপস্থাপনা থেকে দশমিক (ভিত্তি-১০) আরজিবি চ্যানেলগুলোতে রূপান্তর করে, যা ডিসপ্লে এবং রঙ মিশ্রণের গাণিতিক কাজে সরাসরি ব্যবহৃত হয়। সিএসএসে হেক্স কোডগুলি সংক্ষিপ্ত এবং বহুল ব্যবহৃত হলেও, এগুলি মূলত আরজিবি-র তিনটি ৮-বিট চ্যানেলেরই একটি সংক্ষিপ্ত রূপ।
যেহেতু এটি একটি হেক্স-থেকে-আরজিবি রূপান্তর, তাই কিছু নির্দিষ্ট নিয়ম প্রযোজ্য:
- হেক্স কোড সাধারণত ছয় অঙ্কের (
#RRGGBB) বা তিন অঙ্কের সংক্ষিপ্ত রূপ (#RGB) হয়। তিন অঙ্কের সংক্ষিপ্ত রূপের প্রতিটি অঙ্ক দ্বিগুণ হয়ে পূর্ণ ছয় অঙ্কের কোড তৈরি করে। #উপসর্গটি ঐচ্ছিক; পৃষ্ঠাটি উপসর্গ সহ বা ছাড়া উভয় প্রকার কোড গ্রহণ করে।- লক্ষ্য আরজিবি চ্যানেলগুলি সর্বদা ০ থেকে ২৫৫ এর মধ্যে পূর্ণসংখ্যা হবে। আলফা চ্যানেল (আট অঙ্কের হেক্স কোড) এই পৃষ্ঠায় হ্যান্ডেল করা হয় না; পৃষ্ঠাটি কেবল ছয় অঙ্কের বা তিন অঙ্কের হেক্স প্রত্যাশা করে।
- রূপান্তরটি সম্পূর্ণ গাণিতিক: হেক্সের প্রতিটি জোড়া অঙ্ক ১৬-এর ঘাত দিয়ে গুণ করা হয়। ফলে ফলাফল নির্ভুল এবং প্রত্যাবর্তনযোগ্য (কোনো রাউন্ডিং বা গ্যামেট ক্লিপিং নেই)।
ইনপুট ও আউটপুট
ইনপুট: একটি বৈধ হেক্স রঙের কোড, যেমন #4f46e5, abc, বা #1E90FF। পৃষ্ঠাটি তিন অঙ্কের সংক্ষিপ্ত রূপ যেমন #abc-ও গ্রহণ করে। আপনি সরাসরি টাইপ করতে পারেন অথবা বিল্ট-ইন কালার পিকার ব্যবহার করতে পারেন।
আউটপুট: আরজিবির সমতুল্য মান, তিনটি সংখ্যা ০ থেকে ২৫৫ এর মধ্যে (যেমন 79, 70, 229 এর জন্য #4f46e5)। পৃষ্ঠাটি একইসাথে অন্যান্য রঙের ফিল্ড (এইচএসএল, এইচএসভি, সিএমওয়াইকে, ল্যাব) স্বয়ংক্রিয়ভাবে আপডেট করে।
নিয়ম ও প্রান্তিক ক্ষেত্র
- যেকোনো ফিল্ড সম্পাদনা করলে অন্য সব রঙের ফিল্ড তৎক্ষণাৎ আপডেট হয়।
- যদি আপনি এমন একটি হেক্স মান প্রবেশ করেন যা প্রত্যাশিত ফরম্যাটের সাথে মেলে না, তাহলে পৃষ্ঠাটি ত্রুটির বার্তা দেখায়:
"Enter a hex color like #4f46e5 or #abc." - তিন অঙ্কের সংক্ষিপ্ত রূপ (যেমন
#abc) স্বয়ংক্রিয়ভাবে ছয় অঙ্কে প্রসারিত হয় প্রতিটি অঙ্ক দ্বিগুণ করে (তাই#abcহয়#aabbcc)। এরপর রূপান্তর সম্পাদিত হয়। - আরজিবি আউটপুটের মান নির্ভুল পূর্ণসংখ্যা; কোনো রাউন্ডিং হয় না, কারণ ভিত্তি-১৬ থেকে ভিত্তি-১০-এ রূপান্তর সুত্রবদ্ধ।
- সব রঙের রূপান্তর আপনার ব্রাউজারেই ঘটে; কোনো ইনপুট আপলোড বা সংরক্ষণ করা হয় না।
কাদের এই পৃষ্ঠার প্রয়োজন
- ফ্রন্ট-এন্ড ডেভেলপার: যারা সিএসএস হেক্স কোড আরজিবি মানে রূপান্তর করতে চান জাভাস্ক্রিপ্ট, ক্যানভাস বা ইনলাইন স্টাইলে ব্যবহারের জন্য যেখানে সাংখ্যিক চ্যানেল প্রয়োজন।
- ডিজাইনার: যারা ব্র্যান্ডিং গাইডলাইন থেকে হেক্স স্পেসিফিকেশন পান এবং ডিজাইন টুলে আরজিবি স্লাইডার বা সাংখ্যিক মান ইনপুট করতে চান।
- স্ক্রিন-ভিত্তিক গ্রাফিক্সে কাজ করা ব্যক্তি: যেমন গেম ডেভেলপার, ডিজিটাল আর্টিস্ট, ইউআই ডিজাইনার—যারা রঙ গাণিতিকভাবে ম্যানিপুলেট করতে চান এবং ০-২৫৫ চ্যানেল মানের নির্ভুলতা চান।
- ছাত্র বা শিক্ষার্থী: যারা হেক্সাডেসিমেল রঙের কোড এবং মনিটরে ব্যবহৃত অ্যাডিটিভ আরজিবি রঙ মডেলের মধ্যে সম্পর্ক বুঝতে চান।
হেক্সাডেসিমেল রঙের ভিত্তি ও আরজিবির সাথে সম্পর্ক
প্রতিটি আরজিবি চ্যানেল (লাল, সবুজ, নীল) ০ থেকে ২৫৫ পর্যন্ত একটি মান ধারণ করতে পারে, অর্থাৎ মোট ২৫৬টি সম্ভাব্য স্তর। হেক্সাডেসিমেল পদ্ধতিতে একটি চ্যানেলের মান দুই অঙ্কের মাধ্যমে প্রকাশ করা হয়: প্রথম অঙ্কটি ১৬-এর গুণক এবং দ্বিতীয় অঙ্কটি এককের মান। যেমন:
4f(হেক্স) =4×16 + 15=64 + 15=79(দশমিক)46(হেক্স) =4×16 + 6=64 + 6=70(দশমিক)e5(হেক্স) =14×16 + 5=224 + 5=229(দশমিক)
তাই #4f46e5 আরজিবিতে rgb(79, 70, 229) হয়। তিন অঙ্কের সংক্ষিপ্ত রূপ যেমন #abc কে #aabbcc এ প্রসারিত করা হয়। এর কারণ: প্রথম অঙ্ক a চ্যানেলের উচ্চতর ৪ বিট নির্দেশ করে এবং দ্বিতীয় অঙ্ক b নিম্নতর ৪ বিট নির্দেশ করে; কিন্তু সংক্ষিপ্ত রূপে আমরা ধরে নেই যে উচ্চ ও নিম্ন বিট সমান। তাই #abc -> #aabbcc। তারপর রূপান্তর: aa = 10×16 + 10 = 170, bb = 11×16 + 11 = 187, cc = 12×16 + 12 = 204। ফলে #abc = rgb(170, 187, 204)।
গুরুত্বপূর্ণ বিষয়: আরজিবি চ্যানেলের মান ০ থেকে ২৫৫-এর সীমা অতিক্রম করে না, কারণ হেক্স জোড়া 00 থেকে FF পর্যন্ত হয় (00 = 0, FF = 255)। তাই রূপান্তরটি বিনা রাউন্ডিংয়ে সম্পন্ন হয়। এই পৃষ্ঠায় আলফা চ্যানেল নেই; আট অঙ্কের হেক্স যেমন #4f46e580 হ্যান্ডেল করা হয় না এবং ত্রুটি বার্তা দেখায়।
হেক্স বনাম আরজিবি: সিএসএসে ব্যবহারের পার্থক্য
সিএসএসে একটি রঙ নির্ধারণের জন্য color: #ff6600 এবং color: rgb(255,102,0) উভয়ই বৈধ। ব্রাউজার উভয়কেই একই আরজিবি মানে রূপান্তর করে রেন্ডার করে। তবে কিছু জায়গায় আরজিবি সুবিধাজনক:
- জাভাস্ক্রিপ্টে রঙ ম্যানিপুলেট করতে
rgb(255,102,0)ফরম্যাট পার্স করা সহজ। - ক্যানভাস API-তে
fillStyleহিসেবে আরজিবি স্ট্রিং বা সংখ্যা ব্যবহার করা হয়। - অ্যানিমেশন বা গ্রেডিয়েন্টে চ্যানেলভিত্তিক পরিবর্তন আরজিবিতে সরাসরি করা যায়।
- অন্যদিকে, হেক্স সংক্ষিপ্ত এবং টাইপ করা সহজ, তাই ডিজাইনাররা প্রায়ই হেক্স পছন্দ করেন।
এই পৃষ্ঠাটি রূপান্তরটি তাৎক্ষণিক করে, ফলে আপনি যখন ডিজাইন মকআপ থেকে হেক্স পান এবং ক্যানভাস API-তে ব্যবহার করতে চান, তখন এটি দ্রুত কাজ করে। উদাহরণস্বরূপ, একটি ডিজাইন টুল থেকে #1E90FF (ডজার ব্লু) কপি করে পেস্ট করলে পৃষ্ঠাটি rgb(30, 144, 255) দেখাবে, যা আপনি সরাসরি ctx.fillStyle = 'rgb(30,144,255)' হিসেবে লিখতে পারেন।
রঙ তত্ত্ব ও ব্যবহারিক কর্মপ্রবাহ
হেক্স-থেকে-আরজিবি রূপান্তর বোঝা রঙ তত্ত্বের জন্যও গুরুত্বপূর্ণ। উদাহরণস্বরূপ, ধূসর রঙের জন্য লাল, সবুজ ও নীল চ্যানেল সমান হয়। #808080 = rgb(128,128,128)। যদি আপনি চ্যানেলগুলোর মান জানেন, তাহলে কনট্রাস্ট অনুপাত বের করা সহজ হয়: লুমিন্যান্স = 0.299*R + 0.587*G + 0.114*B (সাধারণ সূত্র)। WCAG কনট্রাস্ট অনুপাত বের করতে এই লুমিন্যান্স প্রয়োজন।
এই পৃষ্ঠার বিল্ট-ইন কালার পিকার ব্যবহার করে আপনি দ্রুত বিভিন্ন রঙের হেক্স ও আরজিবি মিলিয়ে দেখতে পারেন। তিন অঙ্কের সংক্ষিপ্ত রূপের সম্প্রসারণের নিয়মটি অনেকেরই জানা নেই; উদাহরণস্বরূপ, #333 আসলে #333333 হয়, যা গাঢ় ধূসর। পৃষ্ঠাটি স্বয়ংক্রিয়ভাবে সেই সম্প্রসারণ করে, তাই বিভ্রান্তি এড়ানো যায়।
বাস্তবিক ব্যবহারে, যখন আপনি একটি হেক্স মান টাইপ করেন এবং পৃষ্ঠাটি ত্রুটি বার্তা দেখায়, তখন বুঝতে হবে যে হয় কোডটি ছয় বা তিন অঙ্কের নয়, অথবা অ্যালফা চ্যানেল সহ আট অঙ্কের হেক্স টাইপ করেছেন। এই পৃষ্ঠাটি বিশেষভাবে ছয়/তিন অঙ্কের হেক্সের জন্য তৈরি।
প্রায়শই জিজ্ঞাসিত প্রশ্ন (FAQ)
প্রশ্ন ১: আমি কি # ছাড়া হেক্স কোড লিখতে পারি?
উত্তর: হ্যাঁ, # ঐচ্ছিক। আপনি 4f46e5 লিখলেও পৃষ্ঠাটি গ্রহণ করবে এবং আরজিবি রূপান্তর দেখাবে।
প্রশ্ন ২: আমি যদি তিন অঙ্কের কোড #abc লিখি, তাহলে কি সঠিক আরজিবি পাব?
উত্তর: হ্যাঁ। পৃষ্ঠাটি স্বয়ংক্রিয়ভাবে #abc কে #aabbcc-এ প্রসারিত করবে এবং তারপর রূপান্তর করবে। ফলাফল rgb(170, 187, 204) হবে।
প্রশ্ন ৩: এই পৃষ্ঠা কি আট অঙ্কের হেক্স (যেমন #4f46e580) সমর্থন করে?
উত্তর: না। পৃষ্ঠাটি ছয় অঙ্কের (#RRGGBB) বা তিন অঙ্কের (#RGB) হেক্স প্রত্যাশা করে। আট অঙ্কের কোড দিলে "Enter a hex color like #4f46e5 or #abc." ত্রুটি বার্তা দেখাবে।
প্রশ্ন ৪: আরজিবি মান কি সর্বদা পুরো সংখ্যা হবে? রাউন্ডিং হয়?
উত্তর: হ্যাঁ, আরজিবি মান সর্বদা ০ থেকে ২৫৫ এর মধ্যে পূর্ণসংখ্যা হবে। হেক্স থেকে দশমিক রূপান্তর সুত্রবদ্ধ, তাই কোনো রাউন্ডিংয়ের প্রয়োজন নেই।
প্রশ্ন ৫: একবার আমি হেক্স লিখলে, অন্য ফিল্ড (এইচএসএল, সিএমওয়াইকে) কি আপডেট হয়?
উত্তর: হ্যাঁ। পৃষ্ঠাটি একইসাথে সব রঙের ফিল্ড আপডেট করে। আপনি যদি পরে অন্য কোনো ফিল্ড পরিবর্তন করেন, তাহলে হেক্স ফিল্ডও তৎক্ষণাৎ আপডেট হবে।
প্রশ্ন ৬: আমার ইনপুট কি সার্ভারে পাঠানো হয়?
উত্তর: না। সব রূপান্তর আপনার ব্রাউজারে ঘটে। কোনো ইনপুট আপলোড বা সংরক্ষণ করা হয় না।