রঙ করা শিখুন (Learn To Color)
কম্পিউটার, মোবাইল, টেবলেট, টিভি ইত্যাদী যাহাই বলুন সকল ডিভাইস গুলোতে টেক্সট ছবি ভিডিও সব কিছুই দেখানো হয় RGB রঙের সংমিশ্রণের মাধ্যমে। লাল সবুজ এবং নীল এই তিন রঙের সংমিশ্রণে প্রায় ১৬.৮ মিলিয়ন রঙ্গের সৃষ্টি হয়। এবং এই রঙ গুলোই মূলত সকল ডিভাইস গুলোর আউটপুট দিয়ে থাকে। এইচটিএমএল এর সাথে সিএসএস ব্যবহার করার জন্য রঙ গুলোকে কিছু কোড নাম্বারের মাধ্যমে নিয়ে আসা হয়েছে। Hexadecimal নাম্বারের শুরুতে # চিহৃ বসিয়ে হেস কোড হিসেবে ব্যবহার করা হয়। এবং decimal নাম্বারের শুরুতে rgb বসিয়ে নাম্বার গুলোকে ফাষ্ট ব্রেকেটের ভিতরে নিয়ে RGB কালার কোড হিসেবে ব্যবহার করা হয়। এখন কথা হচ্ছে কোন্ নাম্বার থেকে কোন্ রংটি আসতে পারে সেটা কিভাবে বুঝব!
আসলে এই বিষয়টি বুঝাতে গেলে অনেক গুলো বিষয় নিয়ে আসতে হবে। যেমন RGB রঙের সংমিশ্রণে ডিভাইস গুলো কিভাবে তাদের আউটপুট দেয়! আমরা জানি, কম্পিউটার সহ সকল ডিভাইসের ভাষা হচ্ছে বাইনারী। বাইনারী ছাড়া অন্য কোন ভাষা কম্পিউটার সিষ্টেম বুঝে না। তাহলে আমরা যা কিছু ইনপুট দিচ্ছি, সেটা কোড হোক কিংবা সাধারণ টেক্সট হোক, ইংরেজী হোক অথবা বাংলা, অডিও হোক কিংবা ভিডিও, কম্পিউটার এগুলি কিভাবে বুঝে নিতে পারে! এবং কিভাবে আউটপুট দেয় ইত্যাদী ইত্যাদী। আসলে সকল বিষয় আমি বুঝাতে চাচ্ছি কিন্তু কিভাবে বুঝালে নতুনদের বুঝতে সুবিদা হবে সেটা মাথায় আসছে না। তবুও চেষ্টা করছি। বিস্তারিত বুঝতে অসুবিদা হলে ভিডিও টিউটোরিয়ালটি দেখুন।
প্রথমে কম্পিউটার সিষ্টেমের মূল যে ভাষা অর্থাৎ কম্পিটারের মাতৃভাষা নিয়ে কিছু কথা বলি। কম্পিউটার সিষ্টেমের ভাষা হচ্ছে বাইনারী। আর এই বাইনারী ভাষাটা শুধুমাত্র দু'টো সংখ্যা দিয়ে গঠিত। 0 এবং 1 শুন্য এবং এক। 0 মানে অফ আর 1 মানে অন। রঙের ক্ষেত্রে ধরে নিতে পারি 0 মানে লাইট অফ এবং 1 মানে লাইট অন। 0 মানে সব কিছু অন্ধকার বা কালো। আর 1 মানে সব কিছু আলোকিত বা সাদা। আপনি নিশ্চয় রংধনু দেখেছেন! যেখানে ক্ষুদ্র ক্ষুদ্র জলরাশির মধ্য সূর্যের সাত রঙ ভেসে উঠে। ঠিক এমনই কম্পিউটার স্ক্রীনের ব্যাকগ্রাউন্ডটা সাজানো থাকে হাজার হাজার ক্ষুদ্র ক্ষুদ্র পিক্সেল দিয়ে। এবং প্রতিটি পিক্সেলের সংগে লাগানো থাকে RGB কালারের লেজার লাইট। ডিভাইস গুলোতে আমরা যা কিছু ইনপুট দিচ্ছি সব কিছুই বাইনারী ভাষায় কনভার্ট হয়ে কম্পিউটারের কাছে যায়। কম্পিউটার সব কিছু আবার বাইনারীতে আউটপুট দেয়। মাঝখানে থাকে দুভাষী। যার কাজ হচ্ছে আমাদের ইনপুট করা কর্ম গুলোকে বাইনারীতে কনভার্ট করে কম্পিউটারকে দেওয়া এবং কম্পিটার যা কিছু আউটপুট দেই সেগুলোকে আমাদের ভাষায় কনভার্ট করে আমাদের কাছে ফিরিয়ে দেওয়া।
এভাবেই আমরা যখন কোন একটি কালার কোড লিখি সেই নাম্বারটি বাইনারীতে রূপান্তর হয়ে কম্পিটারের কাছে যায়। কোড যদি হয় #000000 তাহলে বাইনারি হবে 0 সুতারাং সব লাইট অপ অর্থাৎ রঙ হবে কালো। আর কোড যদি হয় #FFFFFF বাইনারি হবে 111111111111111111111111 সুতারাং সব লাইট অন অর্থাৎ রঙ হবে সাদা। রঙ কালো হোক, সাদা হোক অথবা অন্য কালার হোক সব কিছুর পেছনে RGB লেজার লাইটের মাধ্যমে মিক্স হয়ে আউটপুট দিয়ে থাকে। আমাদের সবার ঘরে ফ্যান আছে নিশ্চয়। বাতাস কম বেশি করার জন্য একটা কন্ট্রোলার আছে। ঠিক তেমনি কন্ট্রোলারের মাধমে RGB লাইটের পাওয়ার বাড়ানো কমানোর ব্যবস্থা কম্পিউটার সিষ্টেমে রয়েছে। যাকে পার্সেন্টিস হিসেবে ধরা হয়। নিচে কয়েকটি উদাহরণ দেখালাম যেখানে ঘাঢ় রঙ থেকে হাল্কা রঙের দিকে যেতে যেতে ১০০% হাল্কা হয়ে সাদা হয়েছে। প্রতিটি রঙের # কোড এবং লাইটের পার্সেন্টিস দেখানো হল। রঙ্গের সাথে কোড এবং পার্সেন্টিস খেয়াল করলে কোন্ কোড থেকে সাম্ভাব্য কোন্ কালার আসতে পারে আইডিয়াটা পেতে পারেন।
RGB কালার থিওরি

উপরের ছবিটি ভাল করে দেখুন। লাল সবুজ এবং নীল তিনটি কালার যেখানে গিয়ে মিলেছে সে অংশটি সাদা হয়ে গেছে। লাল আর সবুজ এক হয়ে হলুদ হয়েছে। নীল আর লাল মিলে হয়েছে মাজেন্টা। সবুজ আর নীল মিলে হয়েছে নীলাভ সবুজ। এভাবেই লাল সবুজ এবং নীল এই তিন রঙের সংমিশ্রণে আমরা ১৬.৮ মিলিয়ন রং তৈরী হয়। এবং এই রঙ গুলোর মাধ্যমে কম্পিউটার মোবাইল টিভি ইত্যাদী সকল ডিভাইস তাদের আউটপুট দিতে পারে। এই রং গুলোকেই # কোড rgb কোড অথবা hsl কোড ব্যবহার করে আমরা আমাদের ওয়েবসাইট, প্লাগিন, সফটওয়্যার ইত্যাদীতে রঙ দিয়ে থাকি। উপরোক্ত ছবিতে যে সকল কালার দেখা যাছে আসুন সেই কালার গুলোর কোড দেখে নিই।
RGB মিক্সিং লাইট
Red | + | Green | = | Yellow |
Green | + | Blue | = | Cyan |
Blue | + | Red | = | Magenta |
Red | + | Green | + | Blue | = | White |
রঙ গুলোর নাম এবং কোড
Colors Name | Hex Code | RGB Code | HSL Code | Colors |
Red | #ff0000 | rgb(255, 0, 0) | hsl(0, 100%, 50%) | |
Green | #00ff00 | rgb(0, 255, 0) | hsl(120, 100%, 50%) | |
Blue | #0000ff | rgb(0, 0, 255) | hsl(240, 100%, 50%) | |
White | #ffffff | rgb(255, 255, 255) | hsl(0, 0%, 100%) | |
Yellow | #ffff00 | rgb(255, 255, 0) | hsl(60, 100%, 50%) | |
Cyan | #00ffff | rgb(0, 255, 255) | hsl(180, 100%, 50%) | |
Magenta | #ff00ff | rgb(255, 0, 255) | hsl(300, 100%, 50%) |
সাদা কালো মিক্স
Hex | #000000 | #0d0d0d | #1a1a1a | #262626 | #333333 | #404040 | #4d4d4d | #595959 | #666666 | #737373 | #808080 | #8c8c8c | #999999 | #a6a6a6 | #b3b3b3 | #bfbfbf | #cccccc | #d9d9d9 | #e6e6e6 | #f2f2f2 | #ffffff |
Colors | |||||||||||||||||||||
Lighter | 0% | 5% | 10% | 15% | 20% | 25% | 30% | 35% | 40% | 45% | 50% | 55% | 60% | 65% | 70% | 75% | 80% | 85% | 90% | 95% | 100% |
লাল কালো মিক্স
Hex | #000000 | #1a0000 | #330000 | #4d0000 | #660000 | #800000 | #990000 | #b30000 | #cc0000 | #e60000 | #ff0000 | #ff1a1a | #ff3333 | #ff4d4d | #ff6666 | #ff8080 | #ff9999 | #ffb3b3 | #ffcccc | #ffe6e6 | #ffffff |
Colors | |||||||||||||||||||||
Lighter | 0% | 5% | 10% | 15% | 20% | 25% | 30% | 35% | 40% | 45% | 50% | 55% | 60% | 65% | 70% | 75% | 80% | 85% | 90% | 95% | 100% |
কালো সবুজ মিক্স
Hex | #000000 | #001a00 | #003300 | #004d00 | #006600 | #008000 | #009900 | #00b300 | #00cc00 | #00e600 | #00ff00 | #1aff1a | #33ff33 | #4dff4d | #66ff66 | #80ff80 | #99ff99 | #b3ffb3 | #ccffcc | #e6ffe6 | #ffffff |
Colors | |||||||||||||||||||||
Lighter | 0% | 5% | 10% | 15% | 20% | 25% | 30% | 35% | 40% | 45% | 50% | 55% | 60% | 65% | 70% | 75% | 80% | 85% | 90% | 95% | 100% |
নীল কালো মিক্স
Hex | #000000 | #00001a | #000033 | #00004d | #000066 | #000080 | #000099 | #0000b3 | #0000cc | #0000e6 | #0000ff | #1a1aff | #3333ff | #4d4dff | #6666ff | #8080ff | #9999ff | #b3b3ff | #ccccff | #e6e6ff | #ffffff |
Colors | |||||||||||||||||||||
Lighter | 0% | 5% | 10% | 15% | 20% | 25% | 30% | 35% | 40% | 45% | 50% | 55% | 60% | 65% | 70% | 75% | 80% | 85% | 90% | 95% | 100% |
লাল নীল মিক্স
Hex | #0000ff | #0d00f2 | #1900e6 | #2600d9 | #3300cc | #4000bf | #4d00b2 | #5900a6 | #660099 | #73008c | #800080 | #8c0073 | #990066 | #a60059 | #b2004c | #bf0040 | #cc0033 | #d90026 | #e6001a | #f2000d | #ff0000 |
Colors |
লাল সবুজ মিক্স
Hex | #ff0000 | #f20d00 | #e61900 | #d92600 | #cc3300 | #bf4000 | #b24d00 | #a65900 | #996600 | #8c7300 | #808000 | #738c00 | #669900 | #59a600 | #4cb200 | #40bf00 | #33cc00 | #26d900 | #1ae600 | #0df200 | #00ff00 |
Colors |
নীল সবুজ মিক্স
Hex | #00ff00 | #00f20d | #00e619 | #00d926 | #00cc33 | #00bf40 | #00b24d | #00a659 | #009966 | #008c73 | #008080 | #00738c | #006699 | #0059a6 | #004cb2 | #0040bf | #0033cc | #0026d9 | #001ae6 | #000df2 | #0000ff |
Colors |
Keep Your Ads Here...
ঐতিহাসিক কালার থিওরি

এইচটিএমএল আইকন

ওয়েবের যত ফন্টস

সিএসএস এনিমেশন

হরেক রকম মেনু

রকমারি বাটন
