এইচটিএমএল রঙের ভূমিকা (Colors Introduction)
এই টিউটোরিয়ালের আলোচ্য বিষয় রঙ। একটি ওয়েব সাইটের জন্য রঙের ভূমিকা কি সেটা আমরা সবাই জানি। আমাদের ডিভাইস সমুহ রঙ ছাড়া কোন কিছুই আউটপুট দিতে পারে না। কম্পিউটার, মোবাইল, টেবলেট, টিভি ইত্যাদী যাহাই বলিনা কেন সব মিডিয়াই মূলত রঙের সংমিশ্রণে আউটপুট দিয়ে থাকে। আমাদের কাজ যেহেতু মিডিয়া নিয়ে, তাই মিডিয়াতে ব্যবহার হয় এমন রঙ সমুহ নিয়েই আমাদের এই আলোচনা।
RED GREEN BLUE এই তিনটি রঙ্গই হচ্ছে মুল। যাকে আমরা শর্টকাটে RGB রঙ বলি। এই তিনটি রঙ নিয়েই চলছে কম্পিউটার সহ সকল মিডিয়া। RGB রঙের সংমিশ্রণে প্রায় ১৬.৮ মিলিয়ন রঙ হয়ে থাকে। এখন কথা হচ্ছে এই ১৬.৮ মিলিয়ন রঙের নামকরণ করা কি সম্ভব! মাত্র ১৪০ টা রঙের নামকরণ করতে গিয়ে অরেঞ্জ,টমাটু,ওড,ফায়ার,স্কাই কত কিছুরই নাম চলে এসেছে। আর ১৬.৮ মিলিয়ন রঙের নাম দিতে গেলে সম্পূর্ণ ভাষা সিষ্টেমটাই হয়তো রঙ্গিন হয়ে যাবে। তাছাড়া এত গুলো রঙের নাম মনে রাখা প্রায় অসম্ভব। তাই কম্পিউটার সাইন্স এই রঙ গুলোকে কিছু অংকের মাধ্যমে কোড হিসেবে নিয়ে এসেছে। এই কোড গুলিকে আমরা হেস কোড, আরজিবি কোড এবং এইচএসএল কোড বলে থাকি। বর্তমান সিএসএস ভার্সনে যে সকল রঙ পদ্ধতি সাপোর্ট করে সেগুলি হচ্ছে
Colors Name রঙের নাম অনুসারে রঙ প্রদর্শিত হয়।
Hexadecimal Colors Hexadecimal নাম্বার সিষ্টেমে রঙ প্রদর্শিত হয়।
RGB Colors rgb কালার পদ্ধতিতে রঙ প্রদর্শিত হয়।
RGBA Colors rgb কালার পদ্ধতিতে অপাসিটি দেওয়া হয়।
HSL Colors hsl কালার পদ্ধতিতে রঙ প্রদর্শিত হয়।
HSLA Colors hsl কালার পদ্ধতিতে অপাসিটি দেওয়া হয়।
নিচে এই সকল পদ্ধতিতে কোড উদাহরণ দেখানো হল। বিস্তারিত বুঝতে ভিডিও টিউটোরিয়ালটি দেখুন।
Colors Name
এই পদ্ধতিতে রঙের নাম অনুসারে রঙ ভ্যালু প্রদর্শিত হয়। CSS এ সাপোর্ট করে এমন প্রায় ১৪০টি রঙ্গের নাম আছে। আমাদের Colors Name টিউটোরিয়ালে সকল রঙের নাম তাদের হেস নাম্বার এবং আরজিবি নাম্বার দেওয়া আছে। প্রয়োজনে কপি পেষ্ট করে ব্যবহার করতে পারেন। এখানে কয়েকটি রঙের নাম এবং ভ্যালু দেখালাম।
| Colors Name | GoldenRod | Maroon | Magenta |
| Colors |
কোড উদাহরণ
<style>
table td{padding:15px 20px;}
</style>
<table border="1">
<tr>
<td style="background:GoldenRod;"></td>
<td style="background:Maroon;"></td>
<td style="background:Magenta;"></td>
</tr>
</table>
Hexadecimal Colors
এই পদ্ধতিকে হেস পদ্ধতি বলা হয়। এই পদ্ধতিতে হেক্সাডেসিমল নাম্বারিং সিষ্টেমে রঙ ভ্যালু প্রদর্শিত হয়। যা Red Green এবং Blue কালারকে একটি অংকের মাধ্যমে নাম্বার নিয়ে এসে কালারের ভ্যালু দেওয়া হয়। তবে হেস কোড বুঝানোর জন্য নাম্বারে পুর্বে # চিহৃ দিতে হবে। নিচের উদাহরণটি দেখুন।
| Hex Colors | #DAA520 | #800000 | #FF00FF |
| Colors |
কোড উদাহরণ
<style>
table td{padding:15px 20px;}
</style>
<table border="1">
<tr>
<td style="background:#DAA520;"></td>
<td style="background:#800000;"></td>
<td style="background:#FF00FF;"></td>
</tr>
</table>
RGB Colors
এই পদ্ধতিকে rgb কালার পদ্ধতি বলা হয়। RGB বলতে Red Green এবং Blue বুঝানো হয়। প্রথম ভ্যালু লাল দ্বিতীয় ভ্যালু সবুজ এবং তৃতীয় ভ্যালু নীল এই তিন রঙের সংমিশ্রণ পদ্ধতিতে রঙ ভ্যালু প্রদর্শিত হয়। নিয়ম হচ্ছে- rgb(red,green,blue) নিচের উদাহরণটি দেখুন।
| RGB Colors | rgb(218,165,32) | rgb(128,0,0) | rgb(255,0,255) |
| Colors |
কোড উদাহরণ
<style>
table td{padding:15px 20px;}
</style>
<table border="1">
<tr>
<td style="background:rgb(218,165,32);"></td>
<td style="background:rgb(128,0,0);"></td>
<td style="background:rgb(255,0,255);"></td>
</tr>
</table>
RGBA Colors
এই পদ্ধতিকে rgba কালার পদ্ধতি বলা হয়। RGBA বলতে Red Green Blue এবং Alpha বুঝানো হয়। এই পদ্ধতিতে rgb রঙের মধ্য অপাসিটি দেওয়া হয়। নিয়ম হচ্ছে- rgba(red,green,blue,alpha) alpha মোট দুটো সংখ্যার প্যারামিটারে গটিত হয়। যার সর্বনিম্ন ভ্যালু হচ্ছে 0.0 এবং সর্বোচ্চ ভ্যালু হচ্ছে 1.0 যার মাধ্যমে রঙের অপাসিটি দেওয়া হয়। অপাসিটি কি সেটা বুঝানোর জন্য উদাহরণের ব্যাকগ্রাউন্ডে আমি আমাদের লোগোর ছবিটি ব্যবহার করছি। নিচের উদাহরণটি দেখুন।
| RGBA Colors | rgba(218,165,32,0.8) | rgba(128,0,0,0.3) | rgba(255,0,255,0.9) |
| Colors |
কোড উদাহরণ
<style>
table td{padding:15px 20px;}
</style>
<table border="1">
<tr>
<td style="background:rgba(218,165,32,0.8);"></td>
<td style="background:rgba(128,0,0,0.3);"></td>
<td style="background:rgba(255,0,255,0.9);"></td>
</tr>
</table>
HSL Colors
এই পদ্ধতিকে hsl কালার পদ্ধতি বলা হয়। HSL দিয়ে Hue Saturation এবং Lightness বুঝানো হয়। hue হচ্ছে রঙ চক্রের একটি ডিগ্রী। যা ০ থেকে ৩৬০ ডিগ্রী পর্যন্ত হয়ে থাকে। যেখানে Red হচ্ছে ০ আর Green হচ্ছে ১২০ ডিগ্রী। এবং Blue হচ্ছে ২৪০ ডিগ্রী। আর Saturation হচ্ছে রঙ ভ্যালুর পারসেন্টিস। যেখানে ০ হচ্ছে ধূসর রঙের ছায়া এবং ১০০ হচ্ছে পূর্ণাঙ্গ কালার। Lightness এর মাধ্যমে ও পারসেন্টিস বুঝানো হয়। যার সর্বনিম্ন ০ হচ্ছে কালো রঙ এবং সর্বোচ্চ ১০০ হচ্ছে সাদা রঙ। কোড লেখার নিয়ম হচ্ছে hsl(hue,saturation,lightness) যারা পটোসপ নিয়ে কাজ করেন তাদের জন্য HSL কালার সিষ্টেম বুঝাটা খুবই সহজ। এটি সহজ কিন্তু প্রথম প্রথম বুঝতে কিছুটা জটিল লাগতে পারে। ভিডিও টিউটোরিয়ালটি দেখুন। আশা করছি সহজ হয়ে যাবে। আপাতত নিচের উদাহরণটি দেখে নিন।
| HSL Colors | hsl(43, 74%, 49%) | hsl(0, 100%, 25%) | hsl(300, 100%, 50%) |
| Colors |
কোড উদাহরণ
<style>
table td{padding:15px 20px;}
</style>
<table border="1">
<tr>
<td style="background:hsl(43, 74%, 49%);"></td>
<td style="background:hsl(0, 100%, 25%);"></td>
<td style="background:hsl(300, 100%, 50%);"></td>
</tr>
</table>
HSLA Colors
এই পদ্ধতিকে hsla কালার পদ্ধতি বলা হয়। HSLA বলতে Hue Saturation Lightness এবং Alpha বুঝানো হয়। এই পদ্ধতিতে hsl রঙের মধ্য অপাসিটি দেওয়া হয়। নিয়ম হচ্ছে- hsla(hue,saturation,lightness,alpha) alpha মোট দুটো সংখ্যার প্যারামিটারে গটিত হয়। যার সর্বনিম্ন ভ্যালু হচ্ছে 0.0 এবং সর্বোচ্চ ভ্যালু হচ্ছে 1.0 যার মাধ্যমে রঙের অপাসিটি দেওয়া হয়। অপাসিটি কি সেটা বুঝানোর জন্য উদাহরণের ব্যাকগ্রাউন্ডে আমি আমাদের লোগোর ছবিটি ব্যবহার করছি। নিচের উদাহরণটি দেখুন।
| HSLA Colors | hsla(43, 74%, 49%,0.3) | hsla(0, 100%, 25%,0.9) | hsla(300, 100%, 50%,0.7) |
| Colors |
কোড উদাহরণ
<style>
table td{padding:15px 20px;}
</style>
<table border="1">
<tr>
<td style="background:hsla(43, 74%, 49%,0.3);;"></td>
<td style="background:hsla(0, 100%, 25%,0.9);"></td>
<td style="background:hsla(300, 100%, 50%,0.7);"></td>
</tr>
</table>
বিস্তারিত জানতে ভিডিওটি দেখুন
Keep Your Ads Here...
ঐতিহাসিক কালার থিওরি
বিস্তারিত দেখুন এইচটিএমএল আইকন
বিস্তারিত দেখুন ওয়েবের যত ফন্টস
বিস্তারিত দেখুন সিএসএস এনিমেশন
বিস্তারিত দেখুন হরেক রকম মেনু
বিস্তারিত দেখুন রকমারি বাটন
বিস্তারিত দেখুন