এইচটিএমএল কালার (HTML Color)
সিএসএস color এবং background-color প্রোপার্টির মাধ্যমে যথাক্রমে টেক্সট এবং ব্যাকগ্রাউন্ড এর কালার সেট করা হয়। কালার এর বিভিন্ন ভ্যালু ব্যবহার করা যায়। যেমন- কালার এর নাম, হেক্স ভ্যালু, RGB ভ্যালু ইত্যাদি।
কালার এর নাম ব্যবহার করে কালার সেট
এইচটিএমএল style এট্রিবিউটের মাধ্যমে color এবং background-color প্রোপার্টিতে কালার এর নাম ব্যবহার করে কালার নির্ধারণ করা যায়।
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>এইচটিএমএল কালার নাম</title>
</head>
<body>
<h3 style="background-color:red; color:white;">
ব্যাকগ্রাউন্ডের জন্য লাল কালার এবং টেক্সটের জন্য সাদা কালার সেট করা হয়েছে।
</h3>
<h3 style="background-color:yellow; color:green;">
ব্যাকগ্রাউন্ডের জন্য হলুদ কালার এবং টেক্সটের জন্য সবুজ কালার সেট করা হয়েছে।
</h3>
<h3 style="background-color:cyan; color:red">
ব্যাকগ্রাউন্ডের জন্য সায়ান কালার এবং টেক্সটের জন্য লাল কালার সেট করা হয়েছে।
</h3>
</body>
</html>
ফলাফল
RGB ভ্যালু ব্যবহার করে কালার সেট
এইচটিএমএল style এট্রিবিউটের মাধ্যমে background-color এবং color প্রোপার্টিতে RGB ভ্যালু ব্যবহার করেও যথাক্রমে ব্যাকগ্রাউন্ড এবং টেক্সটের কালার নির্ধারণ করা যায়। ব্যবহার পদ্ধতিঃ rgb(red, green, blue)।
প্রত্যেকটি প্যারামিটারে red, green এবং blue কালারের তীব্রতা 0 থেকে 255 এর মধ্যে সীমাবদ্ধ থাকে।
উদাহরণস্বরূপঃ rgb(255,0,0) এর মাধ্যমে লাল কালার প্রদর্শিত হবে, কারণ এখানে লাল কালারের সর্বোচ্চ(255) ভ্যালু দেওয়া হয়েছে এবং অন্যান্য কালারগুলোর ভ্যালু শূন্য(0) দেওয়া হয়েছে।
rgb(red, green, blue) কালারের সবগুলো প্যারামিটার যখন শূন্য(0) হবে তখন ব্রাউজারে কালো কালার প্রদর্শিত হয়। যেমনঃ rgb(0,0,0)।
আর যখন কালারের সবগুলো প্যারামিটার এর মান সর্বোচ্চ থাকবে অর্থাৎ(255, 255, 255) হবে তখন ব্রাউজারে সাদা কালার প্রদর্শিত হবে। যেমনঃ rgb(255,255,255)।
RGB ভ্যালুর সংমিশ্রনে বিভিন্ন কালার তৈরি করুনঃ
| Red | Green | Blue |
|---|---|---|
| 255 | 0 | 0 |
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>এইচটিএমএল কালার</title>
</head>
<body>
<h3 style="background-color:rgb(255,0,0)">
rgb(255,0,0) ব্যবহার করে ব্যাকগ্রাউন্ড-কালার করা হয়েছে।
</h3>
<h3 style="background-color:rgb(0,255,0)">
rgb(0,255,0) ব্যবহার করে ব্যাকগ্রাউন্ড-কালার করা হয়েছে।
</h3>
<h3 style="background-color:rgb(0,255,255)">
rgb(0,255,255) ব্যবহার করে ব্যাকগ্রাউন্ড-কালার করা হয়েছে।
</h3>
</body>
</html>
ফলাফল
হেক্স ভ্যালু ব্যবহার করে কালার সেট
হেক্সাডেসিমেল ভ্যালুর মাধ্যমেও এইচটিএমএলের কালার নির্ধারণ করা যায়। যেমন- #RRGGBB, এখানে RR লাল(red), GG সবুজ(green) এবং BB নীল(blue)। হেক্সাডেসিমেল ভ্যালুর সর্বনিম্ন মান হলো 00 এবং সর্বোচ্চ মান হলো FF ।
উদাহরণস্বরূপঃ #FF0000 এর মাধ্যমে লাল কালার প্রদর্শিত হবে, কারণ এখানে লালের ভ্যালুটি সর্বোচ্চ FF দেওয়া হয়েছে এবং অন্যান্য কালার এর জন্য সর্বনিম্ন ভ্যালু 00 ব্যবহার করা হয়েছে।
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>এইচটিএমএল কালার</title>
</head>
<body>
<h3 style="background-color:#FF0000">
#FF0000 ব্যবহার করে ব্যাকগ্রাউন্ড-কালার করা হয়েছে।
</h3>
<h3 style="background-color:#00FF00">
#00FF00 ব্যবহার করে ব্যাকগ্রাউন্ড-কালার করা হয়েছে।
</h3>
<h3 style="background-color:#00FFFF">
#00FFFF ব্যবহার করে ব্যাকগ্রাউন্ড-কালার করা হয়েছে।
</h3>
</body>
</html>
ফলাফল
অধ্যায়ের সারাংশ
- কালারের নাম ব্যবহার করে এইচটিএমএল এলিমেন্টকে স্টাইল বা কালার করা যায়।
- RGB ভ্যালু ব্যবহার করে এইচটিএমএল এলিমেন্টকে স্টাইল বা কালার করা যায়।
- হেক্সাডেসিমাল ভ্যালু ব্যবহার করে এইচটিএমএল এলিমেন্টকে স্টাইল বা কালার করা যায়।