হেক্স থেকে HSL: রং বোঝার সহজ পথ
পৃষ্ঠাটি কী করে?
এই পৃষ্ঠাটি একটি হেক্সাডেসিমেল কালার কোড (যেমন #4f46e5 বা ছোট সংস্করণ #abc) ইনপুট হিসেবে নেয় এবং তাৎক্ষণিকভাবে সমতুল্য HSL মান (হিউ ডিগ্রিতে, স্যাচুরেশন ও লাইটনেস শতাংশে) ফেরত দেয়। এর সাথে একই রঙের HEX, RGB, HSV, CMYK এবং LAB উপস্থাপনাও দেখায় – সবকটি ফিল্ড একসঙ্গে আপডেট হয়। ব্যবহারকারী যেকোনো ফরম্যাট কপি করে নিতে পারেন।
HSL উপস্থাপনা মানুষের চিন্তার পদ্ধতির সাথে মেলে। হিউ অপরিবর্তিত রেখে শুধু লাইটনেস বা স্যাচুরেশন পরিবর্তন করা সহজ, যা রঙের প্যালেট বা থিম তৈরির জন্য অত্যন্ত কার্যকর। পুরো প্রক্রিয়াটি ব্যবহারকারীর ব্রাউজারের ভেতরেই ঘটে – কোনো তথ্য আপলোড বা সংরক্ষণ করা হয় না।
HEX এবং HSL এর আসল পার্থক্য
HEX মূলত RGB এর একটি কাঁচা নোটেশন। ছয়টি হেক্সাডেসিমেল ডিজিট (বা তিন ডিজিটের সংক্ষিপ্ত রূপ) সরাসরি লাল, সবুজ ও নীল উপাদানের মান এনকোড করে। এটি কম্প্যাক্ট এবং CSS ও ডিজাইন টুলে বহুল ব্যবহৃত, কিন্তু মানব-পাঠযোগ্য সমন্বয়ের জন্য এটি স্বজ্ঞাত নয়। উদাহরণস্বরূপ, #1E90FF দেখে বোঝা কঠিন যে এটির হিউ কত, বা হালকা করলে কী হবে।
অন্যদিকে HSL মানব চিন্তার জন্য নির্মিত:
- হিউ (Hue) – ০–৩৬০ ডিগ্রি পরিমাপ, রঙচক্রের অবস্থান নির্দেশ করে (০°=লাল, ১২০°=সবুজ, ২৪০°=নীল)।
- স্যাচুরেশন (Saturation) – ০–১০০% শতাংশ, রঙের তীব্রতা প্রকাশ করে (০%=ধূসর, ১০০%=পূর্ণ তীব্র)।
- লাইটনেস (Lightness) – ০–১০০% শতাংশ, উজ্জ্বলতা নির্দেশ করে (০%=কালো, ৫০%=স্বাভাবিক, ১০০%=সাদা)।
শুধু লাইটনেস পরিবর্তন করলে হিউ অপরিবর্তিত থাকে – তাই HSL প্যালেট, থেম ভ্যারিয়েন্ট ও অ্যাক্সেসিবিলিটি চেকের জন্য আদর্শ। মনে রাখবেন: স্ট্যান্ডার্ড HEX (ছয় বা তিন ডিজিট) কোনো আলফা চ্যানেল বহন করে না, এবং HSL-ও আলফা অন্তর্ভুক্ত করে না। রূপান্তর সর্বদা সম্পূর্ণ অস্বচ্ছ রঙের জন্য।
রূপান্তরের গাণিতিক পদ্ধতি
HEX থেকে HSL রূপান্তর RGB এর মধ্য দিয়ে যায়। প্রথমে HEX ডিজিটগুলোকে দশমিক RGB মানে পরিণত করা হয়:
১. ছয় ডিজিটের কোড (যেমন #4f46e5) ভেঙে তিন জোড়া করা হয়: 4f, 46, e5।
২. প্রতিটি জোড়া হেক্স থেকে দশমিকে রূপান্তর: 4f = 79, 46 = 70, e5 = 229। ফলে RGB (79, 70, 229)।
৩. তিন ডিজিটের সংক্ষিপ্ত রূপ (যেমন #abc) প্রসারিত হয়: #aabbcc – প্রতিটি ডিজিট দ্বিগুণ হয়।
এরপর RGB থেকে HSL রূপান্তরের মূল ধাপ:
- R, G, B মানকে ০–২৫৫ থেকে ০–১ এর মধ্যে স্বাভাবিক করা হয় (উদাহরণ: 79/255 ≈ 0.31)।
- সর্বোচ্চ ও সর্বনিম্ন মান নির্ণয় করা হয় (
max,min)। - লাইটনেস = (max + min) / 2
- স্যাচুরেশন:
- যদি max = min হয় (ধূসর), স্যাচুরেশন = 0।
- অন্যথায়, Delta = max – min; স্যাচুরেশন = Delta / (1 – |2L – 1|) (শতাংশে প্রকাশের জন্য ১০০ দিয়ে গুণ)।
- হিউ (ডিগ্রি):
- যদি max = R হয়: হিউ = 60 × ((G – B) / Delta mod 6)
- যদি max = G হয়: হিউ = 60 × ((B – R) / Delta + 2)
- যদি max = B হয়: হিউ = 60 × ((R – G) / Delta + 4)
- ঋণাত্মক হলে ৩৬০ যোগ করা হয়।
ফলস্বরূপ মান গোল করে পূর্ণসংখ্যায় প্রকাশ করা হয় (হিউ ০–৩৬০, স্যাচুরেশন ও লাইটনেস ০–১০০%)। এই সূত্রটি CSS-এ ব্যবহৃত স্ট্যান্ডার্ড রূপান্তরেরই প্রতিফলন।
কখন HSL ব্যবহার করবেন?
ফ্রন্টএন্ড ডেভেলপারদের জন্য HSL বিশেষভাবে কার্যকর। ডিজাইন মকআপ থেকে পাওয়া একটি হেক্স রঙ (#3b82f6) কে HSL-এ রূপান্তর করলে (যেমন hsl(217, 91%, 60%)) সহজেই হোভার স্টেট বা থিম ভ্যারিয়েন্ট তৈরি করা যায় – শুধু লাইটনেস কমিয়ে বা বাড়িয়ে। উদাহরণ:
:root {
--primary: hsl(217, 91%, 60%);
--primary-hover: hsl(217, 91%, 50%);
--primary-light: hsl(217, 91%, 80%);
}
UI/UX ডিজাইনাররা হিউ, স্যাচুরেশন ও লাইটনেসের পরিভাষায় চিন্তা করেন। একটি ব্র্যান্ডের রঙ HEX-এ দেওয়া থাকলে তা HSL-এ এনে সহজেই কমপ্লিমেন্টারি বা অ্যানালগাস স্কিম তৈরি করা যায়।
রঙের প্যালেট নির্মাতারা HSL-এর মাধ্যমে মোনোক্রোম্যাটিক (শুধু লাইটনেস পরিবর্তন), কমপ্লিমেন্টারি (হিউ + ১৮০°) অথবা ট্রায়াডিক (হিউ ± ১২০°) স্কিম তৈরি করতে পারেন।
ওয়েব অ্যাক্সেসিবিলিটি অডিটররা কনট্রাস্ট অনুপাত যাচাই করতে HSL ব্যবহার করে। হিউ স্থির রেখে লাইটনেস সমন্বয় করে WCAG অনুসারে পর্যাপ্ত কনট্রাস্ট নিশ্চিত করা সহজ।
নিচের টেবিলে HEX এবং HSL-এর তুলনা দেওয়া হলো:
| বৈশিষ্ট্য | HEX | HSL |
|---|---|---|
| উপস্থাপনা | কাঁচা RGB সংখ্যা (হেক্সে) | হিউ, স্যাচুরেশন, লাইটনেস |
| মানব-পাঠযোগ্যতা | কম | বেশি |
| থিম/ভ্যারিয়েন্ট তৈরি | কঠিন | সহজ (শুধু L পরিবর্তন) |
| CSS-এ ব্যবহার | সরাসরি সম্ভব | বেশিরভাগ ব্রাউজারে সমর্থিত |
| আলফা সমর্থন | শুধু ৮-ডিজিট HEX | hsla() দিয়ে |
ত্রুটি ও সীমাবদ্ধতা
পৃষ্ঠাটি শুধুমাত্র বৈধ ছয় ডিজিট বা তিন ডিজিটের হেক্স কোড গ্রহণ করে (সাথে বা ছাড়া #)। যদি কোনো অবৈধ মান প্রবেশ করানো হয়, তাহলে এরর বার্তা দেখায়: “Enter a hex color like #4f46e5 or #abc.”
যদি ব্যবহারকারী অন্য কোনো কালার স্পেসে (যেমন LAB বা CMYK) এমন মান প্রবেশ করান যা দৃশ্যমান RGB গামুটের বাইরে, তবে রঙটিকে নিকটতম প্রদর্শনযোগ্য রঙে সমন্বয় করা হয়। এই সমন্বয়ের ফলে মূল হেক্সে ফিরে গেলে সামান্য পরিবর্তন হতে পারে। এটি গামুট ক্লিপিংয়ের একটি সাধারণ ফল, বিশেষ করে অতি সম্পৃক্ত বা অতি উজ্জ্বল রঙের ক্ষেত্রে।
CMYK মান শুধুমাত্র অনস্ক্রিন অনুমান। পেশাদার মুদ্রণের আগে ক্যালিব্রেটেড প্রোফাইল ছাড়া এই মান ব্যবহার করা উচিত নয়। কারণ CMYK প্রিন্টার ও কাগজের ধরনের ওপর নির্ভরশীল, অন্যদিকে HEX/HSL স্ক্রিনের জন্য।
মনে রাখবেন, এই পৃষ্ঠাটি HEX থেকে HSL রূপান্তর করে। এটি HSL থেকে HEX রূপান্তর করে না (যদিও সহজেই অন্যভাবেও করা যায়)। মূল উদ্দেশ্য হলো হেক্স থেকে আরও মানববান্ধব ফরম্যাটে যাওয়া।
প্রায়শই জিজ্ঞাসিত প্রশ্ন (FAQ)
প্রশ্ন ১: তিন ডিজিটের HEX কোড যেমন #abc কীভাবে কাজ করে?
উত্তর: এটি ছয় ডিজিটে প্রসারিত হয়: প্রতিটি ডিজিট দ্বিগুণ করা হয়। তাই #abc = #aabbcc। এটি একটি সংক্ষিপ্ত নোটেশন, বিশেষ করে ১২৮টি ওয়েব সেফ কালারের জন্য ব্যবহৃত হয়।
প্রশ্ন ২: HSL-এ হিউ ৩৬০ ডিগ্রি কেন? উত্তর: হিউ একটি রঙচক্রের অবস্থান বোঝায়। ৩৬০ ডিগ্রি একটি পূর্ণ বৃত্ত। ০° লাল, ৬০° হলুদ, ১২০° সবুজ, ১৮০° সায়ান, ২৪০° নীল, ৩০০° ম্যাজেন্টা – এইভাবে বিভাজিত। CCS-এ হিউ ডিগ্রি ইউনিটে দেওয়া হয়।
প্রশ্ন ৩: HSL এবং HSV-এর মধ্যে পার্থক্য কী? উত্তর: উভয়েই হিউ ব্যবহার করে, কিন্তু স্যাচুরেশন ও উজ্জ্বলতার সংজ্ঞা ভিন্ন। HSL-এ লাইটনেস (L) = (max + min)/2, যেখানে HSV-তে ভ্যালু (V) = max। ফলে HSV-তে স্যাচুরেশন শুধু উজ্জ্বল রঙের জন্য বেশি, দিন আলোতে কম। HSL রঙের উপলব্ধির সাথে বেশি মিলে যায়। এই পৃষ্ঠাটি শুধু HSL প্রদান করে।
প্রশ্ন ৪: আমার প্রবেশ করা HEX কোড যদি অকার্যকর হয়, তাহলে কী হবে? উত্তর: পৃষ্ঠাটি বৈধ HEX চিনতে পারে না। আপনি দেখবেন এরর বার্তা: “Enter a hex color like #4f46e5 or #abc.” কোনো রূপান্তর হবে না। পুনরায় সঠিক কোড দিন।
প্রশ্ন ৫: কি এই পৃষ্ঠা আমার ডেটা সার্ভারে পাঠায়? উত্তর: না। সমস্ত রূপান্তর আপনার ব্রাউজারের ভেতরেই ঘটে (ক্লায়েন্ট-সাইড)। আপনি যে HEX কোড টাইপ করেন তা কোথাও আপলোড বা সংরক্ষণ করা হয় না। এটি সম্পূর্ণ ব্যক্তিগত।
প্রশ্ন ৬: CMYK মান কতটা নির্ভুল? উত্তর: এটি একটি অনস্ক্রিন অনুমান। পেশাদার মুদ্রণের জন্য প্রিন্টার প্রোফাইল ও ক্যালিব্রেশন প্রয়োজন। শুধুমাত্র ধারণাগত রেফারেন্স হিসেবে ব্যবহার করুন। রঙের সঠিক মিলের জন্য প্রিন্ট হাউসের সাথে যোগাযোগ করুন।