HTML Hex, RGB এবং RGBA Color Code যেভাবে কাজ করে।

:art: HTML Hex Color Code (#RRGGBB) কিভাবে কাজ করে এবং পরিবর্তন করে তা সহজভাবে বুঝুন

Hexadecimal (Hex) কালার কোড হলো এমন একটি সিস্টেম যা Red, Green, এবং Blue তিনটি প্রাথমিক রঙের মিশ্রণে কাজ করে। প্রতিটি অংশের মান আলাদা আলাদা থাকে এবং এই তিনটি মিলে একটি নির্দিষ্ট রঙ তৈরি করে।
Hexadecimal কোডটি দেখতে হয় এইরকম:
#RRGGBB

এখানে:

  • RR: Red (লাল রঙের মাত্রা)
  • GG: Green (সবুজ রঙের মাত্রা)
  • BB: Blue (নীল রঙের মাত্রা)

১. কীভাবে রঙের মান নির্ধারণ হয়?

Hexadecimal (Hex) মান হলো ১৬-এর ভিত্তিতে গণনা করা সংখ্যা। এটি ০ থেকে ৯ এবং তারপর A থেকে F পর্যন্ত মোট ১৬টি ভ্যালু ব্যবহার করে। ০ হচ্ছে প্রথম ডিজিট এবং F হচ্ছে শেষ ডিজিট।
:point_right: উদাহরণ:

  • 00 = সর্বনিম্ন মান (কোনও রঙ নেই)।
  • FF = সর্বোচ্চ মান (পূর্ণ উজ্জ্বল রঙ)।

২. প্রতিটি অংশের মান কিভাবে কাজ করে?

a. লাল (Red - RR)

  • 00 মানে লাল রঙ নাই।
  • FF মানে লাল সম্পূর্ণ উজ্জ্বল।
    :point_right: উদাহরণ:
    শুধুমাত্র লাল রঙ পেতে হলে RR এর সর্বোচ্চ উজ্জলতা ইউজ করে অন্যান্য গুলো নাই করে দিলেই হয়ে যাবে। ( RR=FF, GG = 00 এবং BB = 00 )।
    #FF0000

b. সবুজ (Green - GG)

  • 00 মানে সবুজ রঙ নাই।
  • FF মানে সবুজ সম্পূর্ণ উজ্জ্বল।
    :point_right: উদাহরণ:
    শুধুমাত্র সবুজ রঙ পেতে হলে GG এর সর্বোচ্চ উজ্জলতা ইউজ করে অন্যান্য গুলো শূণ্য করে দিলেই হয়ে যাবে। ( RR=00, GG = FF এবং BB = 00 )।
    #00FF00

c. নীল (Blue - BB)

  • 00 মানে নীল সম্পূর্ণ অনুজ্জ্বল নাই বললেই চলে।
  • FF মানে নীল সম্পূর্ণ উজ্জ্বল।
    :point_right: উদাহরণ:
    শুধুমাত্র নীল বা ব্লু রঙ পেতে হলে BB এর সর্বোচ্চ উজ্জলতা ইউজ করে অন্যান্য গুলো জিরো করে দিলেই হয়ে যাবে। ( RR=00, GG= 00 এবং BB = FF )।
    #0000FF

৩. মিশ্রণের মাধ্যমে নতুন রঙ তৈরি করুন

Hexadecimal কোডে রঙের তিনটি মান মিশ্রিত করে নতুন রঙ তৈরি করা যায়।
:point_right: উদাহরণ:
:one: লাল এবং সবুজ এর মাধ্যমে গাঢ় হলুদ পাওয়া যাবে:
#FFFF00

  • Red = FF (পূর্ণ উজ্জ্বল)।
  • Green = FF (পূর্ণ উজ্জ্বল)।
  • Blue = 00 (নীল রঙ অনুপস্থিত)।

:two: সবুজ ও নীল রঙের মাধ্যমে গাঢ় সায়ান (Cyan) রঙ পাওয়া যাবে:
#00FFFF

  • Red = 00 (লাল রঙ অনুপস্থিত)।
  • Green = FF (পূর্ণ উজ্জ্বল)।
  • Blue = FF (পূর্ণ উজ্জ্বল)।

:three: লাল ও নীল রঙের মিশ্রনে গাঢ় ম্যাজেন্টা রঙ পাওয়া যাবে:
#FF00FF

  • Red = FF (পূর্ণ উজ্জ্বল)।
  • Green = 00 (সবুজ রঙ অনুপস্থিত)।
  • Blue = FF (পূর্ণ উজ্জ্বল)।

৪. ধাপে ধাপে একটি রঙ তৈরি করার উদাহরণ

Step 1: সম্পূর্ণ কালো (Black)
#000000

  • Red = 00
  • Green = 00
  • Blue = 00
    (সব রঙ বন্ধ, এটি কালো তৈরি করে।)

Step 2: ধীরে ধীরে লাল বৃদ্ধি করুন
#330000

  • Red = 33
  • Green = 00
  • Blue = 00
    (লাল হালকা যুক্ত হলো।)

Step 3: আরও উজ্জ্বল লাল তৈরি করুন
#FF0000

  • Red = FF
  • Green = 00
  • Blue = 00
    (পূর্ণ লাল রঙ তৈরি হলো।)

Step 4: লাল ও নীল মিশিয়ে বেগুনি তৈরি করুন
#FF00FF

  • Red = FF
  • Green = 00
  • Blue = FF

এভাবে পরিবর্তন করে দেখবেন অনেক সুন্দর সুন্দর হালকা লাল রঙ পাবেন। যেটি ওয়েবসাইটে ইউজ করলে খুব বেশি চোখে লাগবে না। ভিজিটররা অনেক অনেক সময় নিয়ে ওয়েবসাইট ভিজিট করতে পারবেন।
:point_right: ট্রাই করুন বেশি বেশি! :star2:



:art: RGB এবং RGBA কালার যেভাবে কাজ করে
RGB এবং RGBA হলো রঙ তৈরি করার পদ্ধতি যেখানে Red (লাল), Green (সবুজ), এবং Blue (নীল) এর মিশ্রণে কাজ করা হয়। RGBA তে A (Alpha) যোগ হয়, যা রঙের স্বচ্ছতা নিয়ন্ত্রণ করে। প্রথমে RGB নিয়ে আলোচনা করা যাক।
:point_right: সিনট্যাক্স:
rgb(R, G, B)

  • R (Red): লাল রঙের মান।
  • G (Green): সবুজ রঙের মান।
  • B (Blue): নীল রঙের মান।

:point_right: উদাহরণ:

  • rgb(255, 0, 0) → লাল
  • rgb(0, 255, 0) → সবুজ
  • rgb(0, 0, 255) → নীল
  • rgb(0, 0, 0) → কালো
  • rgb(255, 255, 255) → সাদা

১. RGB রঙ যেভাবে তৈরি হয়

RGB-তে তিনটি রঙের মান ০ থেকে ২৫৫ এর মধ্যে থাকে।

  • ০: সর্বনিম্ন উজ্জ্বলতা (কোনও আলো নেই)
  • ২৫৫: সর্বোচ্চ উজ্জ্বলতা (পূর্ণ আলো বা গাঢ় রঙ)

অর্থাৎ ০ তে কোন রঙ পাওয়া যায়না। ০ থেকে যত মান বৃদ্ধি পায় তত রঙের উজ্জ্বলতা বৃদ্ধি পায়। এভাবে ধীরে ধীরে মান বাড়িয়ে বা কমিয়ে রঙের উজ্জ্বলতা পরিবর্তন করা যায়। ২৫৫ তে সর্বোচ্চ গাঢ় রঙ পাওয়া যায়। অর্থাৎ প্রতিটি রঙের গাঢ়ত্বকে হ্রাস-বৃদ্ধি করার জন্য ২৫৬টি স্টেপ পাওয়া যায়। Red, Green, Blue (RGB) এই তিনটি রঙের সংমিশ্রমে সর্বমোট ২৫৬ X ২৫৬ X ২৫৬ = ১৬,৭৭৭,২১৬ টি রঙ তৈরি করা সম্ভব।

২. RGBA যেভাবে কাজ করে

RGBA হলো RGB-এর সাথে A (Alpha) যুক্ত করা যা রঙের স্বচ্ছতা বা Opacity নির্ধারণ করে। রিয়েল লাইফে এই Opacity এর ব্যবহার অনেক। এটি ওয়েবসাইট এর সৌন্দর্য অনেক অনেক বৃদ্ধি করে।
:point_right: সিনট্যাক্স:
rgba(R, G, B, A)

  • A: স্বচ্ছতার মান ০ থেকে ১ পর্যন্ত হয়ে থাকে।
    • ০ হলে পুরো স্বচ্ছ এবং
    • ১ হলে পুরো অস্বচ্ছ অর্থাৎ গাঢ় পিওর কালার পাওয়া যায়।

:point_right: উদাহরণ:

  • rgba(255, 0, 0, 1) → সম্পূর্ণ গাঢ় লাল(অস্বচ্ছ লাল)।
  • rgba(255, 0, 0, 0.5) → অর্ধস্বচ্ছ লাল।
  • rgba(255, 0, 0, 0.3) → আরো স্বচ্ছ লাল।
  • rgba(255, 0, 0, 0) → পুরো স্বচ্ছ লাল।

৩. রঙের মিশ্রণ

  • rgb(255, 255, 0) → হলুদ (লাল + সবুজ)
  • rgb(255, 0, 255) → ম্যাজেন্টা (লাল + নীল)
  • rgb(0, 255, 255) → সায়ান (সবুজ + নীল)

৪. বাস্তব উদাহরণ

ব্যাকগ্রাউন্ডে হালকা কালার:

background-color: rgba(0, 0, 0, 0.1); /* হালকা কালো */
👉 **ট্রাই করুন নিজের মতো করে!** 💡

অল্প কিছু অ্যাডভান্স আলোচনা রইলো আপনাদের জন্য

৫. RGB সিস্টেমে মান ০ থেকে ২৫৫ কেন?

RGB সিস্টেমে ০ থেকে ২৫৫ ব্যবহার করার পেছনে একটি টেকনিক্যাল কারণ আছে, যা কম্পিউটার ডেটা প্রসেসিংয়ের সাথে সম্পর্কিত।

৬. কম্পিউটারের বাইনারি সিস্টেম

কম্পিউটার, তথ্য সংরক্ষণ ও প্রক্রিয়া করার জন্য বাইনারি সিস্টেম (০ এবং ১) ব্যবহার করে।
এক বাইট (byte) মানে ৮ বিট (bit)।
৮ বিটে মোট 2⁸ = 256 টি ভ্যালু রাখা যায়।
এই ভ্যালু ০ থেকে ২৫৫টি পর্যন্ত গণনা করতে পারে। ০ সহ ২৫৬টি হয়।

৭. রঙের জন্য ৮ বিট বরাদ্দ

RGB সিস্টেমে প্রতিটি রঙের জন্য (Red, Green, Blue) ৮ বিট বরাদ্দ করা হয়।

  • লাল রঙের জন্য ৮ বিট → ০ থেকে ২৫৫।
  • সবুজ রঙের জন্য ৮ বিট → ০ থেকে ২৫৫।
  • নীল রঙের জন্য ৮ বিট → ০ থেকে ২৫৫।

এভাবে তিনটি রঙের মিশ্রণ দিয়ে প্রায় ২৫৬³ = ১৬,৭৭৭,২১৬ টি রঙ তৈরি করা সম্ভব।

আজকে এই পর্যন্তই। অন্য কোন একদিন অন্য কিছু নিয়ে আলোচনা করার চেস্টা করবো। সবাই ভালো থাকবেন। :blush:

6 Likes

Very detailed explained. Nice post. :+1:

1 Like

great post i think. detailed explanation.

মাশাআল্লাহ, ভাই।
it was so helpful.