ওয়েব ডিজাইন করতে হলে কালার হল একটি অত্যাবশ্যকিয় ব্যাপার। ওয়েব ডিজাইনে বিভিন্ন ধরনের প্রক্রিয়ায় কালার ব্যাবহার করা হয়। এর মাঝে #HexColorCode খুব বেশি ব্যাবহার করা হয়। কিন্তু সমস্যা হলো Hex কালার কোড যত গুলো আছে তা মনে রাখা সম্ভব না। আবার ডিজাইন এর সময় কালার কোড দেখাও একটা ঝামেলার বিষয়। কিন্তু আপনি কি জানেন এই Hex কালার কোড একটি বিশেষ নিয়মে তৈরি। কিছু নিয়ম কানুন জানলে আপনি কোড দেখেই বলে দিতে পারবেন এই কোড টা কেমন কালার ধারন করবে।

আর আজ আমি এই নিয়ম নিয়েই কিছু লিখতে বসেছি।

বিঃদ্রঃ ওয়েব ডিজাইন নিয়ে কোন জ্ঞান না থাকলে আপনি এই পোস্ট এর কিছু বুঝবেন না। যারা শিখতে আগ্রহি তারা একটা লাইন ও মিস করবেন না। করন কিছু না বুঝলে আপনারাই আবার রাগ দেখাবেন(Don’t Mind)

তবে তার আগে আমি ট্রিকবিডি টিম কে একটি ফিচার যোগ করার কথা অনুরোধ করব। সেটা হলো প্রতিটি পোস্টে যদি Add To Favorite আপসন থাকত তাহলে ট্রিকবিডির মেম্বাররা দরকারি বা পছন্দের পোস্ট গুলো নিজেদের Favorite অপসনে যুক্ত করতে পারত। এতে পরে কোন দরকারি পোস্ট খুজতে হতো না।

এবার আসল বিষয়ে আসি।

আপনাকে সবার আগে আটটি কালার এর কোড জানতে হবে সেগুলো হলো

  1. 000000 Black কালো

  2. 0000ff Blue নিল
  3. 00ff00 Green সবুজ
  4. 00ffff Cyan আসমানি
  5. ff0000 Red লাল
  6. ff00ff Magenta বেগুনি

  7. ffff00 Yellow হলুদ
  8. ffffff White সাদা


আপনাকে শুধু এই ৮টি কালার এর কোড মনে রাখতে হবে।
এবার মুল নিয়ম এ আসি। ভালো করে এই কালার এর ছায়া টি লক্ষ করুন

000000
220000
440000
660000
880000
AA0000
CC0000
EE0000

দেখুন এই ছয়াটি কালো থেকে ধিরে ধিরে লাল হয়েছে। আর এটা এক ধরনের নিয়ম এর মাধ্যমেই হয়েছে।

  • Hex কালারের নির্ধারিত ভ্যালু গুলো হচ্ছে 0 থেকে 9 পর্যন্ত, আর A – F পর্যন্ত। এখানে 9 এর পরে 10 নয় A হবে কেননা.. একটি উদাহরন দিলেই বুঝতে পারবেন যেমন #000000 হলো গারো কালো কালার আর #990000 মানে লাল হয়েছে এখন যদি আপনি #100000 দেন তাহলে কোড এর মান কমে যেয়ে কালো হবে ও ডিপ কালার থেকে কালো রং টি কিছুটা হালকা হবে। আর যদি #AA0000 দেন তাহলে আগের থেকে আরো লাল হবে। কারন আগেই বলেছি 9 এর পরে A হবে।
  • কখনো FF এর পরে আর কোন Exm:GG‌ বসাবেন না। সবসময় মনে রাখবেন 0 দিয়ে শুরু হবে 9 এর পরে A এবং সবার শেষে F হয় ও F এর পরে আর কিছু বসবে না।

  • হেক্স কালার কোড এর তিনটা ধাপে ভ্যালু থাকে যেমন #”00″ “ff” “99” এটা আমি এভাবে #0f9 লিখলেও একই কাজ করবে। কিন্তু 6 ডিজিটে লেখা টাই ভালো কারন টিয়াল কালার #008080 এটা 3 ডিজিটে লিখতে অসুবিধায় পরতে হবে।


  • #00FF00
  • উপরের কোড টি ভালো করে দেখুন এটা হলো সবুজ কোড এখন যদি মাঝের FF টির মান কমিয়ে AA দেন তাহলে সবুজ আরো গারো হবে। আবার FFFF00 মানে হলুদ। আপনি যদি 00Ff00 এর সামনের 00 কেটে 99 বা DD দেন তাহলে সবুজ হলুদ হতে থাকবে।
  • FF মানে একদম বেশি DD হলে ভ্যালু কিছুটা কমে গেলো ও 88 মানে আরো কমে গেলো।  ভ্যালু কমালে রং এর গারোত্ব বেশি হবে । এখানে FF0000 লাল কালার এবং ভ্যালু কমিয়ে BB করে দিলে লাল আরো গারো হয়ে যাবে।  আবার মাঝের দুটা 00 মান বাড়িয়ে FF9900 বা FFDD00 করলে ধিরে ধিরে হলুদ হতে থাকবে কারন FFFF00 মানে তো হলুদ। 
  • এখন আপনি নিজের মেধা খাটিয়ে এগুলো নিয়ে একটু চর্চা করুন। 

আসা করি মনোযোগ নিয়ে পরলে বুঝে গেছেন। এবার আপনার জন্য একটি প্রশ্ন যেটার উত্তর কমেন্ট করবেন।

#FDFE00 Hex কোড টি কি কালার ধারন করবে?

সঠিক উত্তর দিলেই বুঝব পোস্ট ভালোভাবে পড়েছেন ।আজকের মতো বিদায়। সময় ক‌ম থাকার কারনে রাতে কমেন্টের রিপলে দিতে পারব না।

21 thoughts on "কালার কোড শিক্ষা এখন কোড দেখেই কি রং বলে দিন"

  1. Shadin Contributor says:
    আপনার প্রশ্নের উত্তর ‘হলুদ’ হবে।
    1. Soyeb Khan Author Post Creator says:
      Yes this is right answer.
    1. Soyeb Khan Author Post Creator says:
      Thanks
    1. Soyeb Khan Author Post Creator says:
      You Welcome
  2. Maruf Contributor says:
    ভাই পোষ্টে যে লেখার আগে {কালো ডট} দিছেন ওইটার কোড টা প্লিজ দিবেন
    1. Soyeb Khan Author Post Creator says:
      <ul>
      <li>
      আপনার লেখা গুলো এখানে থাকবে।
      </li>
      </ul>
      html নিয়ে মানসম্মতো পোষ্ট করব আগামিতে।
    1. Soyeb Khan Author Post Creator says:
      Thanks
    1. Soyeb Khan Author Post Creator says:
      🙂
  3. MD AL-AMIN Contributor says:
    ff00ff nice post bro
  4. MD AL-AMIN Contributor says:
    But koi collors post tho holo na..
    1. Soyeb Khan Author Post Creator says:
      comment e to hobe na.. r apni ki html janen..
    1. Soyeb Khan Author Post Creator says:
      thanks.. ☺
  5. Junayed.hasan Contributor says:

    কালার কোডগুলো কোথায় ব্যাবহার করা যাবে..?

    1. Soyeb Khan Author Post Creator says:
      html code e babohar kora jabe.
  6. Md Sourov Contributor says:
    কিভাবে ব্যবহার করব?
    একটা উদাহরন যদি দিতেন

Leave a Reply