এইচএসএল থেকে আরজিবি রূপান্তর: সরাসরি, নির্ভুল এবং ক্ষতিহীন
আপনি যখন রং নিয়ে ভাবেন, তখন হিউ, স্যাচুরেশন এবং হালকাতা (HSL) আপনার মনের সঙ্গে সবচেয়ে বেশি মেলে। কিন্তু যখন স্ক্রিনে সেই রং দেখাতে হবে, তখন প্রয়োজন হয় লাল, সবুজ এবং নীলের তীব্রতা (RGB) – যেটা আসলে পিক্সেলের আলো নির্গমনের সঠিক সংখ্যা। এই পৃষ্ঠাটি ঠিক সেই কাজটিই করে: আপনি একটি HSL মান দিন (হিউ 0–360°, স্যাচুরেশন এবং লাইটনেস শতাংশ হিসেবে), আর তাৎক্ষণিকভাবে আপনি পাবেন সমতুল্য RGB মান (0–255), এবং সেই সঙ্গে HEX, HSV, CMYK, LAB – সবকিছু একসঙ্গে। রূপান্তরটি ক্ষতিহীন – প্রতিটি বৈধ HSL মান একটি অনন্য RGB ট্রিপলেট দেয় যা ডিসপ্লের সীমার মধ্যে পড়ে। এখানে কখনও “গামুটের বাইরে” যাওয়ার ক্লিপিং হয় না, যেমনটা LAB বা CMYK থেকে RGB-তে রূপান্তরে হয়, তাই রং পরিবর্তনের কোনো ঝামেলা নেই।
এই পৃষ্ঠা কেন আলাদা?
অনেক কালার কনভার্টার আছে, কিন্তু এই পৃষ্ঠার ভিত্তি হল একটি সুনির্দিষ্ট বিষয়: HSL মানুষের চিন্তার জন্য তৈরি, RGB কম্পিউটার ডিসপ্লের গণিতের জন্য। যখন আপনি HSL-এ লাইটনেস পরিবর্তন করেন, হিউ অক্ষত থাকে। এ কারণেই প্যালেট এবং থিম তৈরিতে HSL ব্যবহৃত হয় – আপনি একই হিউয়ের বিভিন্ন শেড সহজেই পেতে পারেন। কিন্তু ওয়েবসাইটের কোডে রং বসাতে গেলে আপনাকে RGB, HEX বা কখনো কখনো CMYK দরকার হয়। এই পৃষ্ঠা সেই সেতুবন্ধন তৈরি করে: আপনি ডিজাইন টুলে বা আপনার মাথায় যে HSL মান ধারণ করেছেন, সেটা থেকে আপনি দেখতে পাবেন স্ক্রিনে সেটির প্রকৃত সংখ্যা কত। আর সবকিছু আপনার ব্রাউজারের ভেতরেই গণনা হয় – কোনো ডেটা আপলোড হয় না, কোনো সার্ভারে যায় না। প্রাইভেসি সম্পূর্ণ সুরক্ষিত।
ইনপুট আউটপুট: এক নজরে কী কী পাবেন
আপনার একমাত্র ইনপুট হল HSL মান। ফরম্যাটটি ঠিক রাখতে হবে: হিউ 0–360, তারপর কমা ও স্পেস, তারপর স্যাচুরেশন শতাংশ, কমা ও স্পেস, তারপর লাইটনেস শতাংশ। যেমন: 243, 75%, 59%। এই মান দিলেই আউটপুট ফিল্ডগুলো তাৎক্ষণিকভাবে আপডেট হবে:
| আউটপুট ফরম্যাট | উদাহরণ (উপরের ইনপুটের জন্য) | ব্যাখ্যা |
|---|---|---|
| HEX | #4F46E5 |
৬-সংখ্যার হেক্সাডেসিমেল |
| RGB | 79, 70, 229 |
প্রতিটি 0–255-এর মধ্যে |
| HSL | 243°, 75%, 59% |
আপনার দেওয়া মানের পুনরাবৃত্তি |
| HSV | পরিবর্তনশীল সংখ্যা | হিউ, স্যাচুরেশন, ভ্যালু (0–100%) |
| CMYK | অনুমান | শুধু পর্দার জন্য; প্রকৃত মুদ্রণে ভিন্ন হতে পারে |
| LAB | L a b সংখ্যা | L 0–100, a ও b -128 থেকে 127 |
প্রত্যেকটি ফিল্ড সম্পাদনাযোগ্য নয় – আপনি কেবল HSL ক্ষেত্রটি পরিবর্তন করেন, আর বাকি সব স্বয়ংক্রিয়ভাবে হিসাব হয়। কোনো বোতাম চাপতে হবে না।
নিয়ম ও সীমারেখা: আপনি কী আশা করতে পারেন
- ভুল ইনপুট: যদি আপনি HSL ক্ষেত্রে ভুল ফরম্যাটে কিছু লেখেন (যেমন শুধু সংখ্যা, বা হিউ 360-এর বেশি, বা শতাংশ চিহ্ন ছাড়া), তাহলে পৃষ্ঠাটি দেখাবে:
"Enter HSL as hue 0–360 with two percentages, like 243, 75%, 59%."অর্থাৎ আপনাকে সঠিক ফরম্যাটটি মনে করিয়ে দেবে। এটি একটি সহায়ক ত্রুটি বার্তা, ইংরেজিতে, কিন্তু পুরো পৃষ্ঠাটি বাংলায় বোঝার জন্য যথেষ্ট। - CMYK অনুমান: CMYK আউটপুটটি পর্দার জন্য একটি অনুমান মাত্র। প্রকৃত মুদ্রণে কাগজ, কালি এবং প্রিন্টার প্রোফাইলের ওপর নির্ভর করে মান ভিন্ন হতে পারে। তাই এই CMYK মান কোনো প্রিন্ট প্রোজেক্টের চূড়ান্ত রেফারেন্স হিসেবে ব্যবহার না করাই ভালো।
- কোনো ক্লিপিং নেই: HSL থেকে RGB-তে রূপান্তরটি সম্পূর্ণ আবদ্ধ। কোনো রংই “গামুটের বাইরে” যায় না, কারণ HSL এবং RGB একই ডিসপ্লে রঙের স্পেসের দুটি গাণিতিক উপস্থাপনা। LAB বা CMYK থেকে আসা রূপান্তরে ক্লিপিং হতে পারে, কিন্তু এখানে তা হয় না। তাই আপনি নিশ্চিন্ত থাকতে পারেন যে দেখানো RGB মানই আসল।
- ব্রাউজার-ভিত্তিক গণনা: সমস্ত রূপান্তর আপনার নিজের কম্পিউটারের ভিতরে, ব্রাউজারে ঘটে। কোনো ডেটা ইন্টারনেটের মাধ্যমে যায় না। এটি গোপনীয়তার দিক থেকে খুবই গুরুত্বপূর্ণ, বিশেষ করে যদি আপনি কোনো সংবেদনশীল প্রকল্পের জন্য রং তৈরি করছেন।
কাদের জন্য এই পৃষ্ঠা?
- ডিজাইনার: যারা প্যালেট বা থিম তৈরি করেন, এবং পরে কোডে ব্যবহারের জন্য RGB মান প্রয়োজন। HSL-এ কাজ করা সহজ, কিন্তু CSS-এ RGB বা HEX দিতে হয় – এই পৃষ্ঠা সেই সংখ্যা দেবে।
- ফ্রন্ট-এন্ড ডেভেলপার: যারা ডিজাইন টুল থেকে (যা প্রায়শই HSL ব্যবহার করে) রং কপি করে CSS-এ পেস্ট করতে চান। সরাসরি RGB বা HEX হাতে না থাকলে, এখানে লস-লেস রূপান্তর পাওয়া যায়।
- যে কেউ রং নিয়ে যুক্তি করতে পছন্দ করেন: হিউ, স্যাচুরেশন, লাইটনেস – এই তিনটি মান মানুষের বোঝার জন্য তৈরি। কিন্তু পর্দায় সেটি দেখাতে হলে আপনার প্রয়োজন আরজিবি। এই পৃষ্ঠা সেই অনুবাদ তাত্ক্ষণিকভাবে করে দেয়।
রঙের মডেল বোঝা: কেন এই রূপান্তর গুরুত্বপূর্ণ
রঙের বিভিন্ন গাণিতিক মডেল বিভিন্ন কাজে লাগে। HEX, RGB, HSL, HSV, CMYK, LAB – এদের প্রত্যেকের নিজস্ব ব্যবহার ও সীমাবদ্ধতা আছে। উদাহরণস্বরূপ:
- RGB (লাল-সবুজ-নীল) – সংযোজী রঙের মডেল, পর্দার আলো নির্গমনের জন্য। প্রতিটি চ্যানেল 0 (আলো বন্ধ) থেকে 255 (পূর্ণ আলো) পর্যন্ত।
- HSL (হিউ-স্যাচুরেশন-লাইটনেস) – মানব-বান্ধব মডেল। হিউ রঙের বর্ণালী (লাল 0°, সবুজ 120°, নীল 240°), স্যাচুরেশন রঙের তীব্রতা (0% = ধূসর, 100% = পূর্ণ রং), লাইটনেস (0% = কালো, 100% = সাদা)।
- HSV (হিউ-স্যাচুরেশন-ভ্যালু) – HSL-এর অনুরূপ, কিন্তু ভ্যালু (উজ্জ্বলতা) আলাদাভাবে গণনা করে।
- CMYK (সায়ান-ম্যাজেন্টা-ইয়েলো-কি/ব্ল্যাক) – বিয়োজক মডেল, মুদ্রণের জন্য। কালি মেশানোর মাধ্যমে রং তৈরি করে।
- LAB (Lab)* – মানব দৃষ্টির অনুভূতির সাথে সামঞ্জস্যপূর্ণ মডেল। এটি Adobe Photoshop-এর মতো প্রফেশনাল সফ্টওয়্যারে ব্যবহৃত হয়।
এই পৃষ্ঠা আপনাকে HSL থেকে সরাসরি আরজিবি-তে নিয়ে যায়, এবং ঐচ্ছিকভাবে অন্যান্য মডেলগুলাও দেখিয়ে দেয়। তবে মনে রাখবেন, CMYK কেবল পর্দার অনুমান – মুদ্রণের জন্য আলাদা প্রোফাইল প্রয়োজন।
সচরাচর জিজ্ঞাসা (FAQ)
প্রশ্ন: আমি যদি HSL ক্ষেত্রে শুধু 120, 100%, 50% লিখি, তাহলে কী RGB বের হবে?
উত্তর: এটি হল সম্পূর্ণ সবুজ রং। হিউ 120° = সবুজ, স্যাচুরেশন 100% = পূর্ণ তীব্রতা, লাইটনেস 50% = মাঝারি। RGB হবে 0, 255, 0, HEX হবে #00FF00।
প্রশ্ন: CMYK মানটি কি প্রিন্টিং-এ ব্যবহার করা যাবে?
উত্তর: না, এটি শুধু পর্দার জন্য একটি অনুমান। প্রকৃত প্রিন্টে পেপার, কালি এবং প্রিন্টার প্রোফাইলের ওপর নির্ভর করে CMYK মান ভিন্ন হবে। প্রিন্টিংয়ের জন্য ডেডিকেটেড প্রোফাইল (যেমন Fogra39) ব্যবহার করা উচিত।
প্রশ্ন: এই পৃষ্ঠাটি কি অফলাইনে কাজ করে?
উত্তর: পৃষ্ঠাটি ব্রাউজারে চলে, কিন্তু প্রথমবার দেখার জন্য ইন্টারনেট প্রয়োজন হতে পারে। তবে একবার লোড হয়ে গেলে, সমস্ত গণনা ক্লায়েন্ট-সাইডে JavaScript-এ হয়, তাই আপনি পৃষ্ঠাটি খোলা রাখলে অফলাইনেও কাজ করতে পারে (ক্যাশের ওপর নির্ভর করে)।
প্রশ্ন: HSL-এ লাইটনেস 0% বা 100% দিলে কী হয়?
উত্তর: লাইটনেস 0% মানে কালো (RGB 0,0,0), আর 100% মানে সাদা (RGB 255,255,255)। হিউ এবং স্যাচুরেশন তখন প্রাসঙ্গিক নয়। রূপান্তরটি এই প্রান্তিক মানগুলিকেও সঠিকভাবে পরিচালনা করে।
প্রশ্ন: আমি কি HEX আউটপুটকে আবার HSL-এ রূপান্তর করতে পারি?
উত্তর: এই পৃষ্ঠাটি শুধু HSL থেকে অন্যদিকে রূপান্তর করে। তবে আপনি যদি HEX মানটি আবার HSL-এ ফিরিয়ে নিতে চান, তাহলে অন্য পৃষ্ঠা (যেমন HEX থেকে HSL) ব্যবহার করতে পারেন। নোট করুন যে রূপান্তরটি প্রতিসম – অর্থাৎ HEX থেকে HSL-তে গিয়ে আবার HSL থেকে HEX-এ ফিরলে একই মান পাওয়া যাবে, কারণ কোনো ক্লিপিং নেই।
প্রশ্ন: কেন CMYK আউটপুট দেখানো হয়েছে?
উত্তর: এটি ব্যবহারকারীদের জন্য একটি অতিরিক্ত তথ্য, বিশেষ করে যারা ডিজিটাল ডিজাইনের পাশাপাশি মুদ্রণের কথাও ভাবেন। তবে জোর দিয়ে বলা হয়েছে যে এটি কেবল একটি অনুমান, এবং পেশাদার মুদ্রণের জন্য পৃথক প্রোফাইল ব্যবহার করা প্রয়োজন।