CSS

CSS TUTORIAL IN BANGLA PART-2: CSS Colors

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

#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

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

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

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

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)

আমি মাসুদ আলম, বাংলাদেশের ৩৬ তম Zend Certified Engineer । ২০০৯ সালে কম্পিউটার সাইন্স থেকে বেচেলর ডিগ্রী অর্জন করি। দীর্ঘ ১৫ বছর আমি Winux Soft, SSL Wireless, IBCS-PRIMAX, Max Group, Canadian International Development Agency (CIDA), Care Bangladesh, World Vision, Hellen Keller, Amarbebsha Ltd সহ বিভিন্ন দেশি বিদেশী কোম্পানিতে ডেটা সাইন্স, মেশিন লার্নিং, বিগ ডেটা, ওয়েব ডেভেলপমেন্ট এবং সফটওয়্যার ডেভেলপমেন্ট এর উপর বিভিন্ন লিডিং পজিশন এ চাকরি এবং প্রজেক্ট লিড করি। এছাড়াও বাংলাদেশের ১৮৫ জন জেন্ড সার্টিফাইড ইঞ্জিনিয়ার এর মধ্যে ১২০ এরও অধিক ছাত্র আমার হাতে জেন্ড সার্টিফাইড ইঞ্জিনিয়ার হয়েছেন। বর্তমানে w3programmers ট্রেনিং ইনস্টিটিউট এ PHP এর উপর Professional এবং Advance Zend Certified PHP -8.2 Engineering, Laravel Mastering Course with ReactJS, Python Beginning To Advance with Blockchain, Machine Learning and Data Science, Professional WordPress Plugin Development Beginning to Advance কোর্স করাই। আর অবসর সময়ে w3programmers.com এ ওয়েব টেকনোলজি নিয়ে লেখালেখি করি।

Leave a Reply