সিএসএস অনুমোদিত কালার ভ্যালু
সিএসএস কালার
সিএসএস কালার নিচের মেথডগুলোর মাধ্যমে উল্লেখ করা যায়ঃ
- হেক্সাডেসিমেল কালার(Hexadecimal colors)
- আরজিবি কালার(RGB colors)
- আরজিবিএ কালার(RGBA colors)
- এইচএসএল কালার(HSL colors)
- এইচএসএলএ কালার(HSLA colors)
- প্রিডিফাইন্ড/ক্রস-ব্রাউজার কালারের নাম(Predefined/Cross-browser color names)
হেক্সাডেসিমেল কালার
হেক্সাডেসিমেল কালার ভ্যালু সকল ব্রাউজারেই সাপোর্ট করে।
একটি হেক্সাডেসিমেল কালার #RRGGBB দ্বারা উল্লেখ করা হয়,যেখানে RR (red), GG (green) এবং BB (blue) হেক্সাডেসিমেল সম্পূর্ন কালারের এক একটি অংশবিশেষ। সকল মান 00 এবং FF এর ভিতরে থাকে।
উদাহরণস্বরূপ, #0000ff মানটি নীল রং নির্দেশ করে, কারন এখানে RR এবং GG এর মান শূন্য।
পৃথক হেক্সাডেসিমেল কালার সংজ্ঞায়িত করাঃ
উদাহরণঃ
<!DOCTYPE html>
<html>
<head>
<style>
#p1 {background-color:#ff0000;}
#p2 {background-color:#00ff00;}
#p3 {background-color:#0000ff;}
#p4 {background-color:#ffff00;}
#p5 {background-color:#ff00ff;}
</style>
</head>
<body>
<p>HEX কালার গুলো:</p>
<p id="p1">লাল</p>
<p id="p2">সবুজ</p>
<p id="p3">নীল</p>
<p id="p4">হলুদ</p>
<p id="p5">হালকা রক্তবর্ণ</p>
</body>
</html>
ফলাফল
আরজিবি কালার(RGB Colors)
আরজিবি কালার(RGB Colors) মান সকল ব্রাউজারেই সাপোর্ট করে।
একটি আরজিবি কালারের মান: rgb(red, green, blue) উল্লেখ করা হয়। প্রত্যেক প্যারামিটার (red, green, এবং blue) কালারের তীব্রতা নির্দেশ করে এবং এই মানটি ইন্টিজার মান ০-২৫৫ অথবা শতকরা মান ০-১০০% হতে পারে।
উদাহরণস্বরূপ, rgb(0,0,255) মানটি নীল রং নির্দেশ করে, কারন blue প্যারামিটারটি খুবই উচ্চমান(২৫৫) এবং অন্য দুটি মানই শূন্য।
একইভাবে, rgb(0,0,255) এবং rgb(0%,0%,100%) একই রকম কালার নির্দেশ করে।
পৃথক আরজিবি(rgb) কালার সংজ্ঞায়িত করাঃ
উদাহরণঃ
<!DOCTYPE html>
<html>
<head>
<style>
#p1 {background-color:rgb(255,0,0);}
#p2 {background-color:rgb(0,255,0);}
#p3 {background-color:rgb(0,0,255);}
#p4 {background-color:rgb(192,192,192);}
#p5 {background-color:rgb(255,255,0);}
#p6 {background-color:rgb(255,0,255);}
</style>
</head>
<body>
<p>RGB কালার গুলো:</p>
<p id="p1">লাল</p>
<p id="p2">সবুজ</p>
<p id="p3">নীল</p>
<p id="p4">ধূসর</p>
<p id="p5">হ্লুদ</p>
<p id="p6">হালকা রক্তবর্ণ</p>
</body>
</html>
ফলাফল
আরজিবিএ কালার(RGBA Colors)
আরজিবিএ কালার(RGBA color) ইন্টারনেট এক্সপ্লোরার ৯+, ফায়ারফক্স ৩+, ক্রোম, সাফারি এবং অপেরা ১০+ এ সাপোর্ট করে।
আরজিবিএ কালার(RGBA color) মান, আরজিবি কালার(RGB color) মানের সাথে একটি আলফা চ্যানেল যুক্ত করে করা হয়। যেটি হলো অস্বচ্ছলতা(opacity)
একটি আরজিবিএ কালার(RGBA color) মান rgba(red, green, blue, alpha) দ্বারা নির্দেশ করা হয়। আলফা প্যারামিটারটি ০.০ থেকে ১.০ পর্যন্ত হয়ে থাকে।
অপাসিটির সাথে পৃথক আরজিবি কালার সংজ্ঞায়িত করাঃ
উদাহরণঃ
<!DOCTYPE html>
<html>
<head>
<style>
#p1 {background-color:rgba(255,0,0,0.3);}
#p2 {background-color:rgba(0,255,0,0.3);}
#p3 {background-color:rgba(0,0,255,0.3);}
#p4 {background-color:rgba(192,192,192,0.3);}
#p5 {background-color:rgba(255,255,0,0.3);}
#p6 {background-color:rgba(255,0,255,0.3);}
</style>
</head>
<body>
<p>RGB colors with opacity:</p>
<p id="p1">লাল</p>
<p id="p2">সবুজ</p>
<p id="p3">নীল</p>
<p id="p4">ধূসর</p>
<p id="p5">হলুদ</p>
<p id="p6">হালকা রক্তবর্ণ</p>
</body>
</html>
ফলাফল
এইচএসএল কালার(HSL Colors)
এইচএসএল কালার(HSL color) মান ইন্টারনেট এক্সপ্লোরার ৯+, ফায়ারফক্স, ক্রোম, সাফারি এবং অপেরা ১০+ এ সাপোর্ট করে।
এইচএসএল(HSL) hue, saturation এবং lightness নির্দেশ করে এবং কালার-এর উপস্থাপনা বেলনাকার তুল্য প্রতিনিধিত্ব করে।
একটি এইচএসএল কালার(HSL color) মান hsl(hue, saturation, lightness) দ্বারা নির্দেশ করা হয়।
Hue-হচ্ছে কালারের একটি গোলাকার চক্র(০-৩৬০), যেখানে ০ অথবা ৩৬০ হচ্ছে লাল(Red), ১২০ হচ্ছে সবুজ(Green) এবং ২৪০ হচ্ছে নীল(Blue) Saturation-হচ্ছে শতকরা মান ০% হচ্ছে ধূসর ছায়া এবং ১০০% হচ্ছে পুর্নাঙ্গ কালার। Lightness-ও হচ্ছে শতকরা মান; ০% হচ্ছে কালো, ১০০% হচ্ছে সাদা।
পৃথক এইচএসএল কালার(HSL colors) সংজ্ঞায়িত করাঃ
উদাহরণঃ
<!DOCTYPE html>
<html>
<head>
<style>
#p1 {background-color:hsl(120,100%,50%);}
#p2 {background-color:hsl(120,100%,75%);}
#p3 {background-color:hsl(120,100%,25%);}
#p4 {background-color:hsl(120,60%,70%);}
#p5 {background-color:hsl(290,100%,50%);}
#p6 {background-color:hsl(290,60%,70%);}
</style>
</head>
<body>
<p>HSL কালার :</p>
<p id="p1">সবুজ</p>
<p id="p2">হালকা সবুজ</p>
<p id="p3">ডার্ক সবুজ</p>
<p id="p4">পেস্টেল সবুজ </p>
<p id="p5">বেগুনি</p>
<p id="p6">পেস্টেল বেগুনি</p>
</body>
</html>
ফলাফল
এইচএসএলএ কালার(HSLA Colors)
এইচএসএলএ কালার(HSLA Colors) মান ইন্টারনেট এক্সপ্লোরার ৯+, ফায়ারফক্স ৩+, ক্রোম, সাফারি এবং অপেরা ১০+ এ সাপোর্ট করে।
এইচএসএলএ কালার(HSLA Colors) মান, এইচএসএলএ কালার(HSLA Colors) মানের সাথে একটি আলফা চ্যানেল যুক্ত করে করা হয়।যেটি হলো অবজেক্টের অস্বচ্ছলতা(opacity)।
এইচএসএলএ কালার(HSLA Colors) মান hsla(hue, saturation, lightness, alpha) দ্বারা সংজ্ঞায়িত করা হয়, যেখানে আলফা প্যারামিটারটি অস্বচ্ছলতা(opacity) নির্দেশ করে। আলফা প্যারামিটারটি ০.০ থেকে ১.০ পর্যন্ত হয়ে থাকে।
অপাসিটির সাথে পৃথক এইচএসএলএ কালার(HSLA Colors) কালার সংজ্ঞায়িত করাঃ
উদাহরণঃ
<!DOCTYPE html>
<html>
<head>
<style>
#p1 {background-color:hsla(120,100%,50%,0.3);}
#p2 {background-color:hsla(120,100%,75%,0.3);}
#p3 {background-color:hsla(120,100%,25%,0.3);}
#p4 {background-color:hsla(120,60%,70%,0.3);}
#p5 {background-color:hsla(290,100%,50%,0.3);}
#p6 {background-color:hsla(290,60%,70%,0.3);}
</style>
</head>
<body>
<p>HSL কালার গুলো opacity সাথে :</p>
<p id="p1">সবুজ</p>
<p id="p2">হালকা সবুজ</p>
<p id="p3">ডার্ক সবুজ</p>
<p id="p4">পেস্টেল সবুজ</p>
<p id="p5">বেগুনি</p>
<p id="p6">পেস্টেল বেগুনি</p>
</body>
</html>
ফলাফল
প্রিডিফাইন্ড/ক্রস-ব্রাউজার কালারের নাম(Predefined/Cross-browser Color Names)
এইচটিএমএল এবং সিএসএস কালার নির্দিষ্টকরনের জন্য ১৪০টি কালারের নাম প্রিডিফাইন্ড করা আছে।
প্রিডিফাইন্ড কালারের নাম এ দেখুন।