CSS TUTORIAL IN BANGLA PART-2 : CSS Colors

জনপ্রিয় ক্যাটাগরি সমূহ -

css colors

CSS
Colors

HTML
Page বা
Element এর Color সেট করার জন্য CSS Color প্রোপার্টি ব্যবহার করা হয়। আর CSS দিয়ে ওয়েবসাইটের বিভিন্ন উপাদানে Color প্রধান বা পরিবর্তনের জন্য অধিকাংশ সময় নিচের ৫ টি পদ্ধতির যেকোনো এক বা একাধিক পদ্ধতি ব্যবহৃত হয়। চলুন পদ্ধতি গুলোর বিস্তারিত জানা যাক :

  • Hexadecimal
    colors
  • RGB
    colors
  • RGBA
    colors
  • HSL
    colors
  • HSLA
    colors

CSS
Hexadecimal Color

Web এ Hexadecimal Color কে #RRGGBB দ্বারা define করা হয়,যেখানে RR (red), GG (green) এবং BB (blue) Hexadecimal সম্পূর্ন কালারের এক একটি অংশবিশেষ। অর্থাৎ এখানে সকল মান 00 থেকে FF এর ভিতরে থাকে।

উদাহরণস্বরূপ, #0000ff মানটি নীল রং নির্দেশ করে, কারন এখানে RR এবং GG এর মান শূন্য।

আবার একইভাবে #ff0000 মানটি লাল রং নির্দেশ করে, কারন এখানে GG এবং BB এর মান শূন্য।

ঠিক একইভাবে #00ff00 মানটি সবুজ রং নির্দেশ করে, কারন এখানে RR এবং BB এর মান শূন্য।

আর যদি এগুলো mixing করেন , তাহলে মিক্সিং এর ধরণ অনুযায়ী ভিন্ন ভিন্ন কালার তৈরী হবে। চলুন এবং কয়েকটা উদাহরণ দিয়ে দেখা যাক: 

<!DOCTYPE html>
<html>
<head>
   <title>CSS Hexadecimal Color</title>
   
</head>
<body>
<h1 style="background-color:#ff0000;">#ff0000</h1>
<h1 style="background-color:#0000ff;">#0000ff</h1>
<h1 style="background-color:#00ff00;">#00ff00</h1>
<h1 style="background-color:#ee82ee;">#ee82ee</h1>
<h1 style="background-color:#ffa500;">#ffa500</h1>
<h1 style="background-color:#6a5acd;">#6a5acd</h1>
</body>
</html>

Output




CSS Hexadecimal Color


#ff0000

#0000ff

#00ff00

#ee82ee

#ffa500

#6a5acd


CSS RGB
Color

Web এ RGB Color কে rgb(red, green, blue) দ্বারা define করা হয়, এবং এখানে সকল মান 0 থেকে 255 এর ভিতরে থাকে। এবং এখানে color এর শতকরা মান ০-১০০% হতে পারে।

উদাহরণস্বরূপ, rgb(0,0,255) মানটি নীল রং নির্দেশ করে, কারন এখানে Red এবং Green এর মান শূন্য।

আবার একইভাবে rgb(255,0,0) মানটি লাল রং নির্দেশ করে, কারন এখানে Green এবং Blue এর মান শূন্য।

ঠিক একইভাবে rgb(0,255,0) মানটি সবুজ রং নির্দেশ করে, কারন এখানে Red এবং Blue এর মান শূন্য।

আর যদি এগুলো mixing করেন , তাহলে মিক্সিং এর ধরণ অনুযায়ী ভিন্ন ভিন্ন কালার তৈরী হবে। চলুন এবং কয়েকটা উদাহরণ দিয়ে দেখা যাক: 

<!DOCTYPE html>
<html>
<head>
   <title>CSS RGB Color</title>
   
</head>
<body>
<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>
</body>
</html>

Output




CSS RGB Color


rgb(255, 0, 0)

rgb(0, 0, 255)

rgb(60, 179, 113)

rgb(238, 130, 238)

rgb(255, 165, 0)

rgb(106, 90, 205)


CSS
RGBA Color

RGBA colorমান, RGB color মানের সাথে একটি আলফা চ্যানেল যুক্ত করে করা হয়। যেটি হলো opacity (অস্বচ্ছলতা)। অর্থাৎ RGBA color মান rgba(red, green, blue, alpha) দ্বারা নির্দেশ করা হয়। আর আলফা প্যারামিটারটি ০.০ থেকে ১.০ পর্যন্ত হয়ে থাকে। নিচে RGBA কালার এর উদাহরণ দেওয়া হলো 

<!DOCTYPE html>
<html>
<head>
   <title>CSS RGB Color</title>
   
</head>
<body>
<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>
</body>
</html>

Output




CSS RGB Color


rgba(255, 99, 71, 0)

rgba(255, 99, 71, 0.2)

rgba(255, 99, 71, 0.4)

rgba(255, 99, 71, 0.6)

rgba(255, 99, 71, 0.8)

rgba(255, 99, 71, 1)


CSS HSL Color

HSL( hue, saturation এবং lightness) নির্দেশ করে এবং কালার-এর উপস্থাপনা একটা গোলাকার চক্র তুল্য। অর্থাৎ ০-৩৬০, যেখানে ০ অথবা ৩৬০ হচ্ছে লাল(Red), ১২০ হচ্ছে সবুজ(Green) এবং ২৪০ হচ্ছে নীল(Blue) Saturation-হচ্ছে শতকরা মান ০% হচ্ছে ধূসর ছায়া এবং ১০০% হচ্ছে পুর্নাঙ্গ কালার। Lightness-ও হচ্ছে শতকরা মান; ০% হচ্ছে কালো, ১০০% হচ্ছে সাদা। চলুন একটা উদাহরণ দিয়ে বুঝে নেয়া যাক : 

<!DOCTYPE html>
<html>
<head>
   <title>CSS HSL Color</title>
   
</head>
<body>
<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>
</body>
</html>

Output




CSS HSL Color


hsl(0, 100%, 50%)

hsl(240, 100%, 50%)

hsl(147, 50%, 47%)

hsl(300, 76%, 72%)

hsl(39, 100%, 50%)

hsl(248, 53%, 58%)


CSS HSLA Color

HSLA Color মান hsla(hue, saturation, lightness, alpha) দ্বারা সংজ্ঞায়িত করা হয়, অর্থাৎ HSL Color মানের সাথে একটি Alpha চ্যানেল যুক্ত করে। যেটি হলো opacity বা অবজেক্টের অস্বচ্ছলতা।। আলফা প্যারামিটারটি ০.০ থেকে ১.০ পর্যন্ত হয়ে থাকে। চলুন একটা উদাহরণ দিয়ে বুঝে নেয়া যাক : 

<!DOCTYPE html>
<html>
<head>
   <title>CSS HSLA Color</title>
   
</head>
<body>
<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>
</body>
</html>

Output




CSS HSLA Color


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

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

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

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

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

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


Post Views: 571
Picture of Sahab Uddin

Sahab Uddin

Leave A Reply

Your email address will not be published. Required fields are marked *