এই টুল কী করে
হুইল কীভাবে কাজ করে
প্যালেট টাইপ কীভাবে ক্যালকুলেট হয়
ফিচারগুলো কীভাবে কাজ করে
ড্র্যাগ করা যায় এমন হুইল পিকার
হুইলের মার্কারটা টেনে নিয়ে hue আর saturation লাইভ বদলাতে পারবে। প্রতিবার নড়ানোর সাথে সাথে প্যালেটও রিক্যালকুলেট হয়ে যায়, ফাইনাল করার আগেই কম্বিনেশন কেমন দেখাচ্ছে সেটা দেখা যায়।
Validation সহ Hex input
সরাসরি hex কোড টাইপ বা পেস্ট করা যায় (3 অথবা 6 ডিজিট, # সহ বা ছাড়া)। ভুল ভ্যালু দিলে সাথে সাথে error দেখিয়ে দেয়, চুপচাপ fail করে না।
Hue / Saturation / Luminance স্লাইডার
ছোট হুইলে মাউস দিয়ে ফাইন-টিউন করা কঠিন এমন ছোট adjustment-এর জন্য, edit panel-এ একই রঙকে তিনটা আলাদা স্লাইডার হিসেবে দেখানো হয়, একটা একটা করে নাড়ানো যায়।
পাঁচ ধরনের প্যালেট
বেস কালার আবার নতুন করে পিক না করেই complementary, monochromatic, analogous, triadic আর tetradic-এর মধ্যে সুইচ করা যায় — টুলটা একই hue রেখে শুধু হুইলে ঘোরানোর নিয়ম বদলায়।
এক ক্লিকে কপি
যেকোনো swatch-এ ক্লিক করলে তার hex কোড কপি হয়ে যায়, অথবা প্যালেটের নিচের বাটন দিয়ে পুরো প্যালেট একসাথে plain hex list অথবা সরাসরি পেস্ট করার মতো CSS custom property (--color-1, --color-2...) হিসেবে কপি করা যায়।
প্রতিটা swatch আলাদাভাবে এডিট করা যায়
জেনারেট হওয়া রঙগুলো ফর্মুলায় আটকে থাকে না। হুইলের যেকোনো মার্কার ড্র্যাগ করো, অথবা কোনো swatch-এর ওপর হোভার করে ছোট adjust আইকনে ক্লিক করলে তার নিজস্ব Hue/Saturation/Luminance স্লাইডার খুলবে। একবার কোনো রঙ সরালে সেটা ওখানেই থাকবে, ক্যালকুলেট করা পজিশনে ফিরে যাবে না — শুধু প্যালেট টাইপ বদলালে রিসেট হয়ে যায়।
ব্যাকগ্রাউন্ড তোমার রঙ অনুযায়ী বদলায়
পিকারের পেছনের অংশ যে রঙই বেস হিসেবে সিলেক্ট করা থাকুক না কেন, তার একটা হালকা, নরম টিন্ট নেয় — ফলে ছোট swatch-এ দেখার বদলে বড় সারফেসে রঙটা কেমন দেখাবে তার একটা মোটামুটি ধারণা পাওয়া যায়।
ইমেজ হিসেবে ডাউনলোড
শুধু hex কোড কপি করাই না, প্যালেটটা একটা রেডি-মেড ইমেজ কার্ড হিসেবে PNG, JPG বা SVG ফরম্যাটে ডাউনলোডও করা যায় — কোনো কোড এডিটরের বাইরে, ডকুমেন্টে বা ডিজাইন ব্রিফে প্যালেট শেয়ার করার জন্য কাজে লাগে।
কী কী কাজে ব্যবহার করা যায়?
ওয়েবসাইট বা অ্যাপের কালার স্কিম বাছাই
প্রথমে ব্র্যান্ডের প্রাইমারি রঙ পিক করো, তারপর বাটন, লিংক আর accent-এর জন্য একটা complementary বা triadic সেট জেনারেট করো।
ডিজাইন সিস্টেমের জন্য প্যালেট বানানো
প্যালেটটা CSS variable হিসেবে কপি করে সরাসরি স্টাইলশিটে বসিয়ে একটা থিমের starting point হিসেবে ব্যবহার করা যায়।
দুইটা রঙ বেমানান কিনা চেক করা
একটা রঙকে বেস বানিয়ে দেখো আরেকটা রঙ হুইলে তার সাপেক্ষে কোথায় পড়ছে — কাছাকাছি (ছোট angle) থাকা রঙ আলাদা করা কঠিন, প্রায় উল্টো দিকের রঙ সবচেয়ে বেশি contrast তৈরি করে।
একটা রঙের শেড আর টিন্ট এক্সপ্লোর করা
Monochromatic টাইপে সুইচ করলে তোমার একদম নির্দিষ্ট hue-এর একটা গাঢ় shade আর হালকা tint পাবে — hover state, border বা কোনো UI কালারের disabled ভার্সনের জন্য দরকারি।
টুলের বিস্তারিত তথ্য
| Input | টাইপ করা hex কোড অথবা হুইলে ক্লিক/ড্র্যাগ |
|---|---|
| Output | HEX কোড এবং CSS custom property (ক্লিপবোর্ডে কপি হয়), অথবা PNG, JPG বা SVG হিসেবে ডাউনলোড করা প্যালেট কার্ড |
| প্যালেট টাইপ | Complementary, Monochromatic, Analogous, Triadic, Tetradic |
| প্রসেসিং | পুরোপুরি ব্রাউজারে — কোনো আপলোড নেই, অ্যাকাউন্ট নেই, সার্ভারে কিছু পাঠানো হয় না |
| কালার মডেল | HSL (hue, saturation, lightness), hex-এ কনভার্ট করা হয় |
সুবিধা
- কোনো অ্যাকাউন্ট বা সাইনআপ লাগে না — পেজ লোড হওয়ার সাথে সাথে হুইল কাজ করে।
- ড্র্যাগ করার সাথে সাথে প্যালেট আপডেট হয়, তাই দ্রুত অপশন compare করা যায়।
- CSS variable হিসেবে কপি করলে hex কোড হাতে rename বা reformat করার ঝামেলা থাকে না।
- প্রতিটা প্যালেট টাইপের পেছনের গণিত fixed এবং consistent, তাই নিয়মটা বুঝে গেলে রেজাল্ট predictable।
সীমাবদ্ধতা
- হুইল নিজে শুধু hue আর saturation দেখায় — lightness আলাদাভাবে স্লাইডার দিয়ে অ্যাডজাস্ট করতে হয়।
- এই টুল color theory rule অনুযায়ী প্যালেট বানায়; contrast ratio বা accessibility (WCAG) কমপ্লায়েন্স চেক করে না।
- ক্লিপবোর্ডে কপি করার জন্য ব্রাউজারে Clipboard API সাপোর্ট লাগে; খুব পুরনো ব্রাউজারে কপি বাটন কাজ নাও করতে পারে।
- ডাউনলোড করা PNG/JPG/SVG হলো একটা সাধারণ প্যালেট কার্ড (hex লেবেল সহ কালার ব্লক), ইন্টারেক্টিভ হুইলের ছবি না।
- কোনো swatch-এর মার্কার ড্র্যাগ করলে শুধু hue আর saturation সরাসরি বদলায়; lightness আগের ক্যালকুলেট করা ভ্যালুই থাকে, যতক্ষণ না Luminance স্লাইডার দিয়ে আলাদা করে অ্যাডজাস্ট করা হয়।
প্রাইভেসি
তুমি যে রঙ, hex কোড বা প্যালেট বানাও তার কিছুই কোথাও পাঠানো হয় না। সব গণিত তোমার ব্রাউজার ট্যাবেই লোকালি চলে, পেজ বন্ধ করলে বা রিফ্রেশ দিলে সব মুছে যায়।
ডেটা হ্যান্ডলিং
এই টুল কোনো cookie ব্যবহার করে না, তোমার প্যালেট সংরক্ষণ করে না, এবং লগইনের দরকার নেই।
টিপস
- প্যালেটের দুইটা রঙ যদি খুব কাছাকাছি লাগে, তাহলে analogous-এর বদলে একটা বেশি ছড়ানো টাইপ (triadic বা tetradic) ট্রাই করো।
- UI-এর কাজের জন্য saturation একটু কম (40-60%) রাখলে প্যালেট বেশি bold না হয়ে বরং শান্ত লাগবে।
- একটা ব্র্যান্ড কালারের hover/active/disabled ভ্যারিয়ান্ট বানাতে monochromatic টাইপ ব্যবহার করো।
সাধারণ প্রশ্ন ও উত্তর
এই টুল কি আমার প্যালেট সেভ করে রাখে?
না। কিছুই সংরক্ষণ করা হয় না — পেজ রিফ্রেশ করলে বা ট্যাব বন্ধ করলে, আগে কোথাও কপি না করে থাকলে প্যালেটটা হারিয়ে যাবে।
হুইল আর স্লাইডারের মধ্যে পার্থক্য কী?
হুইল hue আর saturation একসাথে কন্ট্রোল করে, তুমি কোথায় ক্লিক বা ড্র্যাগ করছো তার ওপর ভিত্তি করে। Edit panel-এর স্লাইডারগুলো দিয়ে hue, saturation আর luminance আলাদা আলাদা করে সেট করা যায়, যেটা precise ভ্যালুর জন্য সহজ।
#1ec-এর মতো 3-ডিজিট hex কোড ব্যবহার করা যাবে?
হ্যাঁ, hex ফিল্ড 3-ডিজিট এবং 6-ডিজিট দুই ধরনের কোডই নেয়, শুরুতে # থাকুক বা না থাকুক।
হুইলটা তো ফুল কালার দেখাচ্ছে, কিন্তু আমার বাছাই করা রঙ মিউটেড কেন?
হুইলের ব্যাকগ্রাউন্ড সবসময় কিনারায় ফুল saturation দেখায়, এটা শুধু একটা visual reference। তোমার আসল রঙের saturation বোঝা যায় মার্কারটা কেন্দ্র থেকে কতদূরে আছে তা দিয়ে, আর lightness আলাদা একটা ভ্যালু যেটা Luminance স্লাইডার দিয়ে অ্যাডজাস্ট হয়।
একটা swatch সরালে বাকিগুলোর ওপর প্রভাব পড়ে?
না। একটা swatch সরানো বা এডিট করলে শুধু সেই রঙটাই বদলায়। বাকিগুলো তাদের ক্যালকুলেট করা পজিশনেই থাকে, যতক্ষণ না তুমি সেগুলোও সরাও অথবা প্যালেট টাইপ বদলাও — টাইপ বদলালে সব manual adjustment রিসেট হয়ে যায়।
PNG/JPG আর SVG ডাউনলোডের মধ্যে পার্থক্য কী?
দুটোতেই একই প্যালেট কার্ড দেখায়। PNG আর JPG ফিক্সড-রেজোলিউশনের ইমেজ, আর SVG যেকোনো সাইজে শার্প থাকে এবং পরে ভেক্টর টুলে এডিট করা যায়।