কালার প্যালেট জেনারেটর

একটি ভালো কালার প্যালেট কীভাবে পুরো ডিজাইনের ভার বহন করে

ভুল রং বেছে নিলে মানুষ নাম বলার আগেই সেটা অনুভব করে। একটি পেজ সস্তা মনে হয়, একটি লোগো ঘোলাটে দেখায়, একটি চার্ট শোরগোলে পরিণত হয়। সঠিক রংগুলো বেছে নিলে কাজটা ঠিকঠাক জমে যায়: এটা ইচ্ছাকৃত, শান্ত, স্ক্যান করা সহজ মনে হয়। রং অনেক নীরব কাজ করে, মেজাজ ঠিক করে, চোখকে পথ দেখায়, এবং একজন পাঠককে বলে দেয় কী সবচেয়ে গুরুত্বপূর্ণ। তাই একটি প্যালেট শেষে জুড়ে দেওয়া সাজসজ্জা নয়। এটা একটা সিদ্ধান্ত যা আপনি প্রথম দিকেই নেন, আর প্রায় বাকি সবকিছুই এর উপর নির্ভর করে।

ভালো খবর হলো একটা মজবুত স্কিম পেতে আপনার একটা ফাইন-আর্টস ডিগ্রি লাগবে না। আপনার দরকার কালার থিওরি থেকে কয়েকটা নিয়ম আর ধারণা দ্রুত পরীক্ষা করার একটা উপায়। এজন্যই একটা জেনারেটর কাজে লাগে: এটা আপনাকে একটার জন্য মাথা ঘামাতে যত সময় লাগত তার মধ্যে ডজনখানেক সমন্বয় ঘুরিয়ে দেখতে দেয়।

কালার থিওরি, জার্গন ছাড়া

বেশিরভাগ সুরের উৎপত্তি একটাই সহজ ধারণা থেকে: রংগুলো একে অপরের সাপেক্ষে চাকায় কোথায় বসে আছে। চারটা প্যাটার্ন শিখুন আর আপনি প্রায় যেকোনো স্কিম পড়তে বা বানাতে পারবেন।

• কমপ্লিমেন্টারি একে অপরের ঠিক বিপরীতে থাকা দুটি রং ব্যবহার করে, যেমন নীল আর কমলা। এটা উচ্চ-শক্তির এবং মনোযোগ আকর্ষণে দারুণ, যদিও দুটোরই বেশি ব্যবহারে ফোকাস নিয়ে দ্বন্দ্ব হয়, তাই একটাকে নেতৃত্ব দিতে দিন আর অন্যটাকে অ্যাকসেন্ট হিসেবে ব্যবহার করুন।
• অ্যানালগাস পাশাপাশি বসে থাকা তিনটি রং ব্যবহার করে, যেমন লাল, কমলা, আর হলুদ। এটা কম-কনট্রাস্ট, শান্ত, এবং এমন ধরনের সুর যা প্রকৃতিতে সর্বত্র দেখা যায়। চোখের জন্য আরামদায়ক, কিন্তু হয়তো কোথাও কনট্রাস্ট যোগ করার দরকার হবে যাতে জিনিসগুলো একঘেয়ে না হয়ে যায়।
• ট্রায়াডিক চাকার চারপাশে সমানভাবে ছড়ানো তিনটি রং ব্যবহার করে, যেমন লাল, হলুদ, আর নীল। উজ্জ্বল ও সুষম, এটা সবচেয়ে ভালো কাজ করে যখন একটা রং প্রাধান্য পায় আর বাকি দুটো সহায়ক ভূমিকা পালন করে।
• মনোক্রোম্যাটিক একটা রঙের সাথে লেগে থাকে আর তার উজ্জ্বলতা ও স্যাচুরেশন পরিবর্তন করে। এটা সবচেয়ে ভুলহীন স্কিম, পরিষ্কার এবং সংহত, এবং যখন আর কিছু ঠিক মনে না হয় তখন একটা ভালো ফলব্যাক।

একটা এলোমেলো জেনারেটর অনুপ্রেরণার জন্য মজার, কিন্তু হারমনি মোডগুলোতেই আসল মূল্য থাকে। এগুলো আপনার রংগুলোকে গাণিতিকভাবে সম্পর্কিত রাখে, তাই আপনি কিছু পরিবর্তন করার আগেই সেগুলো একসাথে মানানসই দেখায়।

HEX, RGB, এবং HSL সহজ ভাষায়

আপনার কপি করা প্রতিটা রং কয়েকটা নোটেশনে আসে, আর এগুলো সবই একই জিনিসকে ভিন্নভাবে বর্ণনা করে।

HEX হলো ছয়-অক্ষরের কোড যা আপনি সবচেয়ে বেশি দেখেন, যেমন #3A7BD5। এটা শুধু লাল, সবুজ, এবং নীল একটা স্ট্রিংয়ে ভরা, দুটো অক্ষর করে প্রতিটার জন্য। এটা কমপ্যাক্ট এবং এটাই আপনি CSS বা একটা ডিজাইন টুলে পেস্ট করবেন।

RGB সেই একই তিনটা চ্যানেল ০ থেকে ২৫৫ পর্যন্ত সংখ্যা হিসেবে বানান করে দেয়, যেমন rgb(58, 123, 213)। একই রং, পড়তে বেশি বন্ধুত্বপূর্ণ, আর স্বচ্ছতার জন্য একটা আলফা চ্যানেল দরকার হলে সুবিধাজনক।

HSL রংকে সেভাবে বর্ণনা করে যেভাবে মানুষ আসলে চিন্তা করে: হিউ (কোন রং, চাকার চারপাশে ০ থেকে ৩৬০ ডিগ্রি), স্যাচুরেশন (কতটা প্রাণবন্ত), এবং লাইটনেস (কতটা উজ্জ্বল)। এটা হাত দিয়ে পরিবর্তন করার জন্য সবচেয়ে সহজ ফরম্যাট, কারণ লাইটনেস বা স্যাচুরেশন একটু নাড়ালে ঠিক তাই ঘটে যা আপনি আশা করবেন, কোনো অনুমানের দরকার নেই। ফরম্যাটের মধ্যে চলাফেরার দরকার হলে, একটা দ্রুত HEX থেকে RGB রূপান্তর কাজটা সহজ করে দেয়।

কনট্রাস্ট এবং অ্যাক্সেসিবিলিটি ভুলবেন না

একটা প্যালেট দেখতে অপূর্ব হতে পারে আর তারপরও কেউ তার উপর টেক্সট পড়ার চেষ্টা করার মুহূর্তেই ব্যর্থ হতে পারে। কনট্রাস্ট হলো যেখানে সুন্দর আর ব্যবহারযোগ্য মিলিত হয়। Web Content Accessibility Guidelines একটা স্পষ্ট মানদণ্ড ঠিক করে দেয়: স্বাভাবিক বডি টেক্সটের তার পটভূমির সাথে অন্তত 4.5:1 কনট্রাস্ট অনুপাত থাকা উচিত, আর বড় টেক্সটের অন্তত 3:1। এটা লালফিতার আমলাতন্ত্র নয়, এটা এমন এক পাঠকের পার্থক্য যে আপনার পেজে সহজে চলে যায় আর এমন একজনের যে চোখ কুঁচকে চেষ্টা করে, হাল ছেড়ে দেয়, আর চলে যায়।

ব্যবহারিক পদক্ষেপ হলো আপনার ফোরগ্রাউন্ড ও ব্যাকগ্রাউন্ড জোড়াগুলো তৈরি করার সময় পরীক্ষা করা, পরে নয়। হালকা ধূসর সাদার উপর একটা মকআপে হয়তো মার্জিত দেখাবে আর দিনের আলোতে একটা ফোনে অদৃশ্য হয়ে যাবে। কোনো সমন্বয় ব্যর্থ হলে, সাধারণত আপনার শুধু একটা রংকে গাঢ় বা হালকা করতে হয়, পুরো স্কিমটা ফেলে দিতে হয় না। আপনার উজ্জ্বল অ্যাকসেন্ট রংগুলো বোতাম, লিংক, এবং হাইলাইটের জন্য রাখুন, দীর্ঘ টেক্সটের অংশের জন্য নয়, তাহলে বেশিরভাগ কনট্রাস্ট সমস্যা শুরুতেই এড়িয়ে যাবেন।

একটা ব্যবহারিক ওয়ার্কফ্লো

এখানে একটা প্রবাহ যা প্রজেক্ট জুড়ে টিকে থাকে। যে রংটা নিয়ে নিশ্চিত সেই একটা অ্যাংকার রং দিয়ে শুরু করুন, প্রায়ই একটা ব্র্যান্ড রং বা এমন একটা হিউ যা আপনার চাওয়া মেজাজের সাথে মেলে। সেটা লক করুন, তারপর জেনারেটরকে তার চারপাশে একটা হারমনি তৈরি করতে দিন। কমপ্লিমেন্টারি, অ্যানালগাস, এবং ট্রায়াডিকের মধ্যে ঘুরুন যতক্ষণ না কিছু ঠিক মনে হয়, আর প্রথম পাসে বেশি চিন্তা করবেন না; আপনি একটা দিক খুঁজছেন, চূড়ান্ত উত্তর নয়।

একটা প্রার্থী পাওয়ার পর, ভূমিকা নির্ধারণ করুন। ব্যাকগ্রাউন্ড ও বড় জায়গার জন্য একটা প্রধান রং, গঠনের জন্য একটা মাধ্যমিক, আর ফুটে ওঠা দরকার এমন অংশের জন্য একটা প্রাণবন্ত অ্যাকসেন্ট বেছে নিন। একটা ঢিলেঢালা 60-30-10 ভাগ, প্রধান থেকে মাধ্যমিক থেকে অ্যাকসেন্ট, কঠোর মনে না হয়েই জিনিসগুলোকে সুষম রাখে। তারপর প্রতিটা টেক্সট জোড়ায় কনট্রাস্ট পরীক্ষা করুন, হেক্স কোডগুলো কপি করুন, আর কাজ শেষ। যেগুলো কাজ করেছে সেগুলো সংরক্ষণ করুন, কারণ একটা প্রজেক্টের জন্য আপনি ঠিকঠাক করা একটা প্যালেট প্রায়ই পরেরটার বীজ হয়। যখন আরও তৈরি করতে প্রস্তুত, আমাদের বাকি সব জেনারেটর সংগ্রহ বাকি অংশগুলো সামলাতে পারে।

প্রায়ই জিজ্ঞাসিত প্রশ্ন