এইচটিএমএল রঙ - HTML Colour


এইচটিএমএল এ কোন লেখা, যেমন <h1>, <h2>, <p> ইত্যাদিতে color ও background-color প্রোপার্টি ব্যবহার করে রঙ নির্ধারণ করা যায়।


টেক্সটের রঙ নির্ধারণ

নিছের উদাহরনে, এইচটিএমএল style এট্রিবিউটের বা <style> ট্যাগ এর মাধ্যমে color প্রোপার্টি ব্যবহার করে কোন এইচটিএমএল এলিমেন্তের রঙ নির্ধারণ করা হয়েছে।

Hello World

WebSschool.com is a free bangla website for learnig web design.

WebSschool.com is a free bangla website for learnig web design.

উদাহরণ


<h1 style="color:Tomato;">Hello World</h1> 
<p style="color:DodgerBlue;">WebSschool.com</p>
<p style="color:MediumSeaGreen;">Free Bangla Web Design Tutorials..</p>

কোড এডিটর



ব্যাকগ্রাউন্ডের রঙ

এইচটিএমএল style এট্রিবিউটের বা <style> ট্যাগ এর মাধ্যমে color এবং background-color প্রোপার্টি ব্যবহার করে কোন এইচটিএমএল এলিমেন্তের রঙ নির্ধারণ করা যায়।

WebSschool.com is a free bangla website for learnig web design.

WebSschool.com is a free bangla website for learnig web design.

উদাহরণ


<h1 style="background-color: Tomato;">Hello World</h1> 
<p style="background-color: DodgerBlue;">simple text...</p>

কোড এডিটর



রঙের মান নির্ধারণ

এইচটিএমএল এ যে সকল পদ্ধতিতে রঙের নাম নির্ধারণ করা যায়, সেগুলো নিম্নরূপ।


রঙের নাম

HTML এ সরাসরি রঙের নাম লিখে রঙ নির্ধারণ করা যায়। নিচে এই রঙের নাম গুলো দেখুন।

Tomato
Orange
DodgerBlue
MediumSeaGreen
Gray
SlateBlue
Violet
LightGray

এ ছাড়াও HTML এ আরও ১৪০ টি Standard বা আদর্শ রঙের নাম সরাসরি লিখে নির্ধারণ করা যায়। এই নাম গুলো দেখতে ক্লিক করুন HTML Standard Color Name.


রঙের মান ব্যবহার

HTML এ রঙ প্রদর্শনের জন্য সরাসরি রঙের নাম না লিখেও হেক্সাডেসিমাল, RGB, HSL, RGBA ও HSLA পদ্ধতিগুলোতে রঙের নাম নির্ধারণ করা যায়।

নিচে "Tomato" নামের রঙের জন্য বিভিন্ন মান দেখুন।

rgb(255, 99, 71)

#ff6347

hsl(9, 100%, 64%)

এখানে একই রঙ আছে, শুধু ৫০ ভাগ transparent করা হয়েছে।

rgba(255, 99, 71, 0.5)

hsla(9, 100%, 64%, 0.5)


উদাহরণ

<h1 style="background-color:rgb(255, 99, 71);">...</h1> 
<h1 style="background-color:#ff6347;">...</h1>
<h1 style="background-color:hsl(9, 100%, 64%);">...</h1>

<h1 style="background-color:rgba(255, 99, 71, 0.5);">...</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.5);">...</h1>


কোড এডিটর



RGB পদ্ধতি

HTML এ রঙ প্রদর্শনের একটি জনপ্রিয় পদ্ধতি হল আরজিবি পদ্ধতি বা rgb format. এই পদ্ধতিতে সর্বনিম্ন মান হল ০ এবং সর্বোচ্চ মান হল ২৫৫ অর্থাৎ ০ থেকে ২৫৫ পর্যন্ত মোট ২৫৬ টি ভিন্ন ভিন্ন মানের কম্বিনেশন বা মিশ্রণে ওয়েব পেজে রঙ প্রদর্শন করা হয়।

rgb ভ্যালু লেখার জন্য প্রথমে rgb লেখা হয় এবং তারপর প্রথম বন্ধনী ( 1st Breakt ) এর ভেতরে ৩ টি rgb সংখ্যা লেখা হয়। প্রথম rgb সংখ্যাটি নির্দিষ্ট করে লাল রং, দ্বিতীয় rgb সংখ্যাটি নির্দিষ্ট করে সবুজ রং এবং তৃতীয় rgb সংখ্যাটি নির্দিষ্ট করে নীল রং। প্রতিটি rgb সংখ্যা আলাদা করার জন্য কমা ( , ) ব্যবহার করা হয়। কোডটি দেখতে নীচের মত হবে -

rgb(Red,Green, Blue)

যেমন লাল রং এর জন্য rgb কোড হবে rgb(255,0,0), সবুজ রং এর জন্য কোড হবে rgb(0,255,0) আবার নীল রং এর জন্য হবে rgb(0,0,255). নীচে RGB এর বিভিন্ন মানের মিশ্রন করে পরীক্ষা করে দেখুন।

rgb(255, 0, 0)
rgb(0, 0, 255)
rgb(60, 179, 113)
rgb(238, 130, 238)
rgb(255, 165, 0)
rgb(106, 90, 205)
rgb(0, 0, 0)
rgb(120, 120, 120)


HEX পদ্ধতি

হেক্সাডেসিম্যাল সংখ্যাগুলো হল 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E এবং F. এই মোট ১৬ টি অক্ষর নিয়েই হেক্সাডেসিম্যাল পদ্ধতি। হেক্সাডেসিম্যাল পদ্ধতিতে সর্বনিম্ন মান হল ০ এবং সর্বোচ্চমান হল F. হেক্সাডেসিম্যাল পদ্ধতিতে সর্বনিম্ন মান ০০ যা RGB পদ্ধতিতে ০ এবং সর্বোচ্চমান মান FF যা RGB পদ্ধতিতে ২৫৫ হয়।

হেক্সাডেসিম্যাল ভ্যালু শুরু হয় প্রথমে একটি হ্যাস " # " চিহ্ন দিয়ে এবং তারপর ৩ জোড়া অর্থাৎ ৬ টি হেক্সাডেসিম্যাল সংখ্যা লেখা হয়। প্রথম হেক্সাডেসিম্যাল সংখ্যা জোড়া নির্দিষ্ট করে লাল রং, দ্বিতীয় হেক্সাডেসিম্যাল সংখ্যা জোড়া নির্দিষ্ট করে সবুজ রং এবং তৃতীয় হেক্সাডেসিম্যাল সংখ্যা জোড়া নির্দিষ্ট করে নীল রং। কোডটি দেখতে নীচের মত হবে -

#Red,Green, Blue

অর্থাৎ ফরম্যাটটি হল #RRGGBB
যেমন লাল রং এর জন্য হেক্সাডেসিম্যাল কোড হবে #ff0000, সবুজ রং এর জন্য কোড হবে #00ff00 আবার নীল রং এর জন্য হবে #0000ff. নীচে একটি টেবিলে কয়েকটি রং এর RGB এবং হেক্সাডেসিম্যাল কোড দেয়া হল -

#ff0000
#0000ff
#3cb371
#ee82ee
#ffa500
#6a5acd
#000000
#787878

নোট - হেক্সাডেসিমাল ভ্যালু কেস-সেনসিটিভ নয়। যেমন- "#ff0000" এবং "FF0000" একই।


HSL পদ্ধতি

HTML এ রঙ বা hue, পরিপৃক্তি বা saturation এবং লঘিমা বা lightness উল্লেখ করে কোন এলিমেন্টের রঙ নির্দিষ্ট করে দেয়া যায়। এই পদ্ধতি HSL নামে পরিচিত। এর জন্য নিচের ফরম্যাটটি অনুসরণ করতে হবে -

hsl(hue, saturation, lightness)

নিচে এগুলোর বর্ণনা দেখুন -

hue বা রঙ

রঙ বা hue হল color wheel এ অবস্থিত ০ থেকে ৩৬০ ডিগ্রির মধ্যবর্তী কোন মান যেখানে ০ লাল রঙ, ১২০ সবুজ রঙ এবং ২৪০ নীল রঙ প্রকাশ করে।

Saturation বা পরিপৃক্তি
পরিপৃক্তি বা saturation হল একটি শতকরায় প্রকাশিত মান যেখানে ০% অর্থ ধূসর বা gray এবং ১০০% মান পূর্ণ রঙ নির্দিষ্ট করে। Saturation কে কোন রঙের তীব্রতা বা intensity হিসাবেও বর্ণনা করা যেতে পারে। এখানে ১০০% মানের জন্য নিখাদ রঙটি প্রকাশ পাবে, তাতে ধূসর রঙের কোন আঁচ থাকবে না। ৫০% মানের জন্য ৫০% মানের জন্য তাতে ধূসর রঙের আঁচ থাকবে, কিন্তু মুল রঙের ৫০% দেখা যাবে। ০% মানের জন্য সম্পূর্ণরূপে ধূসর রঙ দেখা যাবে, তখন আর কোন রঙ দেখা যাবে না।

Lightness বা লঘিমা
এবং লঘিমা বা lightness ও অনুরূপ একটি শতকরায় প্রকাশিত মান। এক কথায় lightness হল light বা আলোর পরিমান, যেখানে ০% মানের জন্য আলোর অনুপস্থিতি অর্থাৎ অন্ধকার বা কালো, ৫০% মানের জন্য সাদা ও কালোর মধ্যবর্তী রঙ এবং ১০০% মানের জন্য পূর্ণ আলো অর্থাৎ সাদা নির্ধারিত হয়।

hsl(0, 100%, 50%)
hsl(240, 100%, 50%)
hsl(147, 50%, 47%)
hsl(300, 76%, 72%)


RGBA পদ্ধতি

RGBA পদ্ধতি হল RGB পদ্ধতিরই একটি বর্ধিত রুপ যেখানে একটি আলফা চ্যানেল বা alpha channel যুক্ত করা হয়েছে যা কোন একটি রঙের স্বচ্ছতা নির্ধারণ করে।
RGBA পদ্ধতির ফরম্যাটটি হল নিম্নরূপ -

rgba(red, green, blue, alpha)

এখানে আলফা প্যারামিটারটি হল ০.০ (সম্পূর্ণ স্বচ্ছ) থেকে ১.০ (স্বচ্ছ নয়) এর মধ্যবর্তী কোন মান যা কোন একটি রঙের স্বচ্ছতা নির্ধারণ করে।

rgba(255, 99, 71, 1)
rgba(255, 99, 71, 0.8)
rgba(255, 99, 71, 0.6)
rgba(255, 99, 71, 0.4)


HSLA পদ্ধতি

HSLA পদ্ধতি হল HSL পদ্ধতিরই একটি বর্ধিত রুপ যেখানে একটি আলফা চ্যানেল বা alpha channel যুক্ত করা হয়েছে যা কোন একটি রঙের স্বচ্ছতা নির্ধারণ করে।
HSLA পদ্ধতির ফরম্যাটটি হল নিম্নরূপ -

hsla(hue, saturation, lightness, alpha)

এখানে আলফা প্যারামিটারটি হল ০.০ (সম্পূর্ণ স্বচ্ছ) থেকে ১.০ (স্বচ্ছ নয়) এর মধ্যবর্তী কোন মান যা কোন একটি রঙের স্বচ্ছতা নির্ধারণ করে।

hsla(9, 100%, 64%, 1)
hsla(9, 100%, 64%, 0.8)
hsla(9, 100%, 64%, 0.6)
hsla(9, 100%, 64%, 0.4)