কালার শেডস জেনারেটর

কালার শেডস জেনারেটর কী?

কালার শেডস জেনারেটর একটি বেস HEX রঙকে একটি ডিজাইন সিস্টেমের জন্য প্রস্তুত সম্পূর্ণ টিন্ট-ও-শেড স্কেলে রূপান্তর করে। শুধু RGB-তে রৈখিকভাবে মেশানোর বদলে এটি OKLCH বা HSL-এ ইন্টারপোলেট করতে পারে যাতে আভা স্থির থাকে এবং উজ্জ্বলতা সমানভাবে বণ্টিত হয়, ফলে ঘোলাটে বা ফ্যাকাশে ধাপ ছাড়াই উপলব্ধিগতভাবে ভারসাম্যপূর্ণ র‍্যাম্প পাওয়া যায়। কতগুলো ধাপ তৈরি হবে তা আপনি বেছে নেন — 2 থেকে 24, বা কমা দিয়ে আলাদা করা কাস্টম লেবেলের তালিকা —, আভা সরান বা স্যাচুরেশন স্কেল করেন, এবং প্রতিটি ধাপের WCAG কনট্রাস্ট ইঙ্গিত পড়েন যা দেখায় কোন শেডগুলো সাদা ও কালোর উপর টেক্সট হিসেবে কাজ করে। সম্পূর্ণ স্কেলটি এক ক্লিকে CSS কাস্টম প্রপার্টি, Tailwind কালার কনফিগ অবজেক্ট বা JSON হিসেবে কপি হয়।

কালার শেডস জেনারেটর কীভাবে ব্যবহার করবেন

1. বেস রঙ (HEX) ফিল্ডে #rrggbb বা #rgb ফরম্যাটে একটি বেস রঙ টাইপ করুন, অথবা দৃশ্যত বেছে নিতে বড় সোয়াচে ক্লিক করুন।
2. একটি কালার স্পেস বেছে নিন: স্থির আভাসহ উপলব্ধিগতভাবে সমান র‍্যাম্পের জন্য OKLCH বা HSL, আর প্রথাগত রৈখিক মিশ্রণের জন্য RGB।
3. কত ধাপ চান তা ঠিক করুন (2–24), অথবা সেটিংস খুলে কমা দিয়ে আলাদা করা কাস্টম ধাপ তালিকা দিন, আভা সরান, স্যাচুরেশন স্কেল করুন এবং এক্সপোর্টের রঙের নাম সেট করুন।
4. প্রতিটি সারির দুটি কনট্রাস্ট সেল পড়ুন — সাদা ও কালোর উপর অক্ষর A —, যা সেই শেড টেক্সটের জন্য WCAG AA পূরণ করলে হাইলাইট হয়।
5. একটি ধাপের HEX কপি করুন, অথবা কপি বোতাম দিয়ে পুরো স্কেলকে CSS ভেরিয়েবল, Tailwind কনফিগ বা JSON হিসেবে কপি করুন।

উদাহরণ

সচরাচর জিজ্ঞাসিত প্রশ্ন

RGB, HSL ও OKLCH অপশনের মধ্যে পার্থক্য কী?

RGB আপনার রঙকে সাদা ও কালোর দিকে রৈখিকভাবে মেশায়, যা দ্রুত কিন্তু মধ্য-টোনে অসম দেখাতে পারে। HSL ও OKLCH বরং আভা স্থির রাখে এবং উজ্জ্বলতা সমানভাবে বণ্টন করে; OKLCH উপলব্ধিগতভাবে অভিন্ন, তাই প্রতিটি ধাপ সমান উজ্জ্বলতার লাফের মতো দেখায়। সবচেয়ে ভারসাম্যপূর্ণ র‍্যাম্পের জন্য OKLCH বেছে নিন।

আমি কতগুলো শেড তৈরি করতে পারি, আর নাম দিতে পারি কি?

2 থেকে 24 পর্যন্ত যেকোনো ধাপ সংখ্যা সেট করুন। 11 মান পরিচিত Tailwind নম্বরিং (50, 100…900, 950) ব্যবহার করে; অন্য মান 50 থেকে 950 পর্যন্ত সমানভাবে বণ্টিত হয়। সেটিংসে কমা দিয়ে আলাদা করা কাস্টম লেবেলের তালিকাও টাইপ করতে পারেন, যা ধাপ সংখ্যা অগ্রাহ্য করে এবং প্রতিটি ধাপকে ঠিক আপনার লেখা অনুযায়ী নাম দেয়।

WCAG কনট্রাস্ট ইঙ্গিত কীভাবে হিসাব করা হয়?

প্রতিটি শেডের জন্য টুলটি আপেক্ষিক উজ্জ্বলতা থেকে বিশুদ্ধ সাদা ও বিশুদ্ধ কালোর বিপরীতে WCAG কনট্রাস্ট অনুপাত হিসাব করে। প্রতিটি সারির দুটি ছোট সেল সাদা ও কালোর উপর অক্ষর A দেখায় এবং অনুপাত 4.5:1 (সাধারণ টেক্সটের জন্য AA) ছুঁলে হাইলাইট হয়; সঠিক অনুপাত এবং তা AA না AAA দেখতে হোভার করুন।

আমার রঙের ডেটা কি কোথাও আপলোড হয়?

না। রঙের গণিত, কনট্রাস্ট যাচাই এবং তিনটি এক্সপোর্টই সম্পূর্ণরূপে আপনার ব্রাউজারে চলে, তাই কোনো রঙের মান কখনো কোনো সার্ভারে পাঠানো হয় না। এটি অফলাইনে কাজ করে এবং আপনার প্যালেট ব্যক্তিগত রাখে।