সিএসএস রঙের মান - Css Colur Value


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

সিএসএস এর মাধ্যমে ওয়েব পেজে রঙ ব্যবহার করা যায়। পূর্বের অধ্যায়ে আমরা সিএসএস সমর্থিত যে সকল রঙের নাম সরাসরি লিখে ব্যবহার করা যায় সেগুলো সম্পর্কে যেনেছি। এই অধ্যায়ে বাকি অন্য পদ্ধতি গুলো সম্পর্কে জানব। ওয়েব পেজে রঙ বাবহারের জন্য সিএসএস সমর্থিত পদ্ধতি গুলহল নিম্নরূপ।


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" একই।

নিচে হেক্সাডেসিমাল পদ্ধতির কিছু উদাহরণ দেখুন।

উদাহরণ

  #h1 {background-color: #ff0000;}   /* red */
  #h2 {background-color: #00ff00;}   /* green */
  #h3 {background-color: #0000ff;}   /* blue */

কোড এডিটর



RGB পদ্ধতি

সিএসএস এ রঙ প্রদর্শনের একটি জনপ্রিয় পদ্ধতি হল আরজিবি পদ্ধতি বা 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)

নিচে আরজিবি পদ্ধতির কিছু উদাহরণ দেখুন।

উদাহরণ

#h1 {background-color: rgb(255, 0, 0);}   /* red */
  #h2 {background-color: rgb(0, 255, 0);}   /* green */
  #h3 {background-color: rgb(0, 0, 255);}   /* blue */

কোড এডিটর



RGBA পদ্ধতি

RGBA পদ্ধতি হল RGB পদ্ধতিরই একটি বর্ধিত রুপ যেখানে একটি আলফা চ্যানেল বা alpha channel যুক্ত করা হয়েছে যা কোন একটি রঙের স্বচ্ছতা নির্ধারণ করে।
RGBA পদ্ধতির ফরম্যাটটি হল নিম্নরূপ -

rgba(red, green, blue, alpha)

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

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

নিচে আরজিবিএ পদ্ধতির কিছু উদাহরণ দেখুন।

উদাহরণ

 #h1 {background-color: rgba(255, 0, 0, 0.3);}   /* red with opacity */
 #h2 {background-color: rgba(0, 255, 0, 0.3);}   /* green with opacity */
 #h3 {background-color: rgba(0, 0, 255, 0.3);}   /* blue with opacity */

কোড এডিটর



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%)

নিচে HSL পদ্ধতির কিছু উদাহরণ দেখুন।

উদাহরণ

#h1 {background-color: hsl(120, 100%, 50%);}   /* green */
#h2 {background-color: hsl(120, 100%, 75%);}   /* light green */
#h3 {background-color: hsl(120, 100%, 25%);}   /* dark green */
#h4 {background-color: hsl(120, 60%, 70%);}    /* pastel green */

কোড এডিটর



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)

নিচে HSLA পদ্ধতির কিছু উদাহরণ দেখুন।

উদাহরণ

#h1 {background-color: hsla(120, 100%, 50%, 0.3);}   /* green with opacity */
#h2 {background-color: hsla(120, 100%, 75%, 0.3);}   /* light green with opacity */
#h3 {background-color: hsla(120, 100%, 25%, 0.3);}   /* dark green with opacity */
#h4 {background-color: hsla(120, 60%, 70%, 0.3);}    /* pastel green with opacity */

কোড এডিটর



প্রিডিফাইন্ড/ক্রস-ব্রাউজার অর্থাৎ Predefined/Cross-browser রঙের নাম

HTML ও CSS এর জন্য 140 টি রঙের নাম নির্দিষ্ট করা রয়েছে, এগুলোকে প্রিডিফাইন্ড/ক্রস-ব্রাউজার অর্থাৎ Predefined/Cross-browser রঙের নাম বলা হয়। সকল ব্রাউজারই এই রঙ গুলো সমর্থন করে।

এই প্রিডিফাইন্ড/ক্রস-ব্রাউজার রঙ গুলো সম্পর্কে জানতে HTML রঙের নাম ওয়েব পেজটি দেখুন।