-->
Home
CSS Tutorial

CSS Part : 3 - CSS Color.


আমরা কোন সাইটে প্রবেশ করলে সাইটের বিভিন্ন অংশ বিভিন্ন কালারের দেখতে পাই অর্থাৎ কালারের ভিন্নতা দেখতে পাই । আর এই কালারের ভিন্নতা অর্থাৎ কালার সেট করা হয় CSS  দিয়ে।
CSS দিয়ে কালার সেট করার জন্য অধিকাংশ সময় নিচের যেকোনো একটি পদ্ধতি অবলম্বন করতে হয়। যেমন ঃ

  • Color এর নাম ব্যবহার করে- যেমন "red"
  • HEX ভ্যালু ব্যবহার করে - যেমন "#ff0000"
  • RGB ভ্যালু ব্যবহার করে - যেমন "rgb(255, 0, 0)"

  • › পদ্ধতি ১ঃ Color Name  —
এই পদ্ধতি অবলম্বন করে যেকোন Color এর  নাম ব্যবহার করে color সেট করা যায় । যেমন ঃ 
<!DOCTYPE html>
<html>
<body>
  <h2> Color Name ব্যবহার করে color করার উদাহরণঃ</h2>
<p style="background-color:teal">Teal Background Color</p>
<p style="background-color:green">Green Background Color</p>
<p style="background-color:red">Red Background Color</p>
<p style="background-color:pink">Pink Background Color</p>
<p style="background-color:blue">Blue Background Color</p>
</body>
</html>

*Result —

Color Name ব্যবহার করে color করার উদাহরণঃ

Teal Background Color
Green Background Color
Red Background Color
Pink Background Color
Blue Background Color


  • › পদ্ধতি ২ঃ Hexadecimal Color —
Hexadecimal কালার ভ্যালু অবলম্বন করে color সেট করা যায় ।  তাছাড়া Hexadecimal  কালার ভ্যালু দিয়েও RGB কালার ভ্যালু সেট করা যায়।
যেমন- #RRGGBB, এখানে RR (red), GG (green) এবং BB (blue) হলো 00 থেকে FF এর মধ্যে হেক্সাডেসিমাল ভ্যালু যা RGB এর 0-255 এর মতোই। উদাহরণ ঃ
<!DOCTYPE html>
<html>
<body>
<h2>HEX color উদাহরণঃ</h2>
<p style="background-color:#FF0000">Hexadecimal Value ব্যবহার করে লাল color সেট করা হয়েছে।</p>
<p style="background-color:#0000FF">Hexadecimal Value ব্যবহার করে নীল color সেট করা হয়েছে।</p>
<p style="background-color:#FFFF00">Hexadecimal Value ব্যবহার করে হলুদ color সেট করা হয়েছে।</p>
</body>
</html>
  • Result —

HEX color উদাহরণঃ

Hexadecimal Value ব্যবহার করে লাল color সেট করা হয়েছে।
Hexadecimal Value ব্যবহার করে নীল color সেট করা হয়েছে।
Hexadecimal Value ব্যবহার করে হলুদ color সেট করা হয়েছে।




  • › পদ্ধতি ৩ঃ RGB (Red, Green, Blue) Value —

rgb(red, green, blue) সূত্র অনুসারে RGB color value সেট করা হয়।
প্রতিটি প্যারামিটার (red, green, blue)-এর ভ্যালু 0 থেকে 255 এর মধ্যে হয়ে থাকে ।
অর্থাৎ RGB Color এর —

  • সর্বোচ্চ ভ্যালু 255 এবং 
  • সর্বনিম্ন ভ্যালু 0।

যেমনঃ  ধরুন RGB Value দিয়ে background color লাল করতে হবে ।  তাহলে value  হিসেবে লাল Color এর value  নিতে হবে  255,  সবুজ color value নিতে হবে 0 এবং নীল color  value অ নিতে হবে 0।
তাহলে আমাদের Background color লাল করতে RGB Value নিতে হচ্ছে —   rgb(255,0,0) এর রং লাল হবে। যেমন —
<html>
<body>
<p style="background-color: rgb(255,0,0)">RGB value দ্বারা background color লাল</p>
</body>
</html>

  • Result —

RGB value দ্বারা background color লাল