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
