HSL থেকে HEX কনভার্টার

এই পৃষ্ঠাটি কী করে

আপনি যখন একটি HSL রঙের মান দেন—ডিগ্রিতে হিউ (০–৩৬০), শতাংশে স্যাচুরেশন ও লাইটনেস—এই পৃষ্ঠা তাৎক্ষণিকভাবে সমতুল্য হেক্সাডেসিমেল (HEX) কালার কোড দেখায়। HEX কোড হলো ছয় অঙ্কের (বা তিন অঙ্কের শর্টহ্যান্ড) নোটেশন যা CSS ও ডিজাইন টুলে ব্যবহৃত হয়, যেমন #1E90FF। আপনি টাইপ করার সাথে সাথেই বা কালার পিকার ব্যবহার করার সাথে সাথেই HEX মান আপডেট হয়ে যায়। এটি একটি একক-উদ্দেশ্যের টুল যা শুধুমাত্র HSL থেকে HEX রূপান্তরে নিবেদিত।

কী এই পৃষ্ঠাটিকে আলাদা করে

HSL হলো একটি কালার মডেল যা মানুষের চিন্তাভাবনার জন্য ডিজাইন করা হয়েছে। এখানে শুধু লাইটনেস পরিবর্তন করলেই হিউ অক্ষত থাকে, তাই এটি প্যালেট ও থিম জেনারেশনের জন্য অত্যন্ত কার্যকর। অন্যদিকে HEX হলো ছয় অঙ্কের (বা তিন অঙ্কের শর্টহ্যান্ড) RGB নোটেশন; এতে আলফা চ্যানেল নেই (আট অঙ্কের রূপ ছাড়া)। এই রূপান্তর সরাসরি এবং sRGB গ্যামুটের মধ্যে লসলেস, অর্থাৎ রঙের কোনো তথ্য নষ্ট হয় না। LAB বা CMYK-এর মতো মডেলে গ্যামুটের বাইরে গেলে রঙ অ্যাডজাস্ট হতে পারে, কিন্তু HSL-থেকে-HEX রূপান্তরে এমন কোনো সমস্যা নেই। এই পৃষ্ঠাটি শুধুমাত্র এই একটি রূপান্তরেই বিশেষজ্ঞ, তাই এটি দ্রুত, নির্ভুল এবং বিভ্রান্তিহীন।

ইনপুট ও আউটপুট

ইনপুট: ব্যবহারকারীকে তিনটি মান দিতে হবে:

• হিউ (Hue): ০ থেকে ৩৬০-এর মধ্যে একটি সংখ্যা (ডিগ্রি)।
• স্যাচুরেশন (Saturation): ০% থেকে ১০০% পর্যন্ত একটি শতাংশ।
• লাইটনেস (Lightness): ০% থেকে ১০০% পর্যন্ত একটি শতাংশ।

উদাহরণ: 243, 75%, 59%।

আউটপুট: প্রাথমিক আউটপুট হলো HEX কালার কোড (যেমন #4f46e5)। যদি RGB চ্যানেলগুলির প্রতিটি একটি একক হেক্সাডেসিমেল অঙ্কে প্রকাশ করা যায়, তাহলে টুলটি তিন অঙ্কের শর্টহ্যান্ড রূপও দেখাতে পারে (যেমন #abc)। একই সময়ে অন্য সব কালার ফিল্ড (RGB, HSV, CMYK, LAB) আপডেট হয়। ব্যবহারকারী যেকোনো ফিল্ডে সম্পাদনা করলেই বাকি সব ফিল্ড তাৎক্ষণিকভাবে আপডেট হয়ে যায়।

নিয়ম ও সীমারেখা

• তাৎক্ষণিক আপডেট: যেকোনো ইনপুট ফিল্ড পরিবর্তন করলেই অন্য সব ফিল্ড আপডেট হয়।
• ত্রুটির বার্তা: যদি HSL মানগুলি বৈধ সীমার বাইরে হয় (হিউ ০–৩৬০, স্যাচুরেশন ০–১০০%, লাইটনেস ০–১০০%) অথবা সঠিক ফরম্যাটে না থাকে, তাহলে টুলটি নিম্নলিখিত ত্রুটি বার্তা দেখায়:
  “Enter HSL as hue 0–360 with two percentages, like 243, 75%, 59%.”
• গ্যামুটের বাইরে নয়: HSL-থেকে-HEX রূপান্তর সর্বদা দৃশ্যমান RGB সীমার মধ্যে থাকে; এই রূপান্তরের জন্য কোনো আউট-অফ-গ্যামুট অ্যাডজাস্টমেন্ট হয় না।
• CMYK অনুমান: টুলটির সাথে দেখানো CMYK মান একটি স্ক্রিন-ভিত্তিক অনুমান মাত্র; পেশাদার মুদ্রণের মানের সাথে পার্থক্য হতে পারে।
• ক্লায়েন্ট-সাইড প্রক্রিয়াকরণ: সমস্ত প্রক্রিয়াকরণ সরাসরি আপনার ব্রাউজারে ঘটে; আপনি যা ইনপুট দেন তা কোথাও আপলোড হয় না।

HSL থেকে HEX রূপান্তরের পদ্ধতি

এই পৃষ্ঠার পেছনের অ্যালগরিদমটি সরল ও মানসম্মত। HSL থেকে HEX পেতে প্রথমে HSL-কে RGB-তে রূপান্তর করতে হয়, তারপর RGB-কে হেক্সাডেসিমেলে নিয়ে যেতে হয়।

HSL → RGB:
মনে করুন H = 243°, S = 75%, L = 59%।
প্রথমে S ও L-কে ০–১ স্কেলে নিয়ে আসা হয়: S = 0.75, L = 0.59।
তারপর C = (1 – |2L – 1|) × S = (1 – |2×0.59 – 1|) × 0.75 = (1 – 0.18) × 0.75 = 0.615।
X = C × (1 – |(H/60) mod 2 – 1|)।
H/60 = 4.05, mod 2 = 0.05, তারপর |0.05 – 1| = 0.95, সুতরাং X = 0.615 × (1 – 0.95) = 0.615 × 0.05 = 0.03075।
m = L – C/2 = 0.59 – 0.3075 = 0.2825।
R', G', B' নির্ধারণ: H সেক্টর ৪ (নীল-বেগুনি) হলে (R',G',B') = (X, 0, C)।
সুতরাং R' = 0.03075, G' = 0, B' = 0.615।
এরপর m যোগ: R = 0.03075 + 0.2825 = 0.31325, G = 0 + 0.2825 = 0.2825, B = 0.615 + 0.2825 = 0.8975।
স্কেল ২৫৫-এ: R = 0.31325×255 ≈ 80, G = 0.2825×255 ≈ 72, B = 0.8975×255 ≈ 229।
সুতরাং RGB = (80, 72, 229)।

RGB → HEX:
প্রতিটি চ্যানেলকে দুই অঙ্কের হেক্সাডেসিমেলে রূপান্তর করুন:
80 → 0x50, 72 → 0x48, 229 → 0xE5।
সুতরাং HEX = #5048E5। (মনে রাখবেন #4f46e5 উদাহরণটি ভিন্ন হিউ, ২৪৩° এর জন্য সঠিক মান।)

এই পদ্ধতি সঠিকভাবে বাস্তবায়িত হলে রূপান্তর লসলেস। ব্যবহারকারীরা এই গণনা না করেই পৃষ্ঠাটি ব্যবহার করতে পারেন, তবে পদ্ধতিটি জানা থাকলে বুঝতে সুবিধা হয় কেন ইনপুট সীমা ও ফরম্যাট এত গুরুত্বপূর্ণ।

কারা এই পৃষ্ঠাটি ব্যবহার করবেন

• ডিজাইনার: যারা HSL-এ কালার প্যালেট তৈরি করেন এবং বাস্তবায়নের জন্য HEX কোড প্রয়োজন।
• ফ্রন্ট-এন্ড ডেভেলপার: যারা ফিগমা বা স্কেচের মতো ডিজাইন ফাইল থেকে HSL মান পান এবং সেগুলিকে CSS HEX প্রপার্টিতে রূপান্তর করতে চান।
• অ্যাক্সেসিবিলিটি ও থিম সংশ্লিষ্ট ব্যক্তি: যারা লাইটনেস পরিবর্তন করে WCAG কন্ট্রাস্ট অনুপাত ঠিক করতে চান এবং ফলাফলটি HEX-এ উৎপাদনের জন্য নিতে চান।

সাধারণ ভুল ও সমাধান

১. শতাংশ চিহ্ন ভুলে যাওয়া: ব্যবহারকারী প্রায়ই 75 লিখে ফেলেন 75%-এর পরিবর্তে। টুলটি তখন ত্রুটি বার্তা দেখায়। সমাধান: সবসময় স্যাচুরেশন ও লাইটনেসের সাথে % চিহ্ন দিন।
২. হিউ-এর বাইরে মান: হিউ ০–৩৬০-এর বাইরে হলে (যেমন ৪০০) টুলটি গ্রহণ করবে না। মনে রাখবেন, হিউ ডিগ্রিতে, তাই ৩৬০ ডিগ্রি বেগুনি ও ০ ডিগ্রি লাল একই রঙ, কিন্তু সরাসরি ৩৬০-এর বেশি দেওয়া যাবে না।
৩. কমা ও ফরম্যাট: ইনপুটটি "243, 75%, 59%" ফরম্যাটে হতে হবে। কমা ব্যবহার না করলে বা তিনটি মানের কম/বেশি দিলে টুলটি বুঝতে পারবে না।

সীমাবদ্ধতা

HEX-এর প্রধান সীমাবদ্ধতা হলো ছয় অঙ্কের রূপে আলফা চ্যানেলের অনুপস্থিতি। যদি আপনার স্বচ্ছতা প্রয়োজন, তবে আট অঙ্কের HEX (যেমন #4f46e580) অথবা CSS rgba() ব্যবহার করতে হবে। এই টুলটি শুধুমাত্র ছয় অঙ্কের (এবং সম্ভব হলে তিন অঙ্কের) HEX আউটপুট দেয়। এছাড়াও, HSL-এ হিউ, স্যাচুরেশন ও লাইটনেস সরাসরি পরিবর্তন করা যায়, কিন্তু HEX-এ এই মাত্রাগুলি দেখা যায় না—এটি কেবল RGB মানের একটি প্রতিনিধিত্ব।

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

প্রশ্ন ১: HEX কোডে কি কেস সংবেদনশীল?
উত্তর: না, সাধারণত বড় হাতের (UPPERCASE) ও ছোট হাতের (lowercase) HEX উভয়ই বৈধ। #4F46E5 ও #4f46e5 একই রঙ নির্দেশ করে। এই টুলটি ছোট হাতের আউটপুট দেয়, যা অধুনা CSS-এ বেশি প্রচলিত।

প্রশ্ন ২: আমি কি HSL মান ছাড়া অন্য কিছু ইনপুট দিতে পারি?
উত্তর: না, এই পৃষ্ঠাটি শুধুমাত্র HSL-থেকে-HEX রূপান্তরের জন্য। আপনি যদি RGB বা HEX থেকে HSL চান, তাহলে অন্য পৃষ্ঠা ব্যবহার করুন।

প্রশ্ন ৩: কেন CMYK মান প্রিন্টিংয়ের জন্য আলাদা?
উত্তর: টুলটির CMYK একটি আনুমানিক রূপান্তর। প্রিন্টিং-গ্রেড CMYK নির্ভর করে ইঙ্ক, পেপার ও প্রেসের উপর। এই টুলটি শুধুমাত্র স্ক্রিনের জন্য দ্রুত অনুমান দেয়।

প্রশ্ন ৪: কখন তিন অঙ্কের শর্টহ্যান্ড HEX দেখা যায়?
উত্তর: যখন RGB-এর তিনটি চ্যানেলের প্রতিটিই একই হেক্সাডেসিমেল অঙ্কের পুনরাবৃত্তি দিয়ে প্রকাশ করা যায় (যেমন #aabbcc → #abc, #ff0066 → #f06)। টুলটি স্বয়ংক্রিয়ভাবে এই শর্টহ্যান্ড দেখায় যদি শর্ত মেলে।

প্রশ্ন ৫: এই টুলটি কি অফলাইনে কাজ করে?
উত্তর: হ্যাঁ, যেহেতু সমস্ত প্রক্রিয়াকরণ আপনার ব্রাউজারে ঘটে, একবার পৃষ্ঠাটি লোড হয়ে গেলে ইন্টারনেট সংযোগের প্রয়োজন নেই।

প্রশ্ন ৬: আমি কি HSL-এ ৩৬০ ডিগ্রির বেশি মান ব্যবহার করতে পারি?
উত্তর: না। হিউ একটি চক্রাকার মাত্রা, কিন্তু এই টুলটি শুধুমাত্র ০–৩৬০ ডিগ্রি গ্রহণ করে। ৩৬০° ও ০° উভয়ই লাল, তাই আপনার প্রয়োজন হলে ৩৬০° ব্যবহার করুন (কিন্তু ৩৬০° এর বেশি নয়)।

---

এই পৃষ্ঠাটি একটি নির্দিষ্ট কাজের জন্য তৈরি—HSL থেকে HEX। এটি ডিজাইনার ও ডেভেলপারদের সময় বাঁচায়, ভুল কমায় এবং একটি সরল, লসলেস রূপান্তর প্রদান করে। আপনি যদি নিয়মিতভাবে রঙ নিয়ে কাজ করেন, তাহলে এই টুলটি আপনার কাজের অংশ হয়ে উঠবে।