সিএসএস কালার(color)
আপনারা প্রতিনিয়তই বিভিন্ন সাইট ভিজিট করেন। লক্ষ্য করলে দেখবেন সাইটগুলোর কালারের ভিন্নতা আছে। সাইটসমূহের এই কালারের ভিন্নতা অর্থাৎ কালার সেট করা হয় সিএসএস দিয়ে।
সিএসএস দিয়ে কালার সেট করার জন্য অধিকাংশ সময় নিচের যেকোনো একটি পদ্ধতি ব্যবহৃত হয়।
- কালারের নাম ব্যবহার করে- যেমন "red"
- RGB ভ্যালু ব্যবহার করে - যেমন "rgb(255, 0, 0)"
- HEX ভ্যালু ব্যবহার করে - যেমন "#ff0000"
কালারের নাম
কালারের নাম ব্যবহার করে কালার সেট করা যায়ঃ
উদাহরণ
<!DOCTYPE html>
<html>
<body>
<h2>কালার নাম ব্যবহার করে কালার করার উদাহরণঃ</h2>
<p style="background-color:teal">তিল ব্যাকগ্রাউন্ড কালার</p>
<p style="background-color:orange">কমলা ব্যাকগ্রাউন্ড কালার</p>
<p style="background-color:pink">পিংক ব্যাকগ্রাউন্ড কালার</p>
<p style="background-color:green">সবুজ ব্যাকগ্রাউন্ড কালার</p>
<p style="background-color:red">লাল ব্যাকগ্রাউন্ড কালার</p>
<p style="background-color:yellow">হলুদ ব্যাকগ্রাউন্ড কালার</p>
<p style="background-color:blue">নীল ব্যাকগ্রাউন্ড কালার</p>
</body>
</html>
বিঃদ্রঃ কালারের নাম কেস-সেনসিটিভ নয়। যেমন- "Red", "red" অথবা "RED" একই।
ফলাফল
RGB (Red, Green, Blue)
rgb(red, green, blue) সূত্র অনুসারে RGB কালার ভ্যালু সেট করা হয়।
প্রতিটি প্যারামিটার (red, green, blue)-এর ভ্যালু 0 থেকে 255 এর মধ্যে হতে হবে। কারণ কালারের সর্বোচ্চ ভ্যালু 255 এবং সর্বনিম্ন ভ্যালু 0।
উদাহরণস্বরূপ, rgb(255,0,0) এর রং লাল হবে। কারণ এখানে লাল কালারের ভ্যালু সেট করা হয়েছে 255 এবং অন্যান্য কালারের ভ্যালু সেট করা হয়েছে 0। নিচে RGB এর বিভিন্ন ভ্যালু মিশ্রন করে পরীক্ষা করুনঃ
| Red | Green | Blue |
|---|---|---|
| 255 | 0 | 0 |
উদাহরণ
<!DOCTYPE html>
<html>
<body>
<h2>RGB কালারের উদাহরণঃ</h2>
<p style="background-color:rgb(26, 255, 26)">RGB ভ্যালু ব্যবহার করে ব্যাকগ্রাউন্ড কালার সেট করা হয়েছে।</p>
<p style="background-color:rgb(224, 102, 255)">RGB ভ্যালু ব্যবহার করে ব্যাকগ্রাউন্ড কালার সেট করা হয়েছে।</p>
<p style="background-color:rgb(0,0,255)">RGB ভ্যালু ব্যবহার করে ব্যাকগ্রাউন্ড কালার সেট করা হয়েছে।</p>
<p style="background-color:rgb(102, 102, 255)">RGB ভ্যালু ব্যবহার করে ব্যাকগ্রাউন্ড কালার সেট করা হয়েছে।</p>
<p style="background-color:rgb(138, 138, 92)">RGB ভ্যালু ব্যবহার করে ব্যাকগ্রাউন্ড কালার সেট করা হয়েছে।</p>
<p style="background-color:rgb(255,0,0)">RGB ভ্যালু ব্যবহার করে ব্যাকগ্রাউন্ড কালার সেট করা হয়েছে।</p>
<p style="background-color:rgb(128, 191, 255)">RGB ভ্যালু ব্যবহার করে ব্যাকগ্রাউন্ড কালার সেট করা হয়েছে।</p>
</body>
</html>
ফলাফল
হালকা ধূসর অথবা গাঢ় ধূসর অথবা শুধু ধূসর কালার করার জন্য ৩টি ভ্যালুই সমান রাখতে হবে।
উদাহরণ
<!DOCTYPE html>
<html>
<body>
<h2>RGB কালারের উদাহরণঃ</h2>
<p style="background-color:rgb(100,100,100);">RGB ভ্যালু ব্যবহার করে ব্যাকগ্রাউন্ড কালার সেট করা হয়েছে।</p>
<p style="background-color:rgb(150,150,150);">RGB ভ্যালু ব্যবহার করে ব্যাকগ্রাউন্ড কালার সেট করা হয়েছে।</p>
<p style="background-color:rgb(200,200,200)">RGB ভ্যালু ব্যবহার করে ব্যাকগ্রাউন্ড কালার সেট করা হয়েছে।</p>
</body>
</html>
ফলাফল
হেক্সাডেসিমাল কালার
হেক্সাডেসিমাল কালার ভ্যালু দিয়েও RGB কালার ভ্যালু সেট করা যায়। যেমন- #RRGGBB, এখানে RR (red), GG (green) এবং BB (blue) হলো 00 থেকে FF এর মধ্যে হেক্সাডেসিমাল ভ্যালু যা RGB এর 0-255 এর মতোই।
উদাহরণস্বরূপ, #FF0000 এর ভ্যলু লাল হবে। কারণ এখানে লাল কালারের ভ্যালু সেট করা হয়েছে FF এবং অন্যান্য কালারের ভ্যালু সেট করা হয়েছে 00।
উদাহরণ
<!DOCTYPE html>
<html>
<body>
<h2>HEX কালার উদাহরণঃ</h2>
<p style="background-color:#FF0000">হেক্সাডেসিমাল ভ্যালু ব্যবহার করে কালার সেট করা হয়েছে।</p>
<p style="background-color:#00FF00">হেক্সাডেসিমাল ভ্যালু ব্যবহার করে কালার সেট করা হয়েছে।</p>
<p style="background-color:#0000FF">হেক্সাডেসিমাল ভ্যালু ব্যবহার করে কালার সেট করা হয়েছে।</p>
<p style="background-color:#FF00FF">হেক্সাডেসিমাল ভ্যালু ব্যবহার করে কালার সেট করা হয়েছে।</p>
<p style="background-color:#FFFF00">হেক্সাডেসিমাল ভ্যালু ব্যবহার করে কালার সেট করা হয়েছে।</p>
<p style="background-color:#00FFFF">হেক্সাডেসিমাল ভ্যালু ব্যবহার করে কালার সেট করা হয়েছে।</p>
</body>
</html>
বিঃদ্রঃ হেক্সাডেসিমাল ভ্যালু কেস-সেনসিটিভ নয়। যেমন- "#ff0000" এবং "FF0000" একই।
ফলাফল
হালকা ধূসর অথবা গাঢ় ধূসর অথবা শুধু ধূসর কালার করার জন্য ৩টি ভ্যালুই সমান রাখতে হবে।
উদাহরণ
<!DOCTYPE html>
<html>
<body>
<h2>RGB কালারের উদাহরণঃ</h2>
<p style="background-color:#606060;">RGB ভ্যালু ব্যবহার করে ব্যাকগ্রাউন্ড কালার সেট করা হয়েছে।</p>
<p style="background-color:#808080;">RGB ভ্যালু ব্যবহার করে ব্যাকগ্রাউন্ড কালার সেট করা হয়েছে।</p>
<p style="background-color:#a0a0a0">RGB ভ্যালু ব্যবহার করে ব্যাকগ্রাউন্ড কালার সেট করা হয়েছে।</p>
</body>
</html>
ফলাফল