এইচটিএমএল এর মাধ্যমে ওয়েব পেজ তৈরি করার জন্য বিভিন্ন ধরনের কালার এর প্রয়োজন হয় | এইচটিএমএল এর মাধ্যমে বিভিন্ন উপায় এ কালার সেটআপ করা হয় |
এই অধ্যায় আমরা এইচটিএমএল কালার ব্যবহারের 4 টি বিষয় সম্পর্কে জানব,
- কালারের নাম ব্যবহার করে কালার সেট
- আরজিবি ব্যবহার করে কালার সেট
- হেক্স ভ্যালু ব্যবহার করে কালার সেট
- HSL ভ্যালু ব্যবহার করে কালার সেট
কালারের নাম ব্যবহার করে এইচটিএমএল কালার সেট
এইচটিএমএল স্টাইল এট্রিবিউট ব্যবহার করে কালার এবং ব্যাকগ্রাউন্ড কালার সেটাপ করা যায় |
আমরা এখন দেখব কিভাবে কালারের নাম ব্যবহার করে এইচটিএমএল কালার সেটআপ করা হয় |
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8”>
<title>HTML color tutorial.</title>
</head>
<body>
<p style=”background-color: black; color: white;”>এখানে ব্যাকগ্রাউন্ড কালার ব্ল্যাক এবং টেক্সট কালার হোয়াইট করা হয়েছে|</p><br>
<p style=”background-color: red; color:yellow”> এখানে ব্যাকগ্রাউন্ড কালার রেড এবং টেক্সট কলোর ইয়োলো করা হয়েছে।</p><br>
<p style=”background-color: blue; color:pink”> এখানে ব্যাকগ্রাউন্ড কালার বুলু এবং টেক্সট কালার করা হয়েছে |</p><br>
</body>
</html>
উপরের কোড গুলো যদি আমরা browser এ ওপেন করি তাহলে এটি যেভাবে শো করবে |
কালারের নাম ডিক্লেয়ার এর মাধ্যমে উপরের এই প্রসেস ফলো করে এইচটিএমএল এর মধ্যে কালার সেটআপ করা হয় |
আরজিবি (RGB) ব্যবহার করে কালার সেটআপ
এইচটিএমএল এ কালার ব্যবহার করে আরজিবি কালার সেটআপ করা হয় | এই কালার সেটআপ করার জন্য কিছু ক্যালকুলেশন এর প্রয়োজন হয় | আমরা বিষয়টি এখানে ক্লিয়ার ভাবে বুঝতে চেষ্টা করব |
RED, GREEN এবং BLUE এই তিনটি কালার নিয়েই আরজিবি কালার গঠিত হয় | এখানে আরজিবি কালার এর সর্বনিম্ন মান (0) এবং সর্বোচ্চ মান (255) |
এখানে কালার সেটআপ করা হয় মূলত রেড গ্রীন এবং বুলু মান ব্যবহারের মাধ্যমে |
যদি রেড কালার সো করানোর জন্য আরজিবি মান ব্যবহার করা হয় তাহলে এটি যেভাবে হবে |
RGB (255, 0, 0 )
এভাবে মান দিলে কালার টি রেড আসবে | কারণ রেড এর মান শুধুমাত্র 255 আর বাকি দুটি কালারের মান জিরো | এখানে কালার হিসেবে রেড শো করবে |
RGB এর সবগুলোর মান যখন জিরো হয় তখন এটি কালো কালার শো করায় |
RGB (0, 0, 0)
কারণ এখানে প্রত্যেকটি কালারের মানে 0 | আর যখন কোন কালারের মান শূন্য হয় তখন তার কালার ব্ল্যাক আসে |
যখন আরজিবি এর সবগুলোর মান 255 হয় তখন সাদা কালার শো করে |
RGB( 255, 255, 255 )
যখন তিনটি কালারের মানি সর্বোচ্চ হয় তখন এটির কালার সাদা হয় |
এখানে আমরা আরজিবি কালার এর মান সম্পর্কে জানলাম | এখন দেখব কিভাবে এইচটিএমএল এর মধ্যে আরজিবি কালার ব্যবহার করা হয় |
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8”>
<title>HTML color tutorial.</title>
</head>
<body>
<p style=”background-color:rgb(255,0, 0); color: rgb(0,0,0);”>এখানে ব্যাকগ্রাউন্ড কালার রেড এবং টেক্সট কালার ব্ল্যাক করা হয়েছে|</p><br>
<p style=”background-color: rgb(0,255, 0); color:rgb(255,255, 255)”> এখানে ব্যাকগ্রাউন্ড কালার গ্রীন এবং টেক্সট কলোর হোয়াইট করা হয়েছে।</p><br>
<p style=”background-color: rgb(0,0, 255); color:rgb(0,255,0)”> এখানে ব্যাকগ্রাউন্ড কালার বুলু এবং টেক্সট কালার গ্রীন করা হয়েছে |</p><br>
</body>
</html>
এভাবে আরজিবি এর মাধ্যমে আপনি যে কালার সেটআপ করতে চাইবেন উপরের ধাপগুলো ফলো করে এবং কালার কোড গুলো মনে রাখে আপনি এটা ব্যবহার করতে পারবেন |
উপরের কোডগুলো যদি আমরা ব্রাউজারে রান করি তাহলে ঠিক যেভাবে শো করবে,
উপরে প্রসেস গুলো ফলো করে আপনি RGB কালার ব্যবহার করে নিতে পারবেন |
হেক্স ভ্যালু ব্যবহার করে কালার সেটআপ
এইচটিএমএল এর মাধ্যমে ওয়েব পেজ তৈরি করার সময় হেক্সাডেসিমেল ভ্যালু ব্যবহার করে কালার সেটআপ করে নেওয়ার সুযোগ রয়েছে |
এখানে হেক্সাডেসিমেল ভ্যালু সর্বনিম্ন জিরো জিরো (00) এবং সর্বোচ্চ এফ এফ (FF) | তবে এখানেও RGB 6 ডিজিট ফলো করে | যেমন, #FF0000 সেটআপ করা হয় তাহলে এখানে রেড কালার শো করবে কেননা FF ই সর্বোচ্চ মান |
হেক্সাডেসিমেল ভ্যালু এর ব্যবহার,
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8”>
<title>HTML color tutorial.</title>
</head>
<body>
<p style=”background-colo:#0000FF; color: #FF8900;”>এখানে ব্যাকগ্রাউন্ড কালার ব্ল্যাক এবং টেক্সট কালার হোয়াইট করা হয়েছে|</p><br>
<p style=”background-color: #00FF00; color:#005689″> এখানে ব্যাকগ্রাউন্ড কালার রেড এবং টেক্সট কলোর ইয়োলো করা হয়েছে।</p><br>
<p style=”background-color: #FF0000; color:#FF8900″> এখানে ব্যাকগ্রাউন্ড কালার বুলু এবং টেক্সট কালার করা হয়েছে |</p><br>
</body>
</html>
উপরের কোডগুলা যদি ব্রাউজারের রান করানো হয় তাহলে এটি যেভাবে দেখা যাবে |
উপরের স্টেপ গুলো ফলো করে আপনি এইচটিএমএল এর মাধ্যমে ওয়েব পেজ তৈরি করার সময় কালার সেট আপ করে নিতে পারবেন |
HSL ভ্যালু ব্যবহারের মাধ্যমে কালার সেট আপ
এখানে HUE SATURATION LIGHTNESS ব্যবহার করে এইচটিএমএল এর মাধ্যমে ওয়েব পেজ তৈরি করা যায় |
H – HUE যার রেঞ্জ হচ্ছে 0-360
S – SATURATION = 0-100%
L – LIGHTNESS = 0-100%
এইচ.এস.এল (hsl) এর ব্যবহার,
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8”>
<title>HTML color tutorial.</title>
</head>
<body>
<p style=”background-color:hsl(250, 100%, 100%);”>এখানে ব্যাকগ্রাউন্ড কালার রেড এবং টেক্সট কালার ব্ল্যাক করা হয়েছে|</p><br>
<p style=”background-color: hsl(290,90%, 90%);”> এখানে ব্যাকগ্রাউন্ড কালার গ্রীন এবং টেক্সট কলোর হোয়াইট করা হয়েছে।</p><br>
<p style=”background-color: hsl(100,70%, 75%);”> এখানে ব্যাকগ্রাউন্ড কালার বুলু এবং টেক্সট কালার গ্রীন করা হয়েছে |</p><br>
</body>
</html>
উপরের কোড টি আপনি যদি ব্রাউজারে রান করান তাহলে এটি যেভাবে শো করবে,
কালার সেটআপ করা নিয়ে যদি কারো কোন প্রশ্ন থাকে বা কালার প্র্যাকটিস করার সময় যদি কোথাও কোন সমস্যার সম্মুখীন হল অবশ্যই কমেন্টে জানাবেন |
