CSS-এ HSL এবং HSLa কালার ব্যবহার পদ্ধতি

CSS-এ HSL এবং HSLa কালার কীভাবে ব্যবহার করবেন এবং কী কারণে সেগুলো RGB/RGBa এবং Hex থেকে আলাদা তা শিখুন।

HSL এবং HSLa CSS-এ কালার মেথড যা আপনি Hex বা RGB/RGBa-এর অল্টারনেটিভ হিসেবে ব্যবহার করতে পারেন আপনার ওয়েবসাইটে আরও রিয়েল-ওয়ার্ল্ড কালার প্রয়োগ করতে।

HSL এবং HSLa CSS জগতে কিছুটা নতুন, কিন্তু জেনারেল কালার জগতে সেগুলো ১৯৭০-এর দশক থেকে আছে।

HSL vs. HSLa:

• HSL står Hue Saturation Lightness-এর জন্য
• HSLa står Hue Saturation Lightness Alpha-এর জন্য

HSLa HSL-এর এক্সটেনশন, একটি Alpha চ্যানেলসহ যা আপনি ট্রান্সপারেন্সি ভ্যালু (বা অপাসিটি) স্পেসিফাই করতে ব্যবহার করতে পারেন। HSL এবং HSLa একে অপরের থেকে আলাদা ঠিক একইভাবে যে RGB এবং RGBa একে অপরের থেকে আলাদা।

HSL/HSLa ব্যবহার

HSL এবং HSLa ব্যবহার করতে, CSS দুটি কালার ফাংশন প্রোভাইড করে hsl() এবং hsla()।

বেসিক HSL ব্যবহার:

div { background-color:hsl(0, 100%, 50%); /* লাল */ }

HSL

বেসিক HSLa ব্যবহার:

div { background-color:hsla(0, 100%, 50%, 0.6); }

HSLa

HSL কি Hex এবং RGB-র চেয়ে बेटার?

আপনি সম্ভবত চিন্তা করছেন HSL কি RGB এবং Hex-র চেয়ে बेटার। HSL CSS ল্যাঙ্গুয়েজে কেন যোগ করা হয়েছে তার অবশ্যই কোনো কারণ থাকবে, ঠিক?

বলা কঠিন যে HSL বেটার Hex এবং RGB-র চেয়ে (যদিও কিছু লোক সেই পয়েন্ট তৈরি করবে)। এটা ডিপেন্ড করে আপনি কী করতে চান।

HSL-এর পেছনে আইডিয়া হচ্ছে একটি ইন্টুইটিভ কালার ফরম্যাট প্রোভাইড করা যা রিয়েল ওয়ার্ল্ডকে মিমিক করে। HSL আপনাকে একটি কালারের লাইট এবং ডার্কনেস এডজাস্ট করতে দেয় কালারের রিপ্রেজেন্টেশন চেঞ্জ করার জন্য কালারটি আপনাকে চেঞ্জ না করে।

Hex এবং RGB সেটি করতে পারে না।

উদাহরণস্বরূপ, আপনি আপনার রুমের কালারগুলো এখন দেখুন, আপনি যেভাবে সেগুলো পারসিভ করছেন সেটি হলো লাইট আসার ফলাফল যেগুলোর থেকে:

• উইন্ডোজ
• ল্যাম্পস
• ক্যান্ডেলস
• লাইট সোর্সের কম্বিনেশন

মান লইয়ে নিন আপনার এখন শুধু প্রাকৃতিক লাইট আসছে আপনার উইন্ডোের মাধ্যমে।

এখন আপনার কर्टেনগুলো নিচে টানুন। এটি আপনার রুম থেকে লাইটনেস রিমুভ করবে এবং আপনার রুমের প্রতিটি কালারের পারসেপশন চেঞ্জ করবে।

আপনার রুমের প্রতিটি আইটেমের কালার এখন আপনার কাটেন টানার আগের চেয়ে ডার্কার ভার্সন হিসেবে দেখাবে।

তবে, এবং এটি মুখ্য পয়েন্ট:

লাইটনেস রিমুভ করলে জিনিসগুলোর আসল কালার চেঞ্জ হয় না, এটি পারসেপশন-কে লাইটার থেকে ডার্কার ভার্সনে চেঞ্জ করে।

এখন আপনি আপনার রুমের একটা পিকচার তুলুন কাটেন টানার আগে এবং পরে, এবং তারপর সেই before/after কালার ভ্যালুগুলো RGB ফরম্যাটে গ্র্যাব করুন, before/after उन কালারগুলো দুটি ভিন্ন কালার হবে। Hex কালারের জন্যও একই।

HSL, যынша, আপনাকে দুটি ভিন্ন কালার দেবে না, বরং একই কালার কিন্তু ভিন্ন Lightness ভ্যালু (HSL-এর L)।

তাই মান লইয়ে নিন আপনার রুমে একটি ব্রাউন ওয়ালনাট কালার টেবিল আছে। এখন একটি পিকচার তুলুন কাটেন টানা থাকা অবস্থায়, আর একটি কাটেন নিচে টানা অবস্থায়।

বিফোর/আফটার পিকচারগুলোর Hex এবং RGB ভ্যালুগুলো যথাক্রমে দুটি ভিন্ন কালার ভ্যালু হবে।

বিফোর/আফটার পিকচারগুলোর HSL ভ্যালুগুলো একই কালার হবে কিন্তু ভিন্ন Lightness ভ্যালুসহ।

কেউ কেউ আর্গু করবে যে:

• Hex এবং RGB বেশি মেশিন-রিডেবল
• HSL বেশি হিউম্যান-রিডেবল

উপরের কথা যারা ইতিমধ্যে তিনটি কালার মেথড বুঝে এবং এক্সপেরিয়েন্স আছে তাদের জন্য সত্য হতে পারে, আপনার এক্সপেরিয়েন্স ভিন্ন হতে পারে।

আমি সবসময় বলি মানুষ সেটি ভালো করে যা সে সবচেয়ে বেশি করে। তাই আপনার যদি বছরের এক্সপেরিয়েন্স থাকে Hex বা RGB-তে এবং শূন্য এক্সপেরিয়েন্স HSL-তে, তবে আপনি সম্ভবত HSL কঠিন পাবেন প্রাথমিকভাবে।

HSL কীভাবে আলাদা সেটি সংক্ষেপে:

• HSL আপনাকে কালার চেঞ্জ না করেই লাইটনেস এবং ডার্কনেস চেঞ্জ করতে দেয়।
• RGB এবং Hex কালার চেঞ্জ না করেই লাইটনেস এবং ডার্কনেস চেঞ্জ করতে পারে না।