CSS রঙ

CSS সমর্থন ১৪০ বেশি রং নামএবং ষড়শোকল মান, RGB মান, RGBA মান, HSL মান, HSLA মান এবং অস্তিত্বহীনতা

RGBA রং

RGBA রংযোগ্য হল RGB রংযোগ্যসমূহের সম্প্রসারণ, যা alpha চ্যানেল সহ যা রংযোগ্য অস্তিত্বহীনতা নির্ধারণ করে

RGBA রংযোগ্য এইভাবে নির্ধারিত: rgba(red, green, blue, alpha)。 alpha প্রমাণ্য হল ০.০ (সম্পূর্ণ স্পষ্ট) থেকে ১.০ (সম্পূর্ণ অস্তিত্বহীন) এর মধ্যে সংখ্যা

rgba(255, 0, 0, 0.2);
rgba(255, 0, 0, 0.4);
rgba(255, 0, 0, 0.6);
rgba(255, 0, 0, 0.8);

নিচের উদাহরণগুলি ভিন্ন রংযোগ্য নির্ধারণ করে:

ইনস্ট্যান্স

#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).

সতুরতা হল সতুরতা চক্রের ডিগ্রি (০ থেকে ৩৬০):

  • ০ (বা ৩৬০) হল লাল
  • ১২০ হল সবুজ
  • ২৪০ হল নীল

সতুরতা একটি শতাংশ মান: ১০০% হল সমপ্রকৃতির (সমপ্রকাশ)।

আলোকমান একটি শতাংশ মান: ০% হল গন্ধ্যমান (কালো) এবং ১০০% হল সাদা。

hsl(0, 100%, 30%);
hsl(0, 100%, 50%);
hsl(0, 100%, 70%);
hsl(0, 100%, 90%);

নিম্নোক্ত উদাহরণগুলি ভিন্ন হস্লা রং নির্ধারণ করে:

ইনস্ট্যান্স

#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%);}   /* হলুদ রং */

স্বয়ংক্রিয় পরীক্ষা করুন

HSLA রং

HSLA রংগুলি হলুদ রংগুলির এক্সটেনশন - যা রংগুলির অস্পষ্টতা নির্ধারণ করে。

HSLA রংগুলি নিম্নলিখিত পারামিটারদ্বারা নির্ধারিত হয়: hsla(hue, saturation, lightness, alpha)，যেখানে alpha পারামিটার অস্পষ্টতা নির্ধারণ করে। alpha পারামিটার 0.0 (সম্পূর্ণ স্পষ্ট) এবং 1.0 (সম্পূর্ণ অস্পষ্ট) মধ্যে থাকা সংখ্যা হবে。

hsla(0, 100%, 30%, 0.3);
hsla(0, 100%, 50%, 0.3);
hsla(0, 100%, 70%, 0.3);
hsla(0, 100%, 90%, 0.3);

নিম্নোক্ত উদাহরণগুলি ভিন্ন হস্লা রং নির্ধারণ করে:

ইনস্ট্যান্স

#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);}   /* অস্পষ্টতাসহ হলুদ রং */

স্বয়ংক্রিয় পরীক্ষা করুন

অস্পষ্টতা

CSS opacity এই অ্যাট্রিবিউট সমগ্র ইলেকট্রনের অস্পষ্টতা নির্ধারণ করে (পটভূমির রং এবং লেখা অস্পষ্ট/স্পষ্ট হবে)。

opacity মান হতেই হবে 0.0 (সম্পূর্ণ স্পষ্ট) এবং 1.0 (সম্পূর্ণ অস্পষ্ট) মধ্যে থাকা সংখ্যা হবে。

rgb(255, 0, 0); opacity:0.2;
rgb(255, 0, 0); opacity:0.4;
rgb(255, 0, 0); opacity:0.6;
rgb(255, 0, 0); opacity:0.8;

প্রত্যক্ষদৃষ্টিতে উপরের লেখাও স্বচ্ছ/অস্বচ্ছ হবে!

নিচের উদাহরণটি অস্বচ্ছতা সহ বিভিন্ন ইলেকট্রনিক নিশান দেখায়：

ইনস্ট্যান্স

#p1 {background-color:rgb(255,0,0);opacity:0.6;}  /* অস্বচ্ছ লাল */
#p2 {background-color:rgb(0,255,0);opacity:0.6;}  /* অস্বচ্ছ সবুজ */
#p3 {background-color:rgb(0,0,255);opacity:0.6;}  /* অস্বচ্ছ নীল */

স্বয়ংক্রিয় পরীক্ষা করুন