কালার থিউরি কি? এটা ব্যবহার করবেন কিভাবে!

ওয়েব ডিজাইন এর জন্য ডিজাইন এবং কালার থিওরি সম্পর্কে শিখতে হলে নিম্নলিখিত ধাপগুলো অনুসরণ করতে হবে:

1. বেসিক ডিজাইন এবং কালার থিওরি শেখা:

ওয়েব ডিজাইন শিখার প্রথম ধাপ হল বেসিক ডিজাইন এবং কালার থিওরি শিখা। এটি ওয়েব ডিজাইন এর মৌলিক দক্ষতা যা নিয়ে কাজ করা হয়। আপনাকে বেসিক ডিজাইন স্টাইল, লেআউট এবং কালার থিওরি সম্পর্কে জানতে হবে।

2. ওয়েব ডিজাইন টুল শেখা:

ওয়েব ডিজাইন টুল হল একটি সফটওয়্যার যা আপনাকে একটি স্ট্রাকচারভিত্তিক ওয়েব পৃষ্ঠা তৈরি করতে সাহায্য করে। বেশ কিছু ওয়েব ডিজাইন টুল রয়েছে যেমন Adobe Photoshop, Sketch, Figma এবং অন্যান্য।

3. বেস্ট প্র্যাকটিস শেখা:

ওয়েব ডিজাইন এর জন্য সবচেয়ে ভাল প্র্যাকটিস হল অন্যদের কাজ দেখা এবং প্রয়োগ করা।

সবচেয়ে প্রাথমিক কালার থিওরি হল রঙ কোডিং। আমরা এই কোডিং ব্যবহার করে হেক্সাডেসিমাল ফর্ম্যাটে রঙ নির্দেশ করতে পারি।

color: #RRGGBB;

এখানে `RR` হল রেড কোড, `GG` হল গ্রীন কোড এবং `BB` হল ব্লু কোড। প্রতিটি কোড একটি হেক্সাডেসিমাল সংখ্যা যা 00 থেকে FF এর মধ্যে থাকে। উদাহরণস্বরূপ,

যদি আমরা একটি লাল রঙ নির্দেশ করতে চাই তবে আমাদের কোড হবে:

color: #FF0000;

একইভাবে, আমরা একটি নীল রঙ নির্দেশ করতে চাইলে আমাদের কোড হবে:

color: #0000FF

এছাড়াও, আমরা গ্রেডিয়েন্ট রঙ তৈরি করার জন্য কোডিং ব্যবহার করতে পারি। উদাহরণস্বরূপ, আমরা সবুজ থেকে নীল গ্রেডিয়েন্ট তৈরি করতে পারি:

background: linear-gradient(to bottom, #00FF00, #0000FF);

এখানে, `to bottom` এর মাধ্যমে আমরা বুঝাচ্ছি যে গ্রেডিয়েন্ট নীচে হতে থাকবে। #00FF00 হল সবুজ।

কালার থিউরি ব্যবহার করবেন কিভাবে!


কালার থিওরি কোডিং করার জন্য আপনাকে CSS জানতে হবে। CSS দিয়ে আপনি পাতার এলিমেন্টগুলোর রঙ পরিবর্তন করতে পারেন।

একটি সিম্পল CSS কোড নিচে দেওয়া হলো যেখানে আপনি একটি পারাগ্রাফের রঙ হয়ে যাবে লাল কালারে

p {
  color: red;
}

এখানে `p` হলো এলিমেন্ট নির্দেশ করে যা পারাগ্রাফ এলিমেন্ট এর জন্য ব্যবহৃত হয়েছে। `color` হলো সম্পর্কিত প্রপার্টি যা পারাগ্রাফ এলিমেন্ট এর রঙ পরিবর্তন করে দিবে এবং `red` হলো নির্দিষ্ট রঙ।

এছাড়াও, আপনি প্রিফার করলে ইনলাইন CSS ব্যবহার করতে পারেন যেখানে আপনি আলাদা করে সংশ্লিষ্ট এলিমেন্টের জন্য রঙ নির্দিষ্ট করতে পারেন।

উদাহরণস্বরূপ নিচে একটি পারাগ্রাফ এলিমেন্টের রঙ হচ্ছে লাল:

<p style="color:red;">একটি লাল পারাগ্রাফ</p>