HTML HSL and HSLA Colors

এইচএসএল এবং এইচএসএলএ রঙ - মানুষের জন্য স্বজ্ঞাত রঙের মডেল

HTML HSL and HSLA Colors

HSL মানে হল হিউ, স্যাচুরেশন এবং লাইটনেস।

HSLA রঙের মান হল একটি আলফা চ্যানেল (স্বচ্ছতা) সহ HSL এর একটি এক্সটেনশন।

HUE
রঙ

রঙের চাকায় 0-360 ডিগ্রি

SATURATION
একাগ্রতা

0% (ধূসর) থেকে 100% (সম্পূর্ণ রঙ)

LIGHTNESS
আলোকসজ্জা

0% (কালো) থেকে 100% (সাদা)

HSL Color Values

HTML-এ, নিম্নোক্ত বিন্যাসে হিউ, স্যাচুরেশন এবং লাইটনেস (HSL) ব্যবহার করে একটি রঙ নির্দিষ্ট করা যেতে পারে:

hsl(hue, saturation, lightness)

এইচএসএল পরামিতি:

HUE

রঙের চাকায় 0 থেকে 360 ডিগ্রি।

  • 0 = লাল
  • 120 = সবুজ
  • 240 = নীল
  • 360 = লাল (আবার)

স্যাচুরেশন

শতাংশ মান।

  • 0% = ধূসর ছায়া
  • 100% = সম্পূর্ণ রঙ

হালকাতা

শতাংশ মান।

  • 0% = কালো
  • 50% = স্বাভাবিক উজ্জ্বলতা
  • 100% = সাদা

রঙের চাকা

0°
লাল
90°
হলুদ
180°
cyan
270°
ম্যাজেন্টা

HUE মান রঙের চাকার অবস্থানের প্রতিনিধিত্ব করে

মূল HSL মান:

hsl(0, 100%, 50%)
লাল
hsl(120, 100%, 50%)
সবুজ
hsl(240, 100%, 50%)
নীল
hsl(0, 0%, 0%)
কালো
hsl(0, 0%, 100%)
সাদা
hsl(0, 0%, 50%)
ছাই

এইচএসএল মিশ্রণ পরীক্ষা

নীচের HSL মানগুলি মিশ্রিত করুন এবং মেলে:

hsl(0, 100%, 50%)
HUE 0°
SATURATION 100%
LIGHTNESS 50%

জাসিফ টিম টেস্ট:

সিলিন্ডারগুলি সরিয়ে বিভিন্ন HSL রঙ তৈরি করার চেষ্টা করুন:
• HUE: রঙ পরিবর্তন করে (0-360°)
• স্যাচুরেশন: রঙের স্যাচুরেশন পরিবর্তন করে (0-100%)।
• হালকাতা: রঙের উজ্জ্বলতা পরিবর্তন করে (0-100%)

HSL উদাহরণ

সাধারণ HSL রঙের উদাহরণ হল:

hsl(0, 100%, 50%)
hsl(240, 100%, 50%)
hsl(147, 50%, 47%)
hsl(300, 76%, 72%)
hsl(39, 100%, 50%)
hsl(248, 53%, 58%)

স্যাচুরেশন

স্যাচুরেশনকে রঙের তীব্রতা হিসাবে বর্ণনা করা যেতে পারে।

জসিফ দলের বর্ণনা:

100% বিশুদ্ধ রঙ, ধূসর কোন ছায়া নেই.
50% 50% ধূসর, কিন্তু আপনি এখনও রঙ দেখতে পারেন।
0% সম্পূর্ণ ধূসর; আপনি আর রঙ দেখতে পারবেন না।

ঘনত্বের উদাহরণ (লাল রঙ):

hsl(0, 100%, 50%)
hsl(0, 80%, 50%)
hsl(0, 60%, 50%)
hsl(0, 40%, 50%)
hsl(0, 20%, 50%)
hsl(0, 0%, 50%)

হালকাতা

একটি রঙের উজ্জ্বলতা বর্ণনা করা যেতে পারে যে কতটা আলো প্রদান করতে হবে, 0% কোন আলো (কালো), 50% 50% আলো (অন্ধকার বা উজ্জ্বল নয়) এবং 100% সম্পূর্ণ আলো (সাদা)।

লুমিনেসেন্সের উদাহরণ (লাল রঙ):

hsl(0, 100%, 0%)
কালো
hsl(0, 100%, 25%)
hsl(0, 100%, 50%)
সাধারণ লাল
hsl(0, 100%, 75%)
hsl(0, 100%, 90%)
hsl(0, 100%, 100%)
সাদা

HSL-এ ধূসর শেড

ধূসর রঙের শেডগুলি প্রায়শই হিউ এবং ঘনত্ব 0 তে সেট করে এবং কালো/সাদা শেডগুলি পেতে 0% থেকে 100% পর্যন্ত আলোক সামঞ্জস্য করে সংজ্ঞায়িত করা হয়:

hsl(0, 0%, 20%)
hsl(0, 0%, 30%)
hsl(0, 0%, 40%)
hsl(0, 0%, 60%)
hsl(0, 0%, 70%)
hsl(0, 0%, 90%)

জসিফ দলের নিয়ম:

HSL ধূসর জন্য HUE এবং স্যাচুরেশন উভয়ই 0 হওয়া উচিত। 0% এর কাছাকাছি একটি LIGHTNESS মান কালোর কাছাকাছি, 100% এর কাছাকাছি সাদার কাছাকাছি৷

HSLA Color Values

HSLA রঙের মান হল একটি আলফা চ্যানেল সহ HSL রঙের মানগুলির একটি এক্সটেনশন - একটি রঙের স্বচ্ছতা নির্দিষ্ট করে।

একটি HSLA রঙের মান এইভাবে উপস্থাপন করা হয়:

hsla(hue, saturation, lightness, alpha)

আলফা প্যারামিটার হল 0.0 (সম্পূর্ণ স্বচ্ছ) এবং 1.0 (স্বচ্ছ নয়) এর মধ্যে একটি সংখ্যা:

hsla(9, 100%, 64%, 0)
সম্পূর্ণ স্বচ্ছতা
hsla(9, 100%, 64%, 0.2)
hsla(9, 100%, 64%, 0.4)
hsla(9, 100%, 64%, 0.6)
hsla(9, 100%, 64%, 0.8)
hsla(9, 100%, 64%, 1)
স্বচ্ছতা নেই

HSLA রচনা পরীক্ষা

নীচের HSLA মানগুলি মিশ্রিত করুন এবং মেলে:

hsla(0, 100%, 50%, 0.5)
HUE 0°
SATURATION 100%
LIGHTNESS 50%
ALPHA 0.5

জাসিফ টিম স্বচ্ছতা:

0.0 এর একটি আলফা মান সম্পূর্ণ স্বচ্ছ (দৃশ্যমান নয়), 0.5 হল 50% স্বচ্ছতা, এবং 1.0 কোন স্বচ্ছতা (সম্পূর্ণ) নয়।

অনুশীলন করুন

🎨নিচের কোন রঙের মান কালো উৎপন্ন করবে?

hsl(0, 100%, 0%)

0% আলোকসজ্জা = কালো

hsl(0, 0, 100%)

ঘনত্ব নির্দিষ্ট নয়

hsl(0, 100%, 100%)

100% উজ্জ্বলতা = সাদা

hsl(0, 100%, 0%)
✓ ঠিক আছে! 0% উজ্জ্বলতা কালো
hsl(0, 0, 100%)
✗ ভুল! এটি অবৈধ সিনট্যাক্স (কোন শতাংশ চিহ্ন নেই)।
hsl(0, 100%, 100%)
✗ ভুল! 100% উজ্জ্বলতা সাদা
hsl(0, 0%, 50%)
✗ ভুল! এটি ধূসর, কালো নয়

জসিফ টিম এইচএসএল নোট:

এইচএসএল (আঙ্গিক, স্যাচুরেশন, লঘুত্ব):
• হালকাতা = 0% → কালো (কোন রঙ নয়)
• হালকাতা = 50% → সাধারণ রঙ
• হালকাতা = 100% → সাদা (কোন রঙ নয়)
• স্যাচুরেশন = 0% → ধূসর শেড
• স্যাচুরেশন = 100% → সম্পূর্ণ রঙের স্যাচুরেশন

এইচএসএল বনাম আরজিবি তুলনা

বৈশিষ্ট্য HSL RGB
পুরো নাম Hue Saturation Lightness Red Green Blue
সূত্র hsl(h, s%, l%) rgb(r, g, b)
মান পরিসীমা 0-360°, 0-100%, 0-100% 0-255, 0-255, 0-255
মানুষের জন্য অন্তর্দৃষ্টি প্রযুক্তি
আবেদন ডিজাইন, কালার পিকার সাধারণ উদ্দেশ্য
কালো hsl(0, 0%, 0%) rgb(0, 0, 0)
সাদা hsl(0, 0%, 100%) rgb(255, 255, 255)
লাল hsl(0, 100%, 50%) rgb(255, 0, 0)

জাসিফ টিম রিপ্লেসমেন্ট ফর্মুলা:

HSL মানুষের জন্য স্বজ্ঞাত - রঙ পরিবর্তন করুন, HUE পরিবর্তন করুন; স্যাচুরেশন পরিবর্তন করতে, স্যাচুরেশন পরিবর্তন করুন; উজ্জ্বলতা পরিবর্তন করতে, LIGHTNESS পরিবর্তন করুন।