টুলটি কী করে
র্যান্ডম জেনারেটর কেন কাজে লাগে
প্যালেট মোড ও কালার হুইল
লক, আলাদা কালার বদলানো ও কালার সংখ্যা
পেজের ব্যাকগ্রাউন্ড সিঙ্ক
কোড কপি ও ফাইল ডাউনলোড
লাইভ UI প্রিভিউ
ফিচারগুলো কীভাবে কাজ করে
২ থেকে ১০টি কালারের র্যান্ডম প্যালেট
Generate Random বাটন বা স্পেসবার চাপলে নতুন প্যালেট তৈরি হয়। নতুন আইডিয়া খোঁজার সবচেয়ে দ্রুত উপায়। কালার সম্পূর্ণ র্যান্ডম, তাই কিছু কম্বিনেশন মানানসই নাও হতে পারে।
আলাদা কালার লক ও বদলানো
লক করা কালার পরের জেনারেশনেও থাকে। রিফ্রেশ আইকন দিয়ে শুধু একটি সোয়াচ বদলানো যায়। এতে ধাপে ধাপে প্যালেট গড়া যায়।
HEX, RGB ও HSL মান
কার্ডের কোনো মানে ক্লিক করলেই কপি হয়। কার্ডে HSL-এর hue ও saturation দেখায়। তবে কপি করা HSL মানে lightness-ও থাকে।
কালার হুইল ভিউ
প্রতিটি কালার hue ও saturation অনুযায়ী হুইলের কোথায় পড়ে তা দেখায়। কালারগুলো এক জায়গায় জমে আছে নাকি ছড়িয়ে আছে, তা বোঝা যায়।
চার ফরম্যাটে কোড স্নিপেট
CSS variables, Tailwind colors object, React array এবং Flutter/Dart constants। Tailwind স্নিপেটটি পূর্ণ ফাইল নয়, আপনার নিজের config-এ বসানোর একটি অংশ।
SVG ডাউনলোড ও JSON কপি
SVG হলো HEX লেখাসহ সোয়াচের একটি সরল স্ট্রিপ। JSON কপিতে প্রতিটি কালারের পূর্ণ ডেটা থাকে: HEX, RGB, HSL ও লক অবস্থা।
পেজ ব্যাকগ্রাউন্ড সিঙ্ক ও UI প্রিভিউ
প্যালেট প্রয়োগ করলে কেমন দেখায় তা দ্রুত বোঝার দুটি উপায়: পুরো পেজের ব্যাকগ্রাউন্ড এবং ছোট বাটন-কার্ড-ব্যাজের মকআপ।
কী কী কাজে ব্যবহার করা যায়?
নতুন ডিজাইন শুরু করা
একটি কালার ভালো লাগা পর্যন্ত প্যালেট জেনারেট করুন, সেটি লক করুন, তারপর তার চারপাশে বাকি কালার খুঁজুন।
স্টাইলশিট বা থিম সেট করা
কালারগুলো CSS variables বা Tailwind স্নিপেট হিসেবে কপি করে সরাসরি প্রজেক্টে বসান।
Flutter ও React প্রজেক্ট
হাতে রূপান্তর না করেই Dart Color constants বা HEX স্ট্রিংয়ের JavaScript array পেয়ে যান।
ডিজাইনারের সঙ্গে প্যালেট শেয়ার
SVG স্ট্রিপ ডাউনলোড করুন বা JSON কপি করুন, যাতে কালার ও HEX কোড পাঠানো যায়।
শেখা ও অনুশীলন
হুইলে দেখুন hue ও saturation কীভাবে কালারের অবস্থান ঠিক করে, আর র্যান্ডম কালারগুলো পাশাপাশি তুলনা করুন।
টুলের বিস্তারিত তথ্য
| টুলের ধরন | র্যান্ডম কালার প্যালেট জেনারেটর |
|---|---|
| কালার সংখ্যা | ২ থেকে ১০ (শুরুতে ৬) |
| কালারের মান | HEX, RGB, HSL |
| কালার হুইল | আছে, শুধু hue ও saturation দেখায় |
| কোড স্নিপেট | CSS variables, Tailwind, React array, Flutter/Dart |
| ফাইল ডাউনলোড | SVG (palette.svg) |
| ডেটা কপি | JSON |
| কিবোর্ড শর্টকাট | স্পেসবার চাপলে নতুন প্যালেট |
| প্যালেট সংরক্ষণ | না, পেজ রিলোড করলে প্যালেট হারিয়ে যায় |
| কন্ট্রাস্ট চেক | নেই |
| ফাইল আপলোড | নেই, কোনো ইনপুট ফাইল লাগে না |
| প্রসেসিং | আপনার ব্রাউজারে |
সুবিধা
- কিছু আপলোড না করেই কালার জেনারেট ও কপি করা যায়।
- স্পেসবার শর্টকাটে অনেক প্যালেট দ্রুত দেখে নেওয়া যায়।
- লক ও একক কালার বদলানোর সুবিধায় নতুন করে শুরু না করে প্যালেট ধাপে ধাপে ঠিক করা যায়।
- চার ফরম্যাটের কোড কপির জন্য তৈরি থাকে।
সীমাবদ্ধতা
- কালারগুলো সম্পূর্ণ র্যান্ডম। টুলটি কোনো হারমোনি নিয়ম মানে না, তাই কিছু কম্বিনেশন বেমানান হতে পারে।
- প্যালেট সংরক্ষণ হয় না। পেজ রিলোড করলে বা বন্ধ করলে বর্তমান প্যালেট হারিয়ে যায়, তাই যা রাখতে চান আগে কপি বা ডাউনলোড করে নিন।
- টুলটি কন্ট্রাস্ট বা অ্যাক্সেসিবিলিটি পরীক্ষা করে না। প্রিভিউ শুধু চোখে দেখার নমুনা।
- ফাইল ডাউনলোডের একমাত্র অপশন SVG। PNG, PDF বা Adobe swatch ডাউনলোড নেই।
- JSON কপি টুলের নিজস্ব ডেটা ফরম্যাট। এটি তৈরি করা Figma tokens ফাইল নয়।
- কিবোর্ড ছাড়া টাচ স্ক্রিনে স্পেসবার শর্টকাট পাওয়া যায় না। বাটন ব্যবহার করুন।
- হুইলে শুধু hue ও saturation দেখায়, lightness নয়।
আপনার ডেটা কীভাবে সামলানো হয়
টুলটি কালার জেনারেট করা, হুইল আঁকা, কোড স্নিপেট বানানো এবং SVG ফাইল তৈরি আপনার ব্রাউজারেই করে। কোনো ফাইল আপলোড হয় না, আর টুলের নিজস্ব কোড আপনার প্যালেট কোনো সার্ভারে পাঠায় না। কপির জন্য ব্রাউজারের ক্লিপবোর্ড ব্যবহার হয়।
প্রাইভেসি
টুলটি ব্রাউজারেও আপনার প্যালেট সংরক্ষণ করে না। এই বক্তব্য শুধু টুলটির ক্ষেত্রে প্রযোজ্য, ওয়েবসাইটের অন্য অংশে লোড হওয়া স্ক্রিপ্টের ক্ষেত্রে নয়।
টিপস
- আগে মূল কালারটি লক করুন, তারপর জেনারেট করে অ্যাকসেন্ট কালার খুঁজুন।
- ব্যাকগ্রাউন্ড সিঙ্ক অন করে প্রথম কালারটি পুরো পেজে দেখে নিন।
- খোঁজার সময় কালার সংখ্যা ১০ করুন, ভালো কয়েকটি পেলে সংখ্যা কমিয়ে আনুন।
- পেজ রিলোড করার আগে প্যালেট কপি করে নিন, কারণ এটি সংরক্ষণ হয় না।
- টেক্সটের জন্য কালার ব্যবহারের আগে আলাদা কন্ট্রাস্ট চেকারে যাচাই করুন।
সাধারণ প্রশ্ন ও উত্তর
ব্যবহার করতে কি অ্যাকাউন্ট লাগে?
না। টুলটিতে কোনো সাইন-ইন ধাপ নেই। পেজ খুলে সরাসরি জেনারেট করতে পারেন।
কালারগুলো কি সত্যিই র্যান্ডম?
হ্যাঁ। প্রতিটি কালার সব HEX মান থেকে এলোমেলোভাবে বাছা হয়। টুলটি কোনো হারমোনি নিয়ম মানে না, তাই কিছু প্যালেট সুন্দর হবে, কিছু হবে না।
একসাথে কয়টি কালার জেনারেট করা যায়?
একবারে ২ থেকে ১০টি। নতুন প্যালেট শুরু হয় ৬টি কালার দিয়ে।
পছন্দের কালার ধরে রাখব কীভাবে?
কার্ডের লক আইকনে ক্লিক করুন। লক করা কালার নতুন প্যালেট জেনারেট করলেও থাকে। রিফ্রেশ আইকন শুধু ওই একটি কালার বদলায়।
কোন কোন ফরম্যাটে কপি করা যায়?
একটি কালার HEX, RGB বা HSL হিসেবে কপি করা যায়। পুরো প্যালেট CSS variables, Tailwind colors স্নিপেট, React array বা Flutter/Dart constants হিসেবে কপি করা যায়। JSON হিসেবেও কপি করা যায়।
প্যালেট কি ফাইল হিসেবে ডাউনলোড করা যায়?
হ্যাঁ, palette.svg নামে SVG ফাইল হিসেবে। এতে প্রতিটি কালারের সোয়াচ ও HEX কোড থাকে। PNG, PDF বা Adobe swatch ডাউনলোড নেই।
টেক্সট কন্ট্রাস্ট বা অ্যাক্সেসিবিলিটি কি চেক করে?
না। নিচের প্রিভিউ শুধু চোখে দেখার নমুনা। টেক্সট ও ব্যাকগ্রাউন্ড কালার ঠিক করার আগে আলাদা কন্ট্রাস্ট চেকারে যাচাই করুন।
পেজ রিলোড করলে কি প্যালেট থাকে?
না। প্যালেট সংরক্ষণ হয় না। পেজ ছাড়ার আগে কোড কপি করুন বা SVG ডাউনলোড করুন।
ফোনে কি কাজ করে?
Generate Random বাটন, লক ও কপি বাটন টাচে কাজ করে। স্পেসবার শর্টকাটের জন্য কিবোর্ড লাগে।