সিএসএস রঙ - Css Colour


কোন কিছুর ডিজাইন বা স্টাইল করার জন্য রঙ সর্বাপেক্ষা প্রধান বিবেচ্য বিসয়। এই অধ্যায়ে কোন এইচটিএমএল এলিমেন্টের রঙ পরিবর্তন বা রঙ নির্ধারণ করা নিয়ে আলোচনা করা হয়েছে।


color প্রপার্টি

সিএসএস এর color প্রপার্টি ব্যবহার করে কোন এইচটিএমএল এলিমেন্টের রঙ পরিবর্তন করা যায়।

নিচে একটি উদাহরণ দেখুন, যেখানে color প্রপার্টি ব্যবহার করে এইচটিএমএল এলিমেন্টের রঙ নির্ধারণ করা হয়েছে।

উদাহরণ

h1 {
    color: blue;
   }

p {
   color: red;
  }


কোড এডিটর



লিংকের রঙ নির্ধারণ

color প্রপার্টি ব্যবহার করে এইচটিএমএল লিংক ট্যাগের মধ্যস্থিত লেখার রঙ নির্ধারণ করা যায়।

নিচে একটি উদাহরণ দেখুন, যেখানে color প্রপার্টি ব্যবহার করে এইচটিএমএল অ্যাংকর বা a ট্যাগের রঙ নির্ধারণ করা হয়েছে। এবং a:hover প্রপার্টি ব্যবহার করা হয়েছে, এর ফলে অ্যাংকর বা a ট্যাগের মধ্যস্থিত লেখার ওপর মাউস পয়েন্টার রাখলে লেখার রঙ পরিবর্তন হবে।

নিচে একটি উদাহরণ দেখুন।

উদাহরণ

a {
  color: red;
  }

a:hover {
  color: blue;
  }

রঙের ব্যবহার পদ্ধতি

সিএসএস এর মাধ্যমে ওয়েব পেজে রঙ ব্যবহার করা যায়। সিএসএস ব্যবহার করে ওয়েব পেজে রঙ নির্ধারণ করার পদ্ধতিগুলো হল নিম্মরুপ -


রঙের নাম লিখে,

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

Tomato
Orange
DodgerBlue
MediumSeaGreen
Gray
SlateBlue
Violet
LightGray

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


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)

ওপরের সিনট্যাক্সে প্রথম তিনটি মান RGB মান বা value অর্থাৎ red, green এবং blue রঙের পরিমান নির্ধারণ করে আর চতুর্থ মানটি হল আলফা মান যা রঙের স্বচ্ছতা বা Opacity নির্ধারণ করে।

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

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

নিচে RGBA পদ্ধতি ব্যাবহার করে কয়েকটি উদাহরন দেখুন।

উদাহরণ

#div01 {background-color:rgba(255, 0, 0, 0.2);}
#div02 {background-color:rgba(255, 0, 0, 0.4);}
#div03 {background-color:rgba(255, 0, 0, 0.6);}
#div04 {background-color:rgba(255, 0, 0, 0.8);}

কোড এডিটর



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)