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

রঙের প্যালেট জেনারেটর কীভাবে কাজ করে?

এই রঙের প্যালেট জেনারেটর একটি base HEX রঙ থেকে একাধিক harmony palette তৈরি করে। আপনি color picker বা HEX input-এ #RRGGBB মান দিলে টুলটি সেই রঙকে RGB ও HSL-এ বিশ্লেষণ করে, তারপর selected harmony অনুযায়ী নতুন swatch তৈরি করে। Complementary, analogous, triadic, split complementary, tetradic এবং monochrome mode আছে। প্রতিটি swatch-এ HEX ও RGB মান দেখা যায়, swatch-এ ক্লিক করলে HEX কপি হয়, আর Copy All বোতাম সব রঙ comma-separated list হিসেবে দেয়। Copy CSS বোতাম `:root { --color-1: ... }` ধরনের CSS variable output তৈরি করে।

Harmony mode কী বোঝায়?

Complementary mode base hue-এর বিপরীত দিকে প্রায় 180° ঘুরে contrast তৈরি করে। Analogous mode কাছাকাছি hue যেমন ±30° বা ±60° ব্যবহার করে নরম, একই পরিবারের palette দেয়। Triadic mode 120° ব্যবধানে তিনটি রঙ বেছে balance রাখে। Split mode সরাসরি complementary-এর বদলে 150° ও 210° অঞ্চলের রঙ ব্যবহার করে, যাতে contrast থাকে কিন্তু সংঘর্ষ কিছুটা কমে। Tetradic mode 90° ব্যবধানে চার দিকের রঙ দেয়, আর monochrome mode একই hue রেখে lightness 15-75% রেঞ্জে বদলায়।

কোথায় ব্যবহার করবেন?

UI design, dashboard theme, chart color, landing page accent, brand exploration, CSS variable setup বা দ্রুত design mockup-এ এই টুল কার্যকর। Base color হিসেবে brand primary দিলে tool related accent, background, border বা call-to-action রঙের candidate দিতে পারে। HEX input valid না হলে palette update হবে না, তাই #3B82F6-এর মতো ছয় অক্ষরের HEX format ব্যবহার করুন। Side panel base color-এর HEX, RGB এবং HSL দেখায়, যা designer ও developer-এর মধ্যে handoff সহজ করে।

সতর্কতা ও ভালো অভ্যাস

Color harmony সুন্দর palette প্রস্তাব করে, কিন্তু accessibility নিশ্চিত করে না। Text ও background-এর contrast WCAG অনুযায়ী যাচাই করা দরকার, বিশেষ করে ছোট text, button label, error state বা chart legend-এ। Monochrome palette দেখতে পরিষ্কার হলেও তথ্য আলাদা করতে শুধু রঙের ওপর নির্ভর করবেন না; icon, label বা pattern ব্যবহার করুন। Brand color খুব saturated হলে generated palette চোখে চাপ ফেলতে পারে, তাই lightness ও saturation ম্যানুয়ালি adjust করা ভালো। CSS variables copy করলে নামগুলো generic `--color-1` আকারে আসে; production code-এ `--color-primary`, `--color-accent`, `--color-surface` ধরনের semantic নাম দেওয়া বেশি maintainable। দ্রুত যাচাই করতে swatch copy করে browser dev tools, Figma বা CSS file-এ বসিয়ে real component-এ পরীক্ষা করুন।

প্রায়োগিক workflow-তে base color বেছে প্রথমে complementary বা analogous palette দেখে নিন, তারপর real UI component-এ swatch বসিয়ে পরীক্ষা করুন। Chart বা status color বানালে success, warning, error এবং neutral state আলাদা রাখুন। একই hue-এর খুব কাছাকাছি shade data visualization-এ বিভ্রান্তি তৈরি করতে পারে। HSL মান দেখে saturation বা lightness পরিবর্তন করলে brand feel বজায় রেখে readable variant বানানো সহজ হয়।