CSS বৈধ রঙ মান
- পূর্ববর্তী পৃষ্ঠা CSS রঙ
- পরবর্তী পৃষ্ঠা CSS ডিফল্ট মান
CSS রঙ
CSS-এর রঙগুলোকে নিম্নলিখিতভাবে নির্ধারণ করা যেতে পারে:
- হেক্সাডেসিমাল রঙ
- স্বচ্ছতা সহ হেক্সাডেসিমাল রঙ
- RGB রঙ
- #p3 {background-color: rgb(0, 0, 255);} /* নীল */
- HSL রঙ
- #p4 {background-color: hsl(120, 60%, 70%);} /* হলুদ সবুজ রঙ */
- প্রিডিফাইন্ড/ব্রাউজার অভিন্ন রঙ নাম
- ব্যবহার করুন
currentcolor
শব্দ
হেক্সাডেসিমাল রঙ
হেক্সাডেসিমাল রঙ #RRGGBB নির্ধারণ করুন, যেখানে RR (red), GG (green) এবং BB (blue) হেক্সাডেসিমাল সংখ্যা রঙের কম্পোনেন্ট (অংশ) নির্ধারণ করে। সকল মাত্রা 00 থেকে FFর মধ্যে থাকতে হবে。
যেমন, #0000ff মানটি নীল হিসাবে প্রকাশিত হয়, কারণ blue কম্পোনেন্টটি সর্বোচ্চ মাত্রা (ff) নেয়, অন্যান্য কম্পোনেন্টগুলো 00 হিসাবে নির্ধারিত।
উদাহরণ
ভিন্ন হেক্সাডেসিমাল রঙ নির্ধারণ করুন:
#p1 {background-color: #ff0000;} /* লাল */ #p2 {background-color: #00ff00;} /* সবুজ */ #p3 {background-color: #0000ff;} /* নীল */
স্বচ্ছতা সহ হেক্সাডেসিমাল রঙ
হেক্সাডেসিমাল রঙ #RRGGBB নির্ধারণ করুন। স্বচ্ছতা বাড়াতে, 00 এবং FFর মধ্যে দুইটি অতিরিক্ত সংখ্যা যোগ করুন。
উদাহরণ
স্বচ্ছতা সহ হেক্সাডেসিমাল রঙ নির্ধারণ করুন:
#p1a {background-color: #ff000080;} /* স্বচ্ছতা সহ লাল */ #p2a {background-color: #00ff0080;} /* স্বচ্ছতা সহ সবুজ */ #p3a {background-color: #0000ff80;} /* স্বচ্ছতা সহ নীল */
RGB রঙ
RGB রঙ মানটি নিম্নরূপ rgb() ফাংশননির্দিষ্ট, সংজ্ঞা হল:
rgb(red, সবুজ, blue)
প্রত্যেক প্যারামিটার (red, সবুজ, blueএই প্যারামিটারটির শক্তি নির্ধারণ করে, যা 0 থেকে 255 পর্যন্ত পূর্ণ সংখ্যা বা শতপ্রতিশত (0% থেকে 100%) হতে পারে。
যেমন, রঙগুলো rgb(0,0,255) নীল হিসাবে প্রকাশিত হয়, কারণ blue প্যারামিটরটি সর্বোচ্চ মাত্রা (255) নেয়, অন্যান্য প্যারামিটারগুলো 0 হিসাবে নির্ধারিত।
此外,以下值定义相同的颜色:rgb(0,0,255) 和 rgb(0%,0%,100%)。
উদাহরণ
এছাড়া, নিচের মানগুলোতে একই রঙ নির্ধারণ করা হয়: rgb(0,0,255) এবং rgb(0%,0%,100%)。
ভিন্ন আরবিজি রঙ নির্ধারণ করুন: #p1 {background-color: rgb(255, 0, 0);} /* লাল */ #p2 {background-color: rgb(0, 255, 0);} /* সবুজ */
#p3 {background-color: rgb(0, 0, 255);} /* নীল */
RGBA রঙ
RGBA রঙ আরবিজি রঙ মানকের সম্প্রসারণ, যা এলপা (Alpha) চ্যানেলকে সহযোগিতা করে - অবজেক্টের অস্তরহীনতা নির্ধারণ করে。 rgba() ফাংশননির্দিষ্ট, সংজ্ঞা হল:
rgba(red, সবুজ, blue, alpha)
alpha পারামিটার 0.0 (সম্পূর্ণ স্পষ্ট) এবং 1.0 (সম্পূর্ণ অস্তিত্বহীন) মধ্যে থাকা সংখ্যা।
উদাহরণ
অস্তরহীন ভিন্ন আরবিজি রঙ নির্ধারণ করুন:
#p1 {background-color: rgba(255, 0, 0, 0.3);} /* অস্তরহীন লাল */ #p2 {background-color: rgba(0, 255, 0, 0.3);} /* অস্তরহীন সবুজ */ #p3 {background-color: rgba(0, 0, 255, 0.3);} /* অস্তরহীন নীল */
HSL রঙ
HSL হল স্পষ্টতা (hue), সত্তা (saturation) এবং সোমদূষণ (lightness) - রঙকে কলমের কোণের প্রকার হিসাবে প্রকাশ করে।
ব্যবহার করুন hsl() ফাংশনএইচএসএল রঙ নির্ধারণ করুন, এইচএসএল() ফাংশনের সংজ্ঞা হল:
hsl(hue, saturation, lightness)
স্পষ্টতা হল রঙবহীতের ডিগ্রি (০ থেকে ৩৬০) - ০ (বা ৩৬০) হল লাল, ১২০ হল সবুজ, ২৪০ হল নীল。
সত্তা একটি শতাংশ হিসাবে বলা হয়; ০% হল গ্রেই, ১০০% হল সম্পূর্ণ রঙ。
সোমদূষণটি একটি শতাংশ হিসাবে বলা হয়; ০% হল কালো, ১০০% হল সাদা。
উদাহরণ
ভিন্ন এইচএসএল রঙ নির্ধারণ করুন:
#p1 {background-color: hsl(120, 100%, 50%);} /* সবুজ */ #p2 {background-color: hsl(120, 100%, 75%);} /* সবুজ তীব্রতা */ #p3 {background-color: hsl(120, 100%, 25%);} /* গভীর সবুজ */ #p4 {background-color: hsl(120, 60%, 70%);} /* 柔和的绿色 */
#p4 {background-color: hsl(120, 60%, 70%);} /* হলুদ সবুজ রঙ */
HSLA রঙ
HSLA রঙ মান HSL রঙ মানের সম্প্রসারণ, যা একটি Alpha চ্যানেল - নির্দিষ্ট বস্তুর অস্তিত্বহীনতা নির্দিষ্ট করে。 hsla() ফাংশননির্দিষ্ট, এই ফাংশনের সংজ্ঞানীকরণ হল:
hsla(hue, saturation, lightness, alpha)
alpha পারামিটার 0.0 (সম্পূর্ণ স্পষ্ট) এবং 1.0 (সম্পূর্ণ অস্তিত্বহীন) মধ্যে থাকা সংখ্যা।
উদাহরণ
বিভিন্ন অস্তিত্বহীন HSL রঙ নির্ধারণ করুন:
#p1 {background-color: hsla(120, 100%, 50%, 0.3);} /* অস্তিত্বহীন সবুজ রঙ */ #p2 {background-color: hsla(120, 100%, 75%, 0.3);} /* অস্তিত্বহীন সবুজ রঙ */ #p3 {background-color: hsla(120, 100%, 25%, 0.3);} /* অস্তিত্বহীন গুলাবী রঙ */ #p4 {background-color: hsla(120, 60%, 70%, 0.3);} /* অস্তিত্বহীন হুকির হলুদ রঙ */
প্রিডিফাইন্ড/ব্রাউজার অভিন্ন রঙ নাম
HTML এবং CSS রঙ নির্দেশিকায় 140টি রঙ নাম প্রিডিফাইন্ড হয়েছে。
যেমন:blue
、red
、coral
、brown
ইত্যাদি:
উদাহরণ
বিভিন্ন রঙ নাম নির্ধারণ করুন:
#p1 {background-color: blue;} #p2 {background-color: red;} #p3 {background-color: coral;} #p4 {background-color: brown;}
সমস্ত প্রিডিফাইন্ড নামগুলি আমাদের রঙ নাম সংক্ষিপ্ত বিবরণ হান্ডবুকে পাওয়া যায়。
currentcolor কীভাবে
currentcolor
কীভাবে color এক্সপ্রেশনটির মান উল্লেখ করা হয়
উদাহরণ
নিম্ন <div> ইলেকট্রনের হুকির রঙ নীল হবে, কারণ <div> ইলেকট্রনের লেখার রঙ নীল হবে:
#myDIV { color: blue; /* নীল লেখার রঙ */ border: 10px solid currentcolor; /* নীল হুকির রঙ */ }
- পূর্ববর্তী পৃষ্ঠা CSS রঙ
- পরবর্তী পৃষ্ঠা CSS ডিফল্ট মান