CSS-এ RGB এর মাধ্যমে রঙ নির্ধারণ

টিউটোরিয়ালের একদম শুরুতে, যখন আমরা রঙ নিয়ে পড়ছিলাম, আমি আপনাদের বলেছিলাম যে রঙ ইংরেজি শব্দ দ্বারা, অথবা rgb এর মাধ্যমে, অথবা # এর মাধ্যমে নির্ধারণ করা যায়। শেষের দুটি ফরম্যাট যেকোনো শেডের রঙ পেতে দেয়। আসুন জেনে নেওয়া যাক, এই ফরম্যাটগুলো ঠিক কিভাবে কাজ করে।

এই পদ্ধতিগুলো বোঝার জন্য, প্রথমে আমাদের কম্পিউটারের স্ক্রিনে প্রয়োজনীয় রঙ কিভাবে পাওয়া যায় সেটা বুঝতে হবে।

আসলে স্ক্রিনের একটি আলাদা বিন্দু (পিক্সেল) প্রয়োজনীয় সব রঙে জ্বলতে পারে না, কারণ টেকনিক্যালি এটি খুবই জটিল হবে। স্ক্রিনের প্রতিটি বিন্দু শুধুমাত্র তিনটি রঙে জ্বলতে পারে: লাল, সবুজ এবং নীল। কিন্তু একই সাথে এবং বিভিন্ন অনুপাতে।

এই রঙগুলোকে সংমিশ্রণ করে আমরা যেকোনো প্রয়োজনীয় রঙ পেতে পারি, ঠিক যেমনভাবে চিত্রশিল্পীরা রং দিয়ে করে থাকেন: কয়েকটি রঙ মিশিয়ে তারা আরেকটি নতুন রঙ পায়।

CSS-এ রঙ মিশ্রণের জন্য প্রপার্টির ভ্যালু হিসেবে কীওয়ার্ড rgb নির্ধারণ করতে হবে, যার পরে কমা দিয়ে এই তিনটি বেসিক রঙকে কোন অনুপাতে নিতে হবে সেটা উল্লেখ করতে হবে। রঙগুলো নিজেরা 0 থেকে 255 পর্যন্ত পরিবর্তন হতে পারে। এবং শূন্য হল রঙের অনুপস্থিতি, আর 255 হল খাঁটি রঙ (উদাহরণস্বরূপ, খাঁটি লাল)।

rgb অক্ষরগুলো নিজেরা red, green, blue হিসেবে ব্যাখ্যা করা হয়।

উদাহরণে দেখি।

উদাহরণ

আসুন খাঁটি লাল এবং খাঁটি নীল রঙ মিশ্রিত করি। এর জন্য প্রথম ভ্যালু রাখি 255, দ্বিতীয়টি 0, এবং তৃতীয়টি - 255। আমাদের কাছে বেগুনি রঙ হবে:

html<p>
  লেখা
</p>

cssp {
  color: rgb(255, 0, 255);
}

Результат:

উদাহরণ

আসুন এখন প্রথম ভ্যালু 255 সেট করি, এবং বাকি সব - শূন্যে। ফলস্বরূপ আমরা খাঁটি লাল রঙ পাব:

html<p>
  লেখা
</p>

cssp {
  color: rgb(255, 0, 0);
}

Результат:

উদাহরণ

এভাবে আমরা খাঁটি সবুজ রঙ পাব:

html<p>
  লেখা
</p>

cssp {
  color: rgb(0, 255, 0);
}

Результат:

উদাহরণ

আর যদি সবুজের জন্য 255 না রাখি, বরং 100 রাখি, তাহলে আংশিক সবুজ রঙ হবে:

html<p>
  লেখা
</p>

cssp {
  color: rgb(0, 100, 0);
}

Результат:

উদাহরণ

আসুন তিনটি রঙই স্বেচ্ছাচারী অনুপাতে মিশ্রিত করি। দেখুন, কি হল:

html<p>
  লেখা
</p>

cssp {
  color: rgb(200, 100, 125);
}

Результат:

উদাহরণ

যদি সব ভ্যালু 255 এ সেট করা হয়, তাহলে খাঁটি সাদা রঙ হবে:

cssp {
  color: rgb(255, 255, 255);
}

উদাহরণ

যদি সব ভ্যালু 0 এ সেট করা হয়, তাহলে খাঁটি কালো রঙ হবে:

cssp {
  color: rgb(0, 0, 0);
}

ব্যবহারিক সমস্যা