How to generate a Color palette & Accent color & background color for your next UI design-01.

Jahidul Bin Rafiq
4 min readJul 8, 2022

--

সবাই মোটামুটি কালার থিওরি নিয়ে কথা বলে । কিন্তু কিভাবে নিজের মতো করে কালার Color palette এবং accent কালার রেডি করতে হয় তা নিয়ে বাংলায়
কোন আর্টিকেল খুঁজে পাওয়া যাই না সহজে ।চলেন দেখে নেওয়া যাক কিভাবে Color palette এবং accent কালার প্রস্তুত করতে হয় ।

এই আর্টিকেল এ প্রথম পার্ট এ কীভাবে Color palette প্রস্তুত করতে হয় তা নিয়ে আলোচনা করবো।

এই আর্টিকেল এ দ্বিতীয় পার্ট এ accent কালার কিভাবে প্রস্তুত করতে হয় এবং প্রাইমারি কালার থেকে কিভাবে ব্যাকগ্রাউন্ড কালার বের করা যাই তা নিয়েও আলোচনা করা হবে ।

এই আর্টিকেলটি ভালোভাবে বুঝতে হলে color theory বিষয় আপনার ধারণা থাকতে হবে ।

মূল আলোচনা শুরু আগে tint ,shade ,hue ,tones, saturation, brightness, এই কীওয়ার্ড গুলা মানে কি এবং UI designprimary color কি হবে একটু সংক্ষিপ্ত করে জেনে নেওয়া যাক ।

Hue :cool wheel এর যে কোন কালার এই হচ্ছে Hue । ০ থেকে ৩৬০ ডিগ্রী পর্যন্ত এর ভ্যালু ব্যবহার করা যাই ।

Tint : Tint বলতে বুঝায় কালার এ কতটুকু সাদা যোগ করা হয়েছে ।

Shade : Shade বলতে বুঝায় কালার এ কতটুকু ডার্ক কালার যোগ করা হয়েছে ।

Tones : যদি কোন কালার এর সঙ্গে পর্যাক্রমে grey color যোগ করে যে সমস্ত কালার এর উৎপত্তি হয় তাই tones color।

Saturation : কালার এর পরিমান কে নির্দেশ করে ।০% থেকে ১০০% এর পর্যন্ত ভ্যালু ব্যবহার করা যাই ।

Brightness :কালার এর উজ্জ্বলতা কে বুঝায় ।

UI design এ প্রাইমারি কালার কি হবে তা নিয়ে তা নিয়ে একটা confusion কাজ করে। Primary color বললে মাথায় red ,yellow ,blue এই তিনটা কালার এর নাম প্রথমে আসে ।UI design এর ক্ষেত্রে এই তিনটা কালার হইতে পারে না ও হইতে পারে । UI design এ মূলত প্রাইমারি কালার হলো লোগো কালারটা । যদি অনেকগুলা কালার লোগোতে থাকে তখন dominant color টা বের করতে হবে লোগো থেকে যা আপনারা design এ প্রাইমারি কালার হিসেবে ব্যবহার করা যাবে।

অনেক কথা হয়েছে । এখন মূল কাজ এ যাওয়া যাক ।
আপনি নিচের step by step ফলো করে Color palette প্রস্তুত করতে পারেন।

Color Platte generate steps :

Step 1: Pick the base color or primary color. [Color mode must be HSB format]

HSB means ->hue, saturation, and brightness

Step 2:যেকোন একটা shape নিতে হবে । উক্ত shape এ primary color apply করতে হবে ।

Step 3: উক্ত shape টা ৫বার ডুপ্লিকেট করতে হবে । সর্বমোট shape হবে ৬টা।
সবগুলো shape এ অবশ্যই base color থাকবে ।

এখন এই shape গুলা কে বলা হবে swatches।

Step 4: এখন যেকোন একটা swatch কে main swatch হিসেবে নির্বাচন করতে হবে।

Step 5: এখন main swatch এর বাম এবং ডান এ একটা করে swatches নিতে হবে।saturation এবং brightness মোডিফাই করতে হবে |এইটা অবশ্যই ডার্ক শেড করতে হবে । যাতে কালার এর supportive ডার্ক কালার হিসেবে ব্যবহার করা যাই।

ডার্ক শেড রুলস
Hue মান কোন পরিবতন হবে না ।
আমরা saturation এবং brightness এই দুইটা ব্যালান্স করবো মানে brightness থেকে saturation এর মান বেশি হবে । এবং
base কালার এর একটা আভা থাকবে ।

বাম এর swatch
ডান এর swatch

এখন আমাদের ৩টা swatches রেডি । এখন কাজ করতে হবে বাকি ৩ টা swatches নিয়ে।

Step 6: এখন বাকি ৩ টা swatches মাঝে ২ টা swatches এ পর্যাক্রমে white ,gray color অ্যাড করতে হবে ।

white কালার অ্যাড করার পরে
grey কালার অ্যাড করার পরে

Step 7: এখন বাকি থাকা ১টা swatches এ আমরা আরেকটা ডার্ক tone পাওয়ার জন্য আরো grey কালার অ্যাড করতে হবে ।এমনভাবে ডার্ক tone নিবো যাতে base color এর একটা আভা থাকে

color palette:

এই আর্টিকেল এর দ্বিতীয় পার্ট যেখানে কিভাবে accent color এবং background color ready করা যাই তা নিয়ে আলোচনা করা হয়েছে ………………………………..

🎺🎸 🎻 !!!Happy Learning !!!🎺🎸 🎻….

--

--