CSS HSL কালার

HSL এসেছে Hue, Saturation, এবং Lightness থেকে ।

HSL কালার ভেলু

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

hsl(hue, saturation, lightness)

হিউ 0 থেকে 360 রঙের চাকাতে একটি ডিগ্রি যেখানে 0 লাল, 120 সবুজ এবং 240 নীল।

স্যাচুরেশন একটি শতাংশের মান যেখানে 0% এর অর্থ হল ধূসর ছায়া এবং 100% পূর্ণ রঙ ।

লাইটনেস একটি শতাংশের মান যেখানে 0% এর অর্থ হল কালো 50% হলো সাদাও না কালোও না এবং 100% হলো সাদা ।

হিউ এর মান 0 থেকে 359 , হয় কারন 360 ডিগ্রি কে 0 ডিগ্রি লেখা যায় ।

স্যাচুরেশন এর মান 0% থেকে 100% হয় ।

লাইটনেস এর মানও 0% থেকে 100% হয় ।

নীচে HSL মানগুলির মিশ্রণ করে পরীক্ষা করুন:

hsl(145, 40%, 50%)
HUE

145
SATURATION

40%
LIGHTNESS

50%

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%)

নিজে চেষ্টা করুন


HSL এ Saturation

100% হলো HUE থেকে নেয়া কালার টির 100% পিওর কালার এবং এটিতে কোন গ্রে বা ধূসর কালার নেই ।

50% হলো HUE থেকে নেয়া কালার টির 50% কালাও এবং 50% গ্রে কালার এবং এখন ও কালার টি দেখা যাবে ।

0% হলো সম্পূর্ণ ধূসর, এবার HUE থেকে নেয়া কালার টি দেখা যাবেনা ।

Saturation পরিবর্তন এ কালার এর কিছু উদাহরন

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

নিজে চেষ্টা করুন


HSL এ Lightness

লাইনটেস কালারে অন্ধকার কিংবা উজ্জলতা ঠিক করতে বব্যহার হয় অর্থাৎ কালারে আলোর উপস্থিতি ঠিক করে  Lightness.

0% মানে রংটিতে কোন আলো নেই, যে কোন রং এর লাইনটেস  হলে সেটি কালো হয়ে যাবে ।

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%)

নিজে চেষ্টা করুন


HSLA Value

HSLA কালার গুলো আলফা ভেলু সাপোর্ট করে যা ট্রান্সপারেন্ট কালার /অপাসিটি  তৈরি করে ।

HSLA color value নিচের মতো করে ডিফাইন করা হয়

hsla(hue, saturation, lightness, alpha)

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

নিজেই চেষ্টা করে দেখুন HSLA Color System

hsla(145, 40%, 50%, 1)
HUE

145
SATURATION

40%
LIGHTNESS

50%
ALPHA

1

HSLA Color এর আরো কিছু উদাহরন

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)

নিজে চেষ্টা করুন

কমেন্ট করুন

Your email address will not be published.