কিভাবে CSS এ HSL এবং HSLa কালার ব্যবহার করবেন

কীভাবে CSS-এ HSL এবং HSLa রং ব্যবহার করতে হয় এবং RGB/RGBa এবং Hex থেকে কী তাদের আলাদা করে তা জানুন।

HSL এবং HSLa হল CSS-এ রঙের পদ্ধতি যা আপনি আরও বাস্তব-জগত প্রয়োগ করতে Hex বা RGB/RGBa-এর বিকল্প হিসেবে ব্যবহার করতে পারেন। আপনার ওয়েবসাইটে রং.

এইচএসএল এবং এইচএসএলএ সিএসএস জগতে কিছুটা নতুন, তবে সাধারণ রঙের জগতে, তারা 1970 সাল থেকে রয়েছে।

এইচএসএল বনাম এইচএসএলএ:

• HSL মানে হিউ স্যাচুরেশন লাইটনেস
• HSLa মানে হিউ স্যাচুরেশন লাইটনেস আলফা

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

HSL/HSLa ব্যবহার

HSL এবং HSLa ব্যবহার করার জন্য, CSS দুটি রঙের ফাংশন hsl() প্রদান করে এবং hsla() .

মৌলিক HSL ব্যবহার:

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

মৌলিক HSLa ব্যবহার:

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

HSL কি Hex এবং RGB থেকে ভালো?

আপনি সম্ভবত ভাবছেন যে এইচএসএল আরজিবি এবং হেক্সের চেয়ে ভাল কিনা। সিএসএস ভাষায় এইচএসএল যোগ করার একটি কারণ অবশ্যই আছে, তাই না?

এটা বলা কঠিন যে HSL ভাল হেক্স এবং আরজিবি এর চেয়ে (যদিও কেউ কেউ সেই পয়েন্টটি তৈরি করবে)। এটা আপনি কি করতে চান তার উপর নির্ভর করে।

HSL এর পিছনে ধারণা হল একটি স্বজ্ঞাত রঙের বিন্যাস প্রদান করা যা বাস্তব বিশ্বের অনুকরণ করে। HSL আপনাকে প্রতিনিধিত্ব পরিবর্তন করতে একটি রঙে আলো এবং অন্ধকার সামঞ্জস্য করতে দেয় রং নিজেই পরিবর্তন না করে রঙের।

হেক্স এবং আরজিবি এটি করতে পারে না।

উদাহরণস্বরূপ, আপনি যদি এই মুহূর্তে আপনার ঘরের রঙগুলি দেখেন, আপনি যেভাবে সঠিক রঙগুলি বুঝতে পারবেন তা হল এই জাতীয় জিনিসগুলি থেকে আসা আলোর ফলাফল:

• উইন্ডোজ
• প্রদীপ
• মোমবাতি
• আলোর উৎসের সংমিশ্রণ

ধরা যাক এই মুহূর্তে আপনার জানালা দিয়ে প্রাকৃতিক আলো আসছে।

এখন এগিয়ে যান এবং আপনার পর্দা টানুন। এটি আপনার ঘর থেকে হালকাতা দূর করবে এবং আপনার ঘরের প্রতিটি রঙের উপলব্ধি পরিবর্তন করবে।

আপনার ঘরের প্রতিটি আইটেমের রঙ এখন পর্দা নামানোর আগের তুলনায় সেই রঙের গাঢ় সংস্করণের মতো দেখাচ্ছে।

যাইহোক, এবং এটি মূল পয়েন্ট:

আলোকভাব অপসারণ করা আপনার ঘরের জিনিসগুলির আসল রঙ পরিবর্তন করে না, এটি ধারণাকে পরিবর্তন করে লাইটার থেকে সেই রঙের গাঢ় সংস্করণে।

এখন আপনি যদি আপনার ঘরের আগে এবং পরে ছবি তোলেন পর্দা টেনে নামিয়ে, এবং তারপর RGB ফরম্যাটে আগে/পরের রঙের মান ধরুন, আগের/পরের রঙ দুটি ভিন্ন রঙের হবে। হেক্স রঙের ক্ষেত্রেও একই কথা।

HSL, যাইহোক, আপনাকে দুটি ভিন্ন রঙ দেবে না, কিন্তু একই রঙের ভিন্ন লাইটনেস মান (HSL-এ L)।

তাহলে ধরা যাক আপনার ঘরে একটি বাদামী আখরোট রঙের টেবিল আছে। এখন আপনি পর্দা টানা একটি ছবি তুলুন, এবং একটি পর্দা টানা নিচে।

ছবির আগে/পরের হেক্স এবং আরজিবি মান যথাক্রমে দুটি ভিন্ন রঙের মান হবে।

ছবির আগে/পরের ছবিগুলির HSL মান একই রঙের হবে, তবে ভিন্ন হালকাতার মান সহ।

কেউ কেউ তর্ক করবে যে:

• হেক্স এবং আরজিবি আরও মেশিন-পাঠযোগ্য
• এইচএসএল আরও মানব-পাঠযোগ্য

যদিও উপরেরটি সম্ভবত বেশিরভাগের জন্য সত্য যারা ইতিমধ্যেই তিনটি রঙের পদ্ধতি বোঝেন এবং অভিজ্ঞতা আছে, আপনার অভিজ্ঞতা ভিন্ন হতে পারে।

আমি সবসময় বলি যে লোকেরা যা করে তা সবচেয়ে ভাল করে। তাই আপনার যদি হেক্স বা আরজিবি ব্যবহারের বছরের অভিজ্ঞতা থাকে এবং এইচএসএল-এর সাথে শূন্য অভিজ্ঞতা থাকে, তাহলে সম্ভবত আপনি প্রাথমিকভাবে এইচএসএল পড়া কঠিন মনে করবেন।

HSL কে আলাদা করে তোলে তা সংক্ষিপ্ত করতে:

• HSL আপনাকে রং পরিবর্তন না করেই রঙের হালকাতা এবং অন্ধকার পরিবর্তন করতে দেয়।
• আরজিবি এবং হেক্স নিজেরাই রঙ পরিবর্তন না করে রঙের হালকাতা এবং অন্ধকার পরিবর্তন করতে পারে না।