আপনারা প্রতিনিয়তই বিভিন্ন সাইট ভিজিট করেন। লক্ষ্য করলে দেখবেন সাইটগুলোর কালারের ভিন্নতা আছে। সাইটসমূহের এই কালারের ভিন্নতা অর্থাৎ কালার সেট করা হয় সিএসএস দিয়ে।
সিএসএস দিয়ে কালার সেট করার জন্য অধিকাংশ সময় নিচের যেকোনো একটি পদ্ধতি ব্যবহৃত হয়।
কালারের নাম ব্যবহার করে কালার সেট করা যায়ঃ
<!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)-এর ভ্যালু 0 থেকে 255 এর মধ্যে হতে হবে। কারণ কালারের সর্বোচ্চ ভ্যালু 255 এবং সর্বনিম্ন ভ্যালু 0।
উদাহরণস্বরূপ, rgb(255,0,0) এর রং লাল হবে। কারণ এখানে লাল কালারের ভ্যালু সেট করা হয়েছে 255 এবং অন্যান্য কালারের ভ্যালু সেট করা হয়েছে 0। নিচে RGB এর বিভিন্ন ভ্যালু মিশ্রন করে পরীক্ষা করুনঃ
| Red | Green | Blue |
|---|---|---|
| 255 | 0 | 0 |
rgb(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>
হালকা ধূসর অথবা গাঢ় ধূসর অথবা শুধু ধূসর কালার করার জন্য ৩টি ভ্যালুই সমান রাখতে হবে।
<!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>
Read more
or
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
