রঙ দেখতে সুন্দর লাগাটাই কালার থিওরির লক্ষ্য নয়, সঠিক মেসেজ সঠিক মানুষের কাছে পৌঁছে দেওয়াটাই আসল কাজ।
অনেক নতুন designer আছেন যারা color নিয়ে anxiety তে ভোগেন। কোন রঙ সাথে কোন রঙ যাবে? Primary color কোনটা রাখব? Background কি সাদা হবে না অন্য কিছু?
এই anxiety র মূল কারণ হলো color theory টাকে অনেক abstract মনে হয়। কিন্তু UI design এর জন্য মাত্র ৪টি নিয়ম জানলেই ৮০% সিদ্ধান্ত নেওয়া যায়।
নিয়ম ১, ৬০-৩০-১০ Rule
যেকোনো ভালো design এ তিনটি রঙের অনুপাত থাকে: ৬০% dominant color (সাধারণত background), ৩০% secondary color (cards, panels), এবং ১০% accent color (buttons, links, highlights)।
এই rule টা follow করলে design এ visual chaos থাকে না। Accent color সবচেয়ে কম থাকে বলে সেটা বেশি চোখে পড়ে, যেটাই আপনি user কে দেখাতে চান সেখানে ব্যবহার করুন।
চেষ্টা করুন: আপনার পছন্দের যেকোনো ভালো website খুলুন এবং ৬০-৩০-১০ rule খুঁজে বের করুন। প্রায় সব ভালো design এ এটা পাবেন।
নিয়ম ২, Contrast এর জন্য Lightness ব্যবহার করুন, Hue নয়
অনেকে মনে করেন text readable করতে সম্পূর্ণ আলাদা রঙ ব্যবহার করতে হবে। আসলে একই hue এর dark এবং light shade ব্যবহার করলেই কাজ হয়।
WCAG accessibility standard অনুযায়ী body text এর contrast ratio কমপক্ষে ৪.৫:১ হওয়া দরকার। Figma তে plugin আছে, "Contrast" নামে search করুন। Design করতে করতেই check করুন।
সাদা background এ pure black (#000000) ব্যবহার না করে slightly softer dark (#1A1A1A বা #111827) ব্যবহার করুন, contrast ঠিক থাকবে কিন্তু দেখতে harsh লাগবে না।
নিয়ম ৩, Semantic Color মানুন
কিছু রঙের universal meaning আছে যা user expect করে:
- সবুজ: Success, confirmation, positive action
- লাল: Error, danger, destructive action
- হলুদ/কমলা: Warning, caution
- নীল: Information, link, primary action
এই convention ভাঙলে user confuse হয়। Delete button সবুজ করবেন না, success message লাল করবেন না, এমনকি design টা সুন্দর দেখালেও না।
নিয়ম ৪, Color Palette তৈরিতে HSL ব্যবহার করুন
Hex code দিয়ে color ভাবলে কোনটা dark, কোনটা light বোঝা কঠিন। HSL (Hue, Saturation, Lightness) মোডে কাজ করলে সহজ হয়।
একটা brand color বেছে নিন। তারপর একই Hue রেখে Lightness পরিবর্তন করে ৫–৯টি shade বানান, ৯০% lightness মানে প্রায় সাদা (background এর জন্য), ২০% lightness মানে প্রায় কালো (dark text এর জন্য)।
এই system টা follow করলে আপনার পুরো palette harmonious থাকবে কারণ সব shade একই hue family এর।
Dark Mode এ Color কীভাবে কাজ করে
Dark mode এ শুধু background কালো করলেই হয় না। কয়েকটি বিষয় মাথায় রাখুন:
Pure black background এড়িয়ে চলুন, #121212 বা #1C1C1E ব্যবহার করুন। Saturation কমান, bright colors dark background এ অনেক বেশি vibrant দেখায়, চোখে strain করে। Shadow এর বদলে border বা subtle overlay ব্যবহার করুন কারণ shadow dark mode এ কাজ করে না।
Color theory complex মনে হলেও এই ৪টি নিয়ম দিয়ে শুরু করুন। Practice করতে করতে instinct develop হবে, এবং একদিন দেখবেন কোনো নিয়ম না মেনেও ভালো decision নিচ্ছেন।