CSS Colors

By /

সিএসএস রং:

CSS-এর কালার প্রপার্টি HTML এলিমেন্টের কালার সেট করতে ব্যবহার করা হয়। সাধারণত, এই বৈশিষ্ট্যটি ব্যাকগ্রাউন্ডের রঙ বা একটি উপাদানের ফন্টের রঙ সেট করতে ব্যবহৃত হয়।

CSS-এ, আমরা রঙ নির্দিষ্ট করার জন্য রঙের মান ব্যবহার করি। আমরা সীমানা-রঙ এবং অন্যান্য আলংকারিক প্রভাব জন্য এই সম্পত্তি ব্যবহার করতে পারেন.

আমরা নিম্নলিখিত উপায়গুলি ব্যবহার করে একটি উপাদানের রঙ নির্ধারণ করতে পারি:

  • .RGB format.
  • RGBA format.
  • Hexadecimal notation.
  • HSL.
  • HSLA.
  • Built-in color

চলুন উপরের উপায়গুলোর সিনট্যাক্স এবং বর্ণনা বিস্তারিতভাবে বুঝি।

আরজিবি ফরম্যাট:

RGB ফরম্যাট হল ‘RED GREEN and BLUE’-এর সংক্ষিপ্ত রূপ যা 0 থেকে 255-এর মধ্যে R, G, B-এর মানগুলি নির্দিষ্ট করে একটি HTML উপাদানের রঙ সংজ্ঞায়িত করার জন্য ব্যবহৃত হয়।

এই বিন্যাসে রঙের মান rgb() বৈশিষ্ট্য ব্যবহার করে নির্দিষ্ট করা হয়। এই বৈশিষ্ট্যটি তিনটি মানকে অনুমতি দেয় যা হয় শতাংশ বা পূর্ণসংখ্যা হতে পারে (0 থেকে 255 পর্যন্ত)।

এই সম্পত্তি সব ব্রাউজারে সমর্থিত নয়; এই কারণেই এটি ব্যবহার করার পরামর্শ দেওয়া হয় না।

বাক্য গঠন:

  1. color: rgb(R, G, B);  

RGBA বিন্যাস:

এটি প্রায় RGB ফরম্যাটের অনুরূপ যে RGBA তে A (আলফা) থাকে যা উপাদানটির স্বচ্ছতা নির্দিষ্ট করে। আলফার মান 0.0 থেকে 1.0 রেঞ্জের মধ্যে, যার মধ্যে 0.0 সম্পূর্ণ স্বচ্ছ এবং 1.0 স্বচ্ছ নয়।

বাক্য গঠন:

  1. color:rgba(R, G, B, A);  

হেক্সাডেসিমেল নোটেশন:

হেক্সাডেসিমেলকে ছয়-সংখ্যার রঙের উপস্থাপনা হিসাবে সংজ্ঞায়িত করা যেতে পারে। এই স্বরলিপিটি # চিহ্ন দিয়ে শুরু হয় এবং ছয়টি অক্ষরের রেঞ্জ 0 থেকে F পর্যন্ত। হেক্সাডেসিমেল নোটেশনে, প্রথম দুটি সংখ্যা লাল (RR) রঙের মান, পরের দুটি সংখ্যা সবুজ (GG) রঙের মানকে প্রতিনিধিত্ব করে এবং শেষটি দুটি সংখ্যা নীল (BB) রঙের মানকে উপস্থাপন করে।

হেক্সাডেসিমেলে কালো রঙের স্বরলিপি হল #000000, এবং হেক্সাডেসিমেলে সাদা রঙের স্বরলিপি হল #FFFFFF। হেক্সাডেসিমেল নোটেশনের কিছু কোড হল #FF0000, #00FF00, #0000FF, #FFFF00 এবং আরও অনেক কিছু।

বাক্য গঠন:

  1. color:#(0-F)(0-F)(0-F)(0-F)(0-F)(0-F);  

শর্ট হেক্স কোড:

এটি হেক্সাডেসিমেল স্বরলিপির একটি সংক্ষিপ্ত রূপ যেখানে প্রতিটি সংখ্যা একটি সমতুল্য হেক্সাডেসিমেল মানতে পৌঁছানোর জন্য পুনরায় তৈরি করা হয়।

উদাহরণস্বরূপ, #7B6 হেক্সাডেসিমেলে #77BB66 হয়ে যায়।

সংক্ষিপ্ত হেক্সে কালো রঙের স্বরলিপি হল #000, এবং ছোট হেক্সে সাদা রঙের স্বরলিপি হল #FFF। সংক্ষিপ্ত হেক্সে কিছু কোড হল #F00, #0F0, #0FF, #FF0 এবং আরও অনেক কিছু।

এইচএসএল:

এটি হিউ, স্যাচুরেশন এবং লাইটনেসের একটি সংক্ষিপ্ত রূপ। আসুন তাদের পৃথকভাবে বুঝতে পারি।

হিউ: এটিকে 0 থেকে 360 পর্যন্ত রঙের চাকার ডিগ্রী হিসাবে সংজ্ঞায়িত করা যেতে পারে। 0 লাল প্রতিনিধিত্ব করে, 120 সবুজ প্রতিনিধিত্ব করে, 240 নীল প্রতিনিধিত্ব করে।

স্যাচুরেশন: এটি শতাংশে মান নেয় যেখানে 100% সম্পূর্ণরূপে স্যাচুরেটেড, অর্থাৎ ধূসর কোনো শেড নয়, 50% 50% ধূসর প্রতিনিধিত্ব করে, কিন্তু রঙটি এখনও দৃশ্যমান, এবং 0% সম্পূর্ণরূপে অসম্পৃক্ত, অর্থাৎ সম্পূর্ণ ধূসর, এবং রঙ অদৃশ্য।

হালকাতা: রঙের হালকাতাকে আলো হিসাবে সংজ্ঞায়িত করা যেতে পারে যা আমরা এমন রঙ দিতে চাই যেখানে 0% কালোকে প্রতিনিধিত্ব করে (কোনও আলো নেই), 50% অন্ধকার বা আলোর প্রতিনিধিত্ব করে না এবং 100% সাদা (সম্পূর্ণ হালকাতা) প্রতিনিধিত্ব করে। .

আসুন কালার প্রপার্টিতে HSL এর সিনট্যাক্স দেখি।

বাক্য গঠন:

  1. color:hsl(H, S, L);  

এইচ এস এল এ

এটি সম্পূর্ণরূপে এইচএসএল প্রপার্টির অনুরূপ, এতে A (আলফা) রয়েছে যা উপাদানটির স্বচ্ছতা নির্দিষ্ট করে। আলফার মান 0.0 থেকে 1.0 এর মধ্যে, যার মধ্যে 0.0 সম্পূর্ণ স্বচ্ছ নির্দেশ করে এবং 1.0 স্বচ্ছ নয়।

বাক্য গঠন:

  1. color:hsla(H, S, L, A);  

অন্তর্নির্মিত রঙ:

এর নাম থেকে বোঝা যায়, অন্তর্নির্মিত রঙ মানে পূর্বে সংজ্ঞায়িত রঙের সংগ্রহ যা লাল, নীল, সবুজ ইত্যাদির মতো নাম ব্যবহার করে ব্যবহার করা হয়।

বাক্য গঠন:

  1. color: color-name;  

আসুন তাদের দশমিক এবং হেক্সাডেসিমেল মান সহ অন্তর্নির্মিত রঙগুলির তালিকা দেখি।

S.no. Color name Hexadecimal Value Decimal Value or rgb() value
1. Red #FF0000 rgb(255,0,0)
2. Orange #FFA500 rgb(255,165,0)
3. Yellow #FFFF00 rgb(255,255,0)
4. Pink #FFC0CB rgb(255,192,203)
5. Green #008000 rgb(0,128,0)
6. Violet #EE82EE rgb(238,130,238)
7. Blue #0000FF rgb(0,0,255)
8. Aqua #00FFFF rgb(0,255,255)
9. Brown #A52A2A rgb(165,42,42)
10. White #FFFFFF rgb(255,255,255)
11. Gray #808080 rgb(128,128,128)
12. Black #000000 rgb(0,0,0)

CSS রঙের চিত্র, যার মধ্যে উপরের বৈশিষ্ট্যগুলি রয়েছে, নীচে দেওয়া হল।

উদাহরণ:

  1. </html>   
  2.     <head>   
  3.         <title>CSS hsl color property</title>   
  4.         <style>   
  5.             h1{   
  6.                 text-align:center;   
  7.             }   
  8.             #rgb{  
  9.               color:rgb(255,0,0);  
  10.             }  
  11.             #rgba{  
  12.               color:rgba(255,0,0,0.5);  
  13.             }  
  14.             #hex{  
  15.               color:#EE82EE;  
  16.             }  
  17.             #short{  
  18.               color: #E8E;  
  19.             }  
  20.             #hsl{  
  21.               color:hsl(0,50%,50%);  
  22.             }  
  23.             #hsla{                
  24.               color:hsla(0,50%,50%,0.5);  
  25.             }  
  26.             #built{  
  27.               color:green;  
  28.             }  
  29.         </style>   
  30.     </head>   
  31.     </body>   
  32.         <h1 id=“rgb”>   
  33.              Hello World. This is RGB format.  
  34.         </h1>   
  35.         <h1 id=“rgba”>   
  36.           Hello World. This is RGBA format.  
  37.      </h1>   
  38.      <h1 id=“hex”>   
  39.       Hello World. This is Hexadecimal format.  
  40.  </h1>   
  41.  <h1 id=“short”>   
  42.   Hello World. This is Short-hexadecimal format.  
  43. </h1>   
  44.  <h1 id=“hsl”>   
  45.   Hello World. This is HSL format.  
  46. </h1>   
  47. <h1 id=“hsla”>   
  48.   Hello World. This is HSLA format.  
  49. </h1>   
  50. <h1 id=“built”>   
  51.   Hello World. This is Built-in color format.  
  52. </h1>   
  53.     </body>   
  54. </html> 


Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top