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টি রঙ নাম প্রিডিফাইন্ড হয়েছে。

যেমন:blueredcoralbrown ইত্যাদি:

উদাহরণ

বিভিন্ন রঙ নাম নির্ধারণ করুন:

#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; /* নীল হুকির রঙ */
}

স্বয়ংক্রিয়ভাবে প্রয়াস করুন