X

X

X

HTML রং


HTML -এ পূর্বনির্ধারিত রংয়ের নাম বা RGB, HEX, HSL, RGBA, HSLA মান ব্যবহার করে বিভিন্ন ইলামেন্টের রং নির্ধারণ করা হয়।


রংয়ের নামসমূহ

HTML -এ রংয়ের নাম ব্যবহার করে ইলামেন্টের রং নির্ধারণ করা যায়। রংয়ের নাম অবশ্যই ইংরেজিতে লিখতে হবে।

Tomato
Orange
DodgerBlue
MediumSeaGreen
Gray
SlateBlue
Violet
LightGray

HTML -এ রংসমূহ

<h1 style="background-color:Tomato;">Tomato</h1>
<h1 style="background-color:Orange;">Orange</h1>
<h1 style="background-color:DodgerBlue;">DodgerBlue</h1>
<h1 style="background-color:MediumSeaGreen;">MediumSeaGreen</h1>
<h1 style="background-color:Gray;">Gray</h1>
<h1 style="background-color:SlateBlue;">SlateBlue</h1>
<h1 style="background-color:Violet;">Violet</h1>
<h1 style="background-color:LightGray;">LightGray</h1>

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।

HTML প্রায় ১৪০ টি রংয়ের নাম সাপোর্ট করে। w3schools.com-এ সবগুলো রংয়ের নাম দেখুন।


ব্যাকগ্রাউন্ড -এর রং

যেকোনো কন্টেন্টযুক্ত HTML ইলামেন্ট এর রং নির্ধারণ করা সম্ভব। নিচের উদাহরণগুলো লক্ষ্য করুন।

Hello World

আমার সোনার বাংলা আমি তোমায় ভালোবাসি।

আমাদের দেশে হবে সেই ছেলে কবে কথায় না বড় হয়ে কাজে বড় হবে।

HTML-এ ব্যাকগ্রাউন্ড রং

<h1 style="background-color:DodgerBlue;">Hello World</h1>

<p style="background-color:Tomato;">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</p>

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


টেক্সটের (Text) রং

যেকোনো ইলামেন্টের টেক্সেটের রং নির্ধারণ করা যায়।

Hello World

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

HTML Background Color

<h3 style="color:Tomato;">Hello World</h3>

<p style="color:DodgerBlue;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>

<p style="color:MediumSeaGreen;">Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


বর্ডার -এর রং

যেকোনো HTML ইলামেন্টের বর্ডারের রং নির্ধারণ করা যায়।

Hello World

Hello World

Hello World

HTML -এ বর্ডারের রং

<h1 style="border: 2px solid Tomato;">Hello World</h1>

<h1 style="border: 2px solid DodgerBlue;">Hello World</h1>

<h1 style="border: 2px solid Violet;">Hello World</h1>

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


রংয়ের মানসমূহ

In HTML, colors can also be specified using RGB values, HEX values, HSL values, RGBA values, and HSLA values:
HTML -এ হেক্সাডেসিমেল, HSL, RGB বা RGBA মান ব্যবহার করেও বিভিন্ন রংয়ের মান নির্ধারণ করা যায়।
“Tomato” রংয়ের অনুরূপ:

rgb(255, 99, 71)
#ff6347
hsl(9, 100%, 64%)

“Tomato” এর অনুরূপ , কিন্তু 50% স্বচ্ছ (Transparent):

rgba(255, 99, 71, 0.5)
hsla(9, 100%, 64%, 0.5)

HTML এ রংয়ের মান

<p>Same as color name "Tomato":</p>

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

<p>Same as color name "Tomato", but 50% transparent:</p>
<h1 style="background-color:rgba(255, 99, 71, 0.5);">rgba(255, 99, 71, 0.5)</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.5);">hsla(9, 100%, 64%, 0.5)</h1>

<p>In addition to the predefined color names, colors can be specified using RGB, HEX, HSL, or even transparent colors using RGBA or HSLA color values.</p>

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


RGB মানবিশিষ্ট রং

নিচের ফর্মূলা ব্যবহার করে , RGB মান বিশিষ্ট রং নির্ধারণ করা সম্ভব।
rgb(red, greenblue)

এখানে, প্রথম মানটি লাল (R) , দ্বিতীয়টি সবুজ (G) এবং তৃতীয়টি নীল (B) রংয়ের মান হিসেবে বিবেচিত হয়। প্রতিটি মান ০ থেকে ২৫৫ পর্যন্ত হয়ে থাকে।

উদাহরণস্বরূপ, rgb(255, 0, 0) লাল হিসেবে বিবেচ্য, কারণ লাল (R) এর মান সর্বোচ্চ নির্ধারণ করা হয়েছে এবং বাকিগুলোর মান ০ রাখা হয়েছে।

কালো রং নির্ধারণ করার জন্য তিনটি প্যারামিটারের মানই ০ করতে হবে। যেমন, rgb(0, 0, 0)।

সাদা রংয়ের জন্য প্রতটি প্যারামিটারের মান ২৫৫ করতে হবে। যেমন, rgb(255, 255, 255).

বিভিন্ন RGB মানের জন্য বিভিন্ন রং তৈরিকরণ:

rgb(255, 99, 71)

লাল (R)

255

সবুজ (G)

99

নীল (B)

71

HTML -এ রংয়ের মিশ্রণ

<h1 style="background-color:rgb(255, 0, 0);">rgb(255, 0, 0)</h1>
<h1 style="background-color:rgb(0, 0, 255);">rgb(0, 0, 255)</h1>
<h1 style="background-color:rgb(60, 179, 113);">rgb(60, 179, 113)</h1>
<h1 style="background-color:rgb(238, 130, 238);">rgb(238, 130, 238)</h1>
<h1 style="background-color:rgb(255, 165, 0);">rgb(255, 165, 0)</h1>
<h1 style="background-color:rgb(106, 90, 205);">rgb(106, 90, 205)</h1>

<p>In HTML, you can specify colors using RGB values.</p>

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।

একই মানের তিনটি মূল রং ব্যবহার করে ঝাপসা রং তৈরি করা হয়।

HTML -এ ঝাপসা রং তৈরিকরণ

<h1 style="background-color:rgb(0, 0, 0);">rgb(0, 0, 0)</h1>
<h1 style="background-color:rgb(60, 60, 60);">rgb(60, 60, 60)</h1>
<h1 style="background-color:rgb(120, 120, 120);">rgb(120, 120, 120)</h1>
<h1 style="background-color:rgb(180, 180, 180);">rgb(180, 180, 180)</h1>
<h1 style="background-color:rgb(240, 240, 240);">rgb(240, 240, 240)</h1>
<h1 style="background-color:rgb(255, 255, 255);">rgb(255, 255, 255)</h1>

<p>By using equal values for red, green, and blue, you will get different shades of gray.</p>

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


HEX মানবিশিষ্ট রং

হেক্সাডেসিমেল মান ব্যবহার করে নিচের পদ্ধতিতে রংয়ের মান নির্ধারণ করা যায়।
#rrggbb

এখানে rr (লাল), gg (সবুজ) এবং bb (নীল) ০ থেকে ২৫৫ পর্যন্ত হেক্সাডেসিমেল মান নির্দেশ করে।

যেমন, #ff0000 লাল হিসেবে বিবেচ্য, লালের (ff) মান সর্বোচ্চ এবং বাকিগুলোর মান সর্বনিম্ন (০০) করা হয়েছে।

HTML রং তৈরিতে HEX মান

<h1 style="background-color:#ff0000;">#ff0000</h1>
<h1 style="background-color:#0000ff;">#0000ff</h1>
<h1 style="background-color:#3cb371;">#3cb371</h1>
<h1 style="background-color:#ee82ee;">#ee82ee</h1>
<h1 style="background-color:#ffa500;">#ffa500</h1>
<h1 style="background-color:#6a5acd;">#6a5acd</h1>

<p>In HTML, you can specify colors using Hex values.</p>

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।

তিনটি মূল রংয়ের একই মান ব্যবহার করে ঝাপসা রং তৈরি করা হয়।

HTML -এ HEX value এর মাধ্যমে ঝাপসা রং তৈরিকরণ

<h1 style="background-color:#000000;">#000000</h1>
<h1 style="background-color:#3c3c3c;">#3c3c3c</h1>
<h1 style="background-color:#787878;">#787878</h1>
<h1 style="background-color:#b4b4b4;">#b4b4b4</h1>
<h1 style="background-color:#f0f0f0;">#f0f0f0</h1>
<h1 style="background-color:#ffffff;">#ffffff</h1>

<p>By using equal values for red, green, and blue, you will get different shades of gray.</p>

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


HSL মানবিশিষ্ট রং

HTML -এ hue, saturation, এবং lightness (HSL) এর মাধ্যমে রং নির্ধারণ করা যায়। এক্ষেত্রে নিম্নোক্ত ফর্মূলা ব্যবহার করতে হবে।

hsl(huesaturationlightness)

Hue হচ্ছে রং এর মাত্রা যা ডিগ্রিতে প্রকাশিত হয় এবং এর মান ০ থেকে ৩৬০ পর্যন্ত পরিবর্তিত হয়। ০ দ্বারা লাল , ১২০ দ্বারা সবুজ এবং ২৪০ দ্বারা নীল রং এর মাত্রা বোঝায়।

Saturation হচ্ছে একটি শতকরা মান, যেখানে ০% এর অর্থ হচ্ছে হালাকা এবং ১০০% দ্বারা পুরো মাত্রার রং বোঝায়।

Lightness ও একটি শতকরা মান, যেখানে ০% এর অর্থ কালো, ৫০% এর অর্থ সাদা ও কালোর মাঝামাঝি অবস্থা, ১০০% এর অর্থ পুরোপুরি সাদা।

HSL মানভিত্তিক HTML রং

<h1 style="background-color:hsl(0, 100%, 50%);">hsl(0, 100%, 50%)</h1>
<h1 style="background-color:hsl(240, 100%, 50%);">hsl(240, 100%, 50%)</h1>
<h1 style="background-color:hsl(147, 50%, 47%);">hsl(147, 50%, 47%)</h1>
<h1 style="background-color:hsl(300, 76%, 72%);">hsl(300, 76%, 72%)</h1>
<h1 style="background-color:hsl(39, 100%, 50%);">hsl(39, 100%, 50%)</h1>
<h1 style="background-color:hsl(248, 53%, 58%);">hsl(248, 53%, 58%)</h1>

<p>In HTML, you can specify colors using HSL values.</p>

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


Saturation (রংয়ের মাত্রা বা গাঢ়ত্ব)

Saturation দ্বারা রংয়ের গাঢ়ত্ব বা মাত্রা বোঝায়।

১০০% Saturation মানের পরিপূর্ণ মাত্রায় রং বোঝায়। এখানে কোনো স্বচ্ছ অবস্থা নেই।

৫০% দ্বারা অর্ধেক মাত্রার রং বোঝায়। এখানে অর্ধেক রং স্বচ্ছ।

০% দ্বারা পুরোপুরি স্বচ্ছ রং বোঝায় । অর্থাৎ, এখানে রংয়ের পরিমান শূন্য।

HTML Colors saturation

<h1 style="background-color:hsl(0, 100%, 50%);">hsl(0, 100%, 50%)</h1>
<h1 style="background-color:hsl(0, 80%, 50%);">hsl(0, 80%, 50%)</h1>
<h1 style="background-color:hsl(0, 60%, 50%);">hsl(0, 60%, 50%)</h1>
<h1 style="background-color:hsl(0, 40%, 50%);">hsl(0, 40%, 50%)</h1>
<h1 style="background-color:hsl(0, 20%, 50%);">hsl(0, 20%, 50%)</h1>
<h1 style="background-color:hsl(0, 0%, 50%);">hsl(0, 0%, 50%)</h1>

<p>With HSL colors, less saturation mean less color. 0% is completely gray.</p>

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


Lightness

রংয়ের Lightness বলতে, কোনো রংয়ে কি পরিমান আলো রয়েছে তা বোঝায়। যেখানে, ০% এর অর্থ আলোচিত রংয়ে কোনো আলো নেই। অর্থাৎ, কালো রং। ৫০% এর অর্থ আলো এবং আধারের মাঝামাঝি অবস্থা এবং ১০০% অর্থ পুরোপুরি আলোকিত রং। তারমানে এটি দ্বারা সাদা রং বোঝায়।

HTML রংয়ের lightness

<h1 style="background-color:hsl(0, 100%, 0%);">hsl(0, 100%, 0%)</h1>
<h1 style="background-color:hsl(0, 100%, 25%);">hsl(0, 100%, 25%)</h1>
<h1 style="background-color:hsl(0, 100%, 50%);">hsl(0, 100%, 50%)</h1>
<h1 style="background-color:hsl(0, 100%, 75%);">hsl(0, 100%, 75%)</h1>
<h1 style="background-color:hsl(0, 100%, 90%);">hsl(0, 100%, 90%)</h1>
<h1 style="background-color:hsl(0, 100%, 100%);">hsl(0, 100%, 100%)</h1>

<p>With HSL colors, 0% lightness means black, and 100 lightness means white.</p>

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


রংয়ের স্বচ্ছতা সাধারণত hue ও saturation এর মান ০ এবং lightness এর মান ০% থেকে ১০০% করে আলো বা আধারের মান নির্ধারণ করার মাধ্যমে করা হয়। কোনো বস্তুর আলোকীয় স্বচ্ছতা বলতে তার মধ্য দিয়ে কি পরিমান বা কি হারে আলো প্রবেশ করতে পারছে তাকে বোঝায়। এখানে রংয়ের স্বচ্ছতা বলতে আপেক্ষিকভাবে বস্তুর আলোকীয় স্বচ্ছতাকে বোঝায়।

HTML রং এর আলোকীয় স্বচ্ছতা

<h1 style="background-color:hsl(0, 100%, 0%);">hsl(0, 100%, 0%)</h1>
<h1 style="background-color:hsl(0, 100%, 25%);">hsl(0, 100%, 25%)</h1>
<h1 style="background-color:hsl(0, 100%, 50%);">hsl(0, 100%, 50%)</h1>
<h1 style="background-color:hsl(0, 100%, 75%);">hsl(0, 100%, 75%)</h1>
<h1 style="background-color:hsl(0, 100%, 90%);">hsl(0, 100%, 90%)</h1>
<h1 style="background-color:hsl(0, 100%, 100%);">hsl(0, 100%, 100%)</h1>

<p>With HSL colors, 0% lightness means black, and 100 lightness means white.</p>

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


RGBA মান বিশিষ্ট রং

RGB রংয়ের বর্ধিত রূপ হচ্ছে RGBA । এখানে A দ্বারা রংয়ের opacity বোঝায়।

নিম্নোক্ত উপায়ে RGBA রং নির্ধারিত করা হয়।

rgba(red, greenblue, alpha)

alpha parameter (A) দ্বারা 0.0 (পুরোপুরি স্বচ্ছ) এবং 1.0 (পুরোপুরি অস্বচ্ছ) এর মাঝামাঝি একটি সংখ্যা বোঝায়।

HTML এ RGBA মান বিশিষ্ট রং

<h1 style="background-color:rgba(255, 99, 71, 0);">rgba(255, 99, 71, 0)</h1>
<h1 style="background-color:rgba(255, 99, 71, 0.2);">rgba(255, 99, 71, 0.2)</h1>
<h1 style="background-color:rgba(255, 99, 71, 0.4);">rgba(255, 99, 71, 0.4)</h1>
<h1 style="background-color:rgba(255, 99, 71, 0.6);">rgba(255, 99, 71, 0.6)</h1>
<h1 style="background-color:rgba(255, 99, 71, 0.8);">rgba(255, 99, 71, 0.8)</h1>
<h1 style="background-color:rgba(255, 99, 71, 1);">rgba(255, 99, 71, 1)</h1>

<p>You can make transparent colors by using the RGBA color value.</p>

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


HSLA মান বিশিষ্ট রং

HSL এর বর্ধিত রূপ হচ্ছে HSLA । এখানে, A দ্বারা opacity বোঝায়।
নিম্নোক্ত উপায়ে HSLA মান নির্ধারণ করতে হয়।

hsla(hue, saturationlightness, alpha)

alpha parameter (A) দ্বারা 0.0 (পুরোপুরি স্বচ্ছ) এবং 1.0 (পুরোপুরি অস্বচ্ছ) এর মাঝামাঝি একটি সংখ্যা বোঝায়।

HTML Colors HSLA value

<h1 style="background-color:hsla(9, 100%, 64%, 0);">hsla(9, 100%, 64%, 0)</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.2);">hsla(9, 100%, 64%, 0.2)</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.4);">hsla(9, 100%, 64%, 0.4)</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.6);">hsla(9, 100%, 64%, 0.6)</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.8);">hsla(9, 100%, 64%, 0.8)</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 1);">hsla(9, 100%, 64%, 1)</h1>

<p>You can make transparent colors by using the HSLA color value.</p>

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।