ওয়েবসাইট এবং অ্যাপস
ব্র্যান্ড, ব্যাকগ্রাউন্ড এবং অ্যাকসেন্ট রঙগুলো নির্বাচন করুন, তারপর সেগুলো সরাসরি CSS ভেরিয়েবল, টেইলওয়াইন্ড বা অ্যান্ড্রয়েড থিমে পেস্ট করুন।
রঙ প্যালেট জেনারেটর — মিলিত রঙ প্যালেট তৈরি করুন এবং সেগুলো কোড হিসেবে রপ্তানি করুন।
একটি বেস কালার এবং একটি স্কিম বেছে নিন, এবং ৩ থেকে ৮টি রঙের একটি সুষম প্যালেট পান। আপনার পছন্দেরগুলো লক করুন, প্রতিটি রঙে সাদা ও কালো টেক্সট কতটা পাঠযোগ্য তা পরীক্ষা করুন, তারপর কোডগুলো CSS ভেরিয়েবল, Tailwind, Android colors.xml বা Jetpack Compose হিসেবে কপি করুন। সবকিছু আপনার ব্রাউজারে চলে, এবং সংরক্ষিত প্যালেটগুলো আপনার ডিভাইসেই থাকে।
একটি প্যালেট তৈরি করুন
আপনার ব্রাউজারে চলে
আপনার রঙের প্যালেট
আপনি যে রংগুলো পছন্দ করেন সেগুলো লক করুন, তারপর বাকিগুলো পরিবর্তন করতে Generate চাপুন। হেক্স কোডে ক্লিক করে কপি করুন। প্যালেটে ক্লিক করে Space চাপুন জেনারেট করতে।
কোড হিসেবে রপ্তানি করুন
সংরক্ষিত প্যালেটসমূহ
এখনো কোনো প্যালেট সংরক্ষণ করা হয়নি। এই ডিভাইসে একটি প্যালেট সংরক্ষণ করতে 'প্যালেট সংরক্ষণ করুন' চাপুন।
গাইড
রঙের প্যালেট গাইড: স্কিম, বৈপর্য্য, এবং কোডে রপ্তানি
রঙের স্কিমগুলো কীভাবে কাজ করে তা শিখুন, পাঠ্যের কনট্রাস্ট পরীক্ষা করুন, এবং আপনার প্যালেটকে একটি বাস্তব প্রকল্পে প্রয়োগ করুন।
রঙের প্যালেট জেনারেটর কী?
রঙের প্যালেট হল একগুচ্ছ রঙের ছোট সেট যা একসঙ্গে সুন্দরভাবে কাজ করে। ডিজাইনাররা এগুলো রঙের চাকা থেকে তৈরি করেন: একটি প্রাথমিক রঙ বেছে নেন, তারপর সেখান থেকে নির্দিষ্ট কোণে অন্যান্য ছটা নির্বাচন করেন, যাতে ফলাফল এলোমেলো না হয়ে সুষম মনে হয়।
এই জেনারেটরটি আপনার জন্য সেটি করে। একটি বেস কালার এবং একটি স্কিম নির্বাচন করুন, আপনার পছন্দের রংগুলো লক করুন, এবং ফলাফল CSS, Tailwind, Android XML বা Jetpack Compose কোড হিসেবে এক্সপোর্ট করুন। প্রতিটি রঙের নমুনায় এর RGB ও HSL মান এবং তাতে সাদা ও কালো টেক্সট কতটা পাঠযোগ্য হবে তা দেখানো হয়। হেক্স মানগুলো বেস-১৬; বাইনারি টু ডেসিমাল কনভার্টার দেখায় এগুলো সাধারণ সংখ্যাগুলোর সাথে কীভাবে সম্পর্কিত।
মানুষ কেন রঙের প্যালেট তৈরি করে
স্লাইড, পোস্টার এবং নথি
প্রস্তুতি, সামাজিক পোস্ট বা প্রিন্ট ডিজাইনের জন্য অনুমান ছাড়াই রঙের একটি মিলিত সেট পান।
চার্ট এবং ড্যাশবোর্ড
ডেটা সিরিজের জন্য স্বতন্ত্র কিন্তু সামঞ্জস্যপূর্ণ রঙ তৈরি করুন, এবং লেবেলগুলো পাঠযোগ্য রাখতে কনট্রাস্ট পরীক্ষা করুন।
রঙের পরিকল্পনার ব্যাখ্যা
| স্কিম | এটি কীভাবে নির্মিত হয়েছে | অনুভব করুন এবং ব্যবহার করুন |
|---|---|---|
| সদৃশ | প্রতিবেশী রং, ৩০° ব্যবধান | শান্ত এবং স্বাভাবিক। পটভূমি এবং নরম UI-এর জন্য ভালো। |
| একবর্ণ | একই রঙ, ভিন্ন উজ্জ্বলতা | পরিষ্কার এবং সুসংগঠিত। ন্যূনতম ডিজাইনের জন্য নিরাপদ। |
| পূরক | দুটি বিপরীত রং, ১৮০° দূরে | উচ্চ বৈপর্যয়। একটি শক্তিশালী অ্যাকসেন্ট রঙের জন্য উপযুক্ত। |
| বিভক্ত পরিপূরক | একটি রং এবং এর বিপরীতের দুই পাশের রং | পূরকতার তুলনায় কম টানাপোড়েন। |
| ত্রৈয়াডিক | তিনটি রঙ, প্রতিটির মধ্যে ১২০° কোণ | জীবন্ত এবং সুষম। একটি প্রধান রঙের প্রয়োজন। |
| টেট্রাডিক (বর্গ) | চারটি রং, ৯০° ব্যবধান | সমৃদ্ধ এবং বৈচিত্র্যময়। একটি প্রধান রঙের সাথে সবচেয়ে ভালো কাজ করে। |
রঙ প্যালেট জেনারেটর কীভাবে ব্যবহার করবেন
- রঙের বাক্স থেকে একটি বেসিক রঙ নির্বাচন করুন, অথবা হেক্স কোড টাইপ করুন। একটি স্কিম নির্বাচন করুন এবং আপনি কতটি রঙ চান তা নির্ধারণ করুন।
- নতুন র্যান্ডম বেস পরীক্ষা করতে Generate চাপুন। আপনি যে কোনো রঙ রাখতে চান, তার নিচে Lock চাপুন।
- প্রতিটি রঙের নমুনায় কনট্রাস্ট নোটগুলি পরীক্ষা করুন। যেখানেই কোনো রঙের উপর টেক্সট থাকবে, সেখানে 4.5:1 বা তার বেশি অনুপাতের লক্ষ্য রাখুন।
- হেক্স কোডে ক্লিক করে তা কপি করুন, অথবা 'কোড হিসেবে রপ্তানি' খুলুন এবং CSS, Tailwind, Android বা Compose নির্বাচন করুন।
- এই ডিভাইসে প্যালেট সংরক্ষণ করতে 'Save' প্যালেটে চাপ দিন, শেয়ার করতে লিঙ্ক কপি করুন, অথবা ইমেজের জন্য PNG ডাউনলোড করুন।
রঙের বৈপর্যয় এবং প্রবেশযোগ্যতা
তুলনা অনুপাত
১:১ (একই) থেকে ২১:১ (কালো-সাদা) পর্যন্ত একটি অনুপাত যা দুটি রঙের উজ্জ্বলতা তুলনা করে।
ডব্লিউসিএজি এএ
সাধারণ পাঠ্যের জন্য কমপক্ষে ৪.৫:১ এবং বড় পাঠ্যের (প্রায় ২৪ পিক্সেল বা ১৯ পিক্সেল বোল্ড) জন্য ৩:১। এটিই সাধারণত আইনগত ও ব্যবহারিক লক্ষ্য।
ডব্লিউসিএজি এএএ
সাধারণ পাঠ্যের জন্য কমপক্ষে ৭:১ অনুপাত। এটি কম দৃষ্টিশক্তি সম্পন্ন ব্যক্তিদের জন্য সহায়ক একটি কঠোরতর মান।
শুধুমাত্র রঙের ওপর নির্ভর করবেন না
প্রায় প্রতি বারো জন পুরুষের একজনই কোনো না কোনো ধরনের রঙ-দৃষ্টি ত্রুটিতে ভোগে। রঙকে লেবেল, আইকন বা প্যাটার্নের সাথে যুক্ত করুন যাতে অর্থ হারিয়ে না যায়।
রপ্তানি ফরম্যাটগুলো কেমন দেখায়
CSS: --color-1: #1f3a5f;
SCSS: $color-1: #1f3a5f;
Tailwind: 'palette-1': '#1f3a5f',
Android: #1F3A5F
কম্পোজ: val Palette1 = Color(0xFF1F3A5F)
JSON: ["#1f3a5f", "#ff5733"]
Android Studio-তে XML-টি paste করুন res/values/colors.xml, অথবা আপনার Compose লাইনগুলো যোগ করুন Color.kt ফাইলে। Compose মানের মধ্যে পূর্ণ-অপাসিটি আলফা প্রিফিক্স FF অন্তর্ভুক্ত থাকে।
কার্যকর প্যালেটের টিপস
- একটি প্রধান রঙ, একটি বা দুটি সহায়ক রঙ এবং একটি নিরপেক্ষ রঙ ব্যবহার করুন। প্রতিটি রঙের সমান পরিমাণ সাধারণত ব্যস্ত দেখায়।
- প্যালেট চূড়ান্ত করার আগে প্রতিটি পটভূমি রঙের উপর পাঠ্য কনট্রাস্ট পরীক্ষা করুন।
- আপনার ব্র্যান্ডের রঙ লক করুন এবং বিকল্পগুলো অন্বেষণ করতে এর চারপাশে তৈরি করুন।
- প্যালেটটিকে শুধুমাত্র সোয়াচ হিসেবে নয়, প্রকৃত স্ক্রিনে প্রদর্শিত হবে এমন আকারে দেখুন।
- ডার্ক মোডেও পরীক্ষা করুন: সাদা পটভূমিতে যে রঙটি ভালো দেখায়, তা প্রায় কালো পটভূমিতে নাও দেখাতে পারে।
সীমাবদ্ধতা এবং গোপনীয়তা
গোপনীয়তা
প্যালেটগুলো আপনার ব্রাউজারে তৈরি হয়। সংরক্ষিত প্যালেটগুলো আপনার ডিভাইসের ব্রাউজারের লোকাল স্টোরেজে রাখা হয় এবং কখনোই আপলোড করা হয় না।
সীমাবদ্ধতা
রঙগুলো sRGB রঙের পরিসরে দেখানো হয়েছে, এবং প্রদর্শন স্ক্রিন অনুযায়ী ভিন্ন হতে পারে। প্যালেটগুলো রঙ তত্ত্বের ভিত্তিতে প্রস্তাবিত, বাস্তব ব্যবহারকারীদের সাথে পরীক্ষা করার বিকল্প নয়। এই টুলটি শুধুমাত্র বৈপর্যয়ের ভিত্তিতে রঙ-অন্ধ বান্ধবতা যাচাই করে, তার বাইরে নয়।
সাধারণ প্রশ্নসমূহ
রঙ প্যালেট জেনারেটর প্রায়শই জিজ্ঞাসিত প্রশ্নাবলী
রঙের প্যালেট জেনারেটর কীভাবে কাজ করে?
একটি বেস কালার এবং একটি কালার স্কিম নির্বাচন করুন, এবং টুলটি কালার হুইল ব্যবহার করে বেসটিকে মিলিত রঙের একটি সেটে পরিণত করে। নতুন র্যান্ডম বেসের জন্য Generate চাপুন, অথবা আপনার পছন্দের রঙগুলো লক করে বাকিগুলো জেনারেট করুন।
রঙের স্কিমগুলোর মধ্যে পার্থক্য কী?
অনুরূপ রঙের প্যালেট শান্ত চেহারার জন্য পার্শ্ববর্তী ছায়া ব্যবহার করে। পরিপূরক রঙের প্যালেট বৈপর্যয়ের জন্য বিপরীত ছায়া ব্যবহার করে। বিভক্ত পরিপূরক এবং ত্রিভুজীয় রঙের প্যালেট তিনটি সমানভাবে বিস্তৃত ছায়া ব্যবহার করে, চতুষ্কোণীয় রঙের প্যালেট চারটি ছায়া ব্যবহার করে, এবং একরঙা রঙের প্যালেট একটি ছায়া রেখে তার উজ্জ্বলতা পরিবর্তন করে।
আমি কীভাবে একটি রঙ অপরিবর্তিত রেখে অন্যগুলো পরিবর্তন করব?
যে কোনো সোয়্যাচের নিচে প্রেস লক করুন। লক করা রংগুলো Generate চাপলে, বেস পরিবর্তন করলে বা স্কিম পরিবর্তন করলে অপরিবর্তিত থাকবে। Edit বোতাম ব্যবহার করে সোয়্যাচ সম্পাদনা করলেও তা লক হয়ে যাবে।
কনট্রাস্ট নম্বরগুলো কী বোঝায়?
প্রতিটি রঙের নমুনায় সাদা টেক্সট এবং কালো টেক্সটের জন্য সেই রঙের বৈপর্য্য অনুপাত দেখানো হয়েছে। WCAG সাধারণ টেক্সটের জন্য (AA স্তরে) কমপক্ষে 4.5:1, আরও কঠোর AAA স্তরের জন্য 7:1 এবং বড় টেক্সটের জন্য 3:1 অনুপাতের কথা বলে।
কোন কোন রপ্তানি ফরম্যাটগুলো উপলব্ধ?
HEX তালিকা, CSS ভেরিয়েবল, SCSS ভেরিয়েবল, একটি JSON অ্যারে, একটি Tailwind কনফিগ, একটি Android colors.xml ফাইল এবং Jetpack Compose-এর Color মান, যাতে আপনি প্যালেটটি সরাসরি আপনার প্রকল্পে পেস্ট করতে পারেন।
আমি কি আমার প্যালেট শেয়ার বা সংরক্ষণ করতে পারি?
হ্যাঁ। লিঙ্ক কপি করলে একই রঙগুলো পুনরায় খুলতে সক্ষম একটি ওয়েব ঠিকানা তৈরি হয়, PNG ডাউনলোড প্যালেটের একটি ছবি সংরক্ষণ করে, এবং প্যালেট সংরক্ষণ এই ব্রাউজারে সর্বোচ্চ ১২টি প্যালেট রাখে।
আমার রঙগুলো অন্য স্ক্রিনে কেন ভিন্ন দেখায়?
স্ক্রিনগুলো উজ্জ্বলতা, রঙের সঠিকতা এবং রঙের প্রোফাইলে ভিন্ন হয়। হেক্স কোডগুলো রঙকে সংখ্যাতাত্ত্বিকভাবে বর্ণনা করে, তবে তা কীভাবে দেখাবে তা ডিসপ্লেতে নির্ভর করে। আপনার দর্শকরা যে ডিভাইসগুলো ব্যবহার করবেন, সেগুলোতে গুরুত্বপূর্ণ রঙগুলো পরীক্ষা করুন।
একটি প্যালেটে কতটি রঙ থাকা উচিত?
অনেক ডিজাইন পাঁচটি রঙের সাথে ভালোভাবে কাজ করে: একটি প্রধান রঙ, একটি বা দুটি সহায়ক রঙ, একটি হালকা পটভূমি টোন এবং একটি গাঢ় টেক্সট টোন। এই টুলটি আপনাকে ৩ থেকে ৮টি রঙ বেছে নিতে দেয়।
জেনারেটরটি কি বিনামূল্যে, এবং আমার ডেটা সংরক্ষিত আছে কি?
এটি বিনামূল্যে। প্যালেটগুলো আপনার ব্রাউজারে তৈরি হয়। সংরক্ষিত প্যালেটগুলো আপনার ডিভাইসের লোকাল স্টোরেজে থাকে এবং কখনোই আপলোড হয় না।
আমি কি একটি প্যালেটে লিঙ্ক করতে পারি?
হ্যাঁ। পেজের ঠিকানায় ?colors=1f3a5f-ff5733-00aa88 যোগ করুন, হাইফেন দিয়ে ২ থেকে ৮টি হেক্স কোড আলাদা করে, # চিহ্ন ছাড়া।
এই টুলটি ব্যবহারকারী মানুষদের কাছ থেকে
সমীক্ষা
মতামত লোড হচ্ছে…
চলতেই থাকো
বাক্সে আরও সরঞ্জাম
হোমপেজে আরও কয়েক ডজন বিনামূল্যের টুল রয়েছে, যেগুলির জন্য কোনো API কী প্রয়োজন হয় না।
কেস কনভার্টার
টেক্সটকে আপারকেস, ক্যামেলকেস, টাইটেলকেস, সনেক_কেস এবং আরও অনেক রূপে রূপান্তর করুন।
টুল খুলুনশব্দ গণক
টাইপ করার সময় শব্দ, অক্ষর, বাক্য এবং পড়ার সময় গণনা করুন।
টুল খুলুনশূন্যস্থান অপসারণকারী
অতিরিক্ত ফাঁকা স্থানগুলো মুছে ফেলুন এবং বিশৃঙ্খল লাইন ফাঁকগুলো পরিচ্ছন্ন করুন।
টুল খুলুনটেক্সট পার্থক্য পরীক্ষক
কি পরিবর্তন হয়েছে তা দেখতে দুটি পাঠ্য লাইন বাই লাইন তুলনা করুন।
টুল খুলুন