কালার প্যালেট জেনারেটর
নতুনcomplementary, analogous, triadic ও monochromatic প্যালেট তৈরি করুন।
Tint & shade scales (50–900)
WCAG contrast check
Contrast ratio of each color against white and black. AA needs 4.5:1 for normal text, AAA needs 7:1.
| Color | vs White | vs Black | Best text |
|---|
Runs entirely in your browser. Nothing is uploaded.
পাঁচ ভিন্ন উপায়ে কালার প্যালেট তৈরি করুন
এই কালার প্যালেট জেনারেটর একগাদা আলাদা টুলের বদলি। একটি র্যান্ডম কালার প্যালেট-এর জন্য Generate চাপুন, একটি বেস রঙ থেকে একটি কালার হারমনি ঠিক করুন, একটি ছবি বা ফটো থেকে রঙ টেনে আনুন, একটি একক হেক্স কোড-কে একটি সম্পূর্ণ স্কিমে প্রসারিত করুন, বা একটি কালার নাম বা শব্দ-কে একটি পুনরাবৃত্তিযোগ্য প্যালেটে পরিণত করুন। সংখ্যা ৩ থেকে ১০-এ সেট করুন, আপনার পছন্দের রঙগুলো লক করুন এবং বাকিগুলো পুনরায় তৈরি করুন — কোনো অ্যাকাউন্ট নেই এবং কিছুই আপনার ব্রাউজার ছেড়ে যায় না।
যেকোনো সোয়াচে ক্লিক করে এর মান কপি করুন, রিডআউট HEX, RGB এবং HSL-এর মধ্যে পাল্টান, এবং পুনর্বিন্যাস করতে সোয়াচগুলো টেনে আনুন। তাৎক্ষণিকভাবে একটি নতুন প্যালেট তৈরি করতে স্পেসবার চাপুন — Coolors যে ওয়ার্কফ্লো জনপ্রিয় করেছে, এখানে কোনো পেওয়াল ছাড়াই উপলব্ধ।
একটি ছবি, হেক্স কোড বা নাম থেকে রঙ বের করুন
একটি ছবি থেকে: একটি ফটো ড্রপ করুন এবং টুলটি একটি লুকানো HTML5 canvas-এ একটি median-cut কোয়ান্টাইজেশন অ্যালগরিদম ব্যবহার করে সবচেয়ে প্রধান এবং ভিজ্যুয়ালি স্বতন্ত্র রঙ বের করে — একটি প্রোডাক্ট শট, একটি ব্র্যান্ড ছবি, বা একটি মুড বোর্ডের সাথে একটি প্যালেট মেলানোর জন্য দরকারি। ছবিটি আপনার ডিভাইসেই থাকে এবং কখনও কোথাও আপলোড হয় না। Coolors এই ফিচারের জন্য Pro সাবস্ক্রাইবারদের চার্জ করে; এখানে এটি ফ্রি।
একটি হেক্স কোড থেকে: একটি ব্র্যান্ড রঙ পেস্ট করুন এবং এটিকে অ্যাঙ্কর হিসেবে রাখুন যখন জেনারেটর এর চারপাশে অ্যানালগাস, কমপ্লিমেন্টারি এবং টিন্ট/শেড সঙ্গী তৈরি করে। একটি নাম থেকে: যেকোনো শব্দ টাইপ করুন এবং একটি ডিটারমিনিস্টিক হ্যাশ প্যালেটকে সিড করে, তাই একই নাম সবসময় একই রঙ তৈরি করে — প্রতি রানে ভিন্ন ফলাফল দেওয়া AI-ভিত্তিক প্যালেট জেনারেটরের একটি নির্ভরযোগ্য অফলাইন বিকল্প।
প্রকৃত কালার থিওরির ওপর তৈরি কালার হারমনি
হারমনি মোড কালার হুইলের চারপাশে হিউ ঘুরিয়ে কালার থিওরি প্রয়োগ করে। কমপ্লিমেন্টারি রঙ সর্বোচ্চ কনট্রাস্টের জন্য ১৮০° দূরে থাকে; অ্যানালগাস রঙ একটি শান্ত, একীভূত অনুভূতির জন্য ±৩০°-এর মধ্যে থাকে; ট্রায়াডিক ১২০° দূরে তিনটি হিউ ব্যবহার করে; টেট্রাডিক ৯০°-এ চারটি ব্যবহার করে; স্প্লিট-কমপ্লিমেন্টারি ১৫০°/২১০°-এ কনট্রাস্ট ক্ল্যাশ নরম করে; এবং মনোক্রোমাটিক একটি হিউ রাখে এবং প্যালেট জুড়ে লাইটনেস পরিবর্তন করে।
প্রতিটি জেনারেট করা রঙের সাথে ৫০ থেকে ৯০০ পর্যন্ত একটি সম্পূর্ণ টিন্ট এবং শেড স্কেলও আসে — একটি বাস্তব UI ডিজাইন সিস্টেমে হোভার স্টেট, বর্ডার রঙ এবং ব্যাকগ্রাউন্ড ভ্যারিয়েন্টের জন্য প্রয়োজনীয় হালকা ও গাঢ় ধাপ।
UtiloKit কীভাবে Coolors, Adobe Color এবং Paletton-এর সাথে তুলনীয়
Coolors সবচেয়ে জনপ্রিয় প্যালেট টুল, একটি চমৎকার লক-অ্যান্ড-রিজেনারেট ওয়ার্কফ্লো এবং একটি বড় এক্সপ্লোর কমিউনিটিসহ। Coolors Pro ($৪/মাস) ইমেজ এক্সট্র্যাকশন, অ্যাডভান্সড এক্সপোর্ট এবং প্যালেট হিস্ট্রি একটি পেওয়ালের পেছনে আটকে রাখে। ফ্রি টায়ারে নেটিভ Tailwind এক্সপোর্ট নেই। Adobe Color WCAG অ্যাক্সেসিবিলিটি চেকিং এবং কালার হারমনি ভিজ্যুয়ালাইজেশন ভালোভাবে করে, কিন্তু প্যালেট সংরক্ষণের জন্য একটি ফ্রি Adobe অ্যাকাউন্ট প্রয়োজন, এবং এক্সপোর্ট ধাপে পৌঁছাতে আরও বেশি ক্লিক লাগে।
Paletton কালার থিওরিতে শক্তিশালী কিন্তু শুধু চারটি হারমনি টাইপ দেখায় এবং ইমেজ এক্সট্র্যাকশন অন্তর্ভুক্ত করে না। UtiloKit এই তিনটির মূল শক্তি একত্র করে — Coolors-স্টাইল লকিং, Adobe Color-এর WCAG প্যানেল, ইমেজ এক্সট্র্যাকশন এবং Tailwind/SCSS এক্সপোর্ট — কোনো অ্যাকাউন্ট, কোনো পেওয়াল, এবং টুলটিতে কোনো বিজ্ঞাপন ছাড়াই।
পছন্দের রঙ লক করুন এবং এগিয়ে যান
ভালো প্যালেট আসে ইটারেশন থেকে, একবার জেনারেশন থেকে নয়। একটি সোয়াচ লক করুন এবং এটি স্থির থাকে। আনলক করা সবকিছু Generate চাপলে বা Space চাপলে আবার তৈরি হয়। আপনার পছন্দের প্রধান রঙটি রাখুন, অ্যাকসেন্টগুলো এলোমেলো করুন, এবং কাজ করে এমন একটি সেটের দিকে সংকুচিত করুন — তারপর সরাসরি এক্সপোর্টে চলে যান।
আপনি একবারে একাধিক রঙ লক করতে পারেন। আপনার ব্র্যান্ড প্রাইমারি এবং একটি নিউট্রাল ব্যাকগ্রাউন্ড লক করুন, তারপর টুলটিকে অ্যাকসেন্ট সাজেস্ট করতে দিন। যেগুলো কাজ করে সেই অ্যাকসেন্ট একবার খুঁজে পেলে সেগুলো লক করুন, এবং সহায়ক টোনগুলো পুনরায় তৈরি করুন। এটি ঠিক প্রতিফলিত করে ডিজাইনাররা ম্যানুয়ালি কীভাবে প্যালেট তৈরি করেন, শুধু অনেক দ্রুত।
CSS, Tailwind, SCSS, JSON, PNG এবং একটি শেয়ারযোগ্য লিংকে এক্সপোর্ট করুন
প্যালেট প্রস্তুত হয়ে গেলে, আপনার প্রজেক্টের প্রয়োজন অনুযায়ী যেকোনো ফরম্যাটে এক্সপোর্ট করুন। CSS কাস্টম প্রপার্টির একটি :root ব্লক দেয়। Tailwind tailwind.config.js-এর জন্য একটি প্রস্তুত theme.extend.colors অবজেক্ট দেয়। SCSS Sass-সামঞ্জস্যপূর্ণ $variables দেয়। JSON JavaScript বা ডিজাইন টোকেন পাইপলাইনের জন্য HEX, RGB এবং HSL-এ প্রতিটি রঙ তালিকাভুক্ত করে। একটি ব্র্যান্ড ডকুমেন্ট বা প্রেজেন্টেশনের জন্য একটি PNG সোয়াচ শিট ডাউনলোড করুন।
বিল্ট-ইন WCAG কনট্রাস্ট চেকিং
একটি প্যালেট শেষ হয় না যতক্ষণ না এর ওপর টেক্সট পঠনযোগ্য হয়। কনট্রাস্ট প্যানেল প্রতিটি রঙের WCAG কনট্রাস্ট রেশিও সাদা এবং কালো টেক্সটের বিপরীতে দেখায়, AA এবং AAA পাস/ফেল ব্যাজসহ। WCAG 2.1 AA-তে সাধারণ টেক্সটের জন্য 4.5:1 এবং বড় টেক্সটের জন্য 3:1 প্রয়োজন। AAA-তে সাধারণ টেক্সটের জন্য 7:1 প্রয়োজন। বেশিরভাগ প্যালেট টুল এই ধাপ বাদ দেয় বা একটি প্রিমিয়াম টায়ারের পেছনে রাখে — এখানে এটি বিল্ট-ইন এবং আপনি সোয়াচ তৈরি বা পরিবর্তন করার সাথে সাথে রিয়েল টাইমে চলে।
কোনো সাইন-আপ নেই, কোনো আপলোড নেই, কিছুই আপনার ব্রাউজার ছেড়ে যায় না। প্রতিটি প্যালেট অপারেশন — র্যান্ডম জেনারেশন, ইমেজ এক্সট্র্যাকশন, হারমনি গণিত, কনট্রাস্ট গণনা, এবং এক্সপোর্ট — স্থানীয় JavaScript-এ চলে। ওয়েবসাইট ডিজাইন, ব্র্যান্ড আইডেন্টিটি, ইলাস্ট্রেশন, স্লাইড ডেক এবং সিজনাল বা বিয়ের প্যালেটের জন্য এই ফ্রি কালার প্যালেট জেনারেটর বুকমার্ক করুন।
কালার থিওরি এবং হারমনি নিয়ম: কালার হুইল আসলে কী বলে
১৭০৪ সালে, আইজ্যাক নিউটন দৃশ্যমান বর্ণালীকে একটি বৃত্তে সাজিয়েছিলেন — প্রথম কালার হুইল — প্রতিষ্ঠা করে যে হিউ সম্পর্ক সেই বৃত্তের চারপাশে কৌণিক দূরত্ব। একটি জেনারেটর যে প্রতিটি কালার হারমনি দেয় তা শুধু কোন কোণগুলো একত্র করতে হবে তার একটি নিয়ম। কমপ্লিমেন্টারি কালার ১৮০° দূরে থাকে এবং সর্বোচ্চ কনট্রাস্ট তৈরি করে কারণ তারা কোনো স্পেকট্রাল শক্তি শেয়ার করে না: নীল এবং কমলা একে অপরের অনুভূত তীব্রতা ওপরের দিকে ঠেলে দেয়। স্পোর্টস ব্র্যান্ডগুলো আক্রমণাত্মকভাবে এটি ব্যবহার করে — LA Lakers-এর বেগুনি এবং সোনালি প্রায়-কমপ্লিমেন্ট বেছে নেওয়া হয়েছে বিশেষভাবে যাতে অ্যারেনার আলোতে প্রতিটি রঙ অপরটিকে আরও উজ্জ্বল দেখায়।
অ্যানালগাস হারমনি একে অপরের ±৩০°-এর মধ্যে হিউ ব্যবহার করে, তাই তারা ওভারল্যাপিং স্পেকট্রাল কম্পোনেন্ট শেয়ার করে এবং কখনও ক্ল্যাশ করে না। প্রকৃতির ফটোগ্রাফি অ্যানালগাস স্কিমে পরিপূর্ণ: শরতের পাতা কমলা → অ্যাম্বার → হলুদ চলে; একটি ক্রান্তীয় রিফ সায়ান → টিল → নীল-সবুজ চলে। ট্রায়াডিক প্যালেট ব্যালেন্সসহ প্রাণবন্ততার জন্য ১২০° দূরে তিনটি হিউ স্পেস করে। স্প্লিট-কমপ্লিমেন্টারি একটি বেস রঙ নিয়ে ঠিক বিপরীতে আঘাত করার বদলে ১৫০° এবং ২১০°-এ পাশে রাখে। টেট্রাডিক (স্কয়ার) স্কিম ৯০° ব্যবধানে চারটি রঙ টানে। মনোক্রোমাটিক প্যালেট সম্পূর্ণভাবে হিউ পরিবর্তন এড়িয়ে যায়, শুধু একটি একক হিউতে স্যাচুরেশন এবং লাইটনেস-এর পরিবর্তন ব্যবহার করে একটি ফলাফলের জন্য যা সবসময় একীভূত এবং সবসময় মার্জিত।
এই নিয়মগুলো বোঝা একটি জেনারেটর ব্যবহারের পদ্ধতি পাল্টে দেয়। কোনো কিছু দুর্ঘটনাক্রমে ঠিক দেখানো পর্যন্ত পুনরায় জেনারেট করার বদলে, আপনি প্রজেক্টের আবেগগত রেজিস্টারের সাথে মেলে এমন হারমনি টাইপ বেছে নেন — শান্ত এবং প্রকৃতি-সংগত (অ্যানালগাস), সাহসী এবং স্পোর্টি (কমপ্লিমেন্টারি), প্রাণবন্ত এবং খেলাপ্রবণ (ট্রায়াডিক) — এবং তারপর সেই কাঠামোর মধ্যে ইটারেট করেন।
প্যালেট জেনারেশন অ্যালগরিদম আসলে কীভাবে কাজ করে
ভেতরে, প্রতিটি কালার হারমনি জেনারেটর হিউ রোটেশন গণিত করছে। একটি বেস হিউ অ্যাঙ্গেল H (০–৩৬০°) দিয়ে শুরু করুন, সঙ্গী হিউ পেতে হারমনির রোটেশন অফসেট প্রয়োগ করুন, তারপর প্রতিটি রঙকে HSL বা OKLCH কালার মডেলে এর প্যালেট রোল পূরণ করতে নিজস্ব স্যাচুরেশন এবং লাইটনেস দিন — প্রাইমারি, সেকেন্ডারি, অ্যাকসেন্ট, নিউট্রাল। একটি কমপ্লিমেন্টারি জোড়ার জন্য, জেনারেটর H এবং H+180 সেট করে। ট্রায়াডিকের জন্য, এটি H, H+120, H+240 তৈরি করে।
ডিজাইন সিস্টেম সরবরাহ করা সিস্টেম্যাটিক কালার স্কেল টিন্টিং এবং শেডিং দ্বারা তৈরি হয়: হালকা স্টপ তৈরি করতে একটি হিউকে সাদার সাথে মেশানো, গাঢ় স্টপের জন্য কালোর সাথে মেশানো, এবং টোন তৈরি করতে ধূসরের সাথে মেশানো। Tailwind CSS ৫০, ১০০, ২০০, ৩০০, ৪০০, ৫০০, ৬০০, ৭০০, ৮০০, ৯০০, এবং ৯৫০ নামের স্টপসহ একটি ১০-ধাপের স্কেল ব্যবহার করে।
HSL-ভিত্তিক স্কেলের একটি গুরুত্বপূর্ণ সমস্যা হলো HSL-এর L (লাইটনেস) চ্যানেল পারসেপচুয়ালি ইউনিফর্ম নয়: L=60-এ একটি হলুদ L=60-এ একটি নীলের চেয়ে অনেক বেশি উজ্জ্বল দেখায়, যদিও সংখ্যাগুলো অভিন্ন। CSS Color Level 4-এর পেছনের কালার মডেল OKLCH লাইটনেস, ক্রোমা এবং হিউকে একটি পারসেপচুয়ালি ইউনিফর্ম স্পেসে আলাদা করে: L-এ সমান সংখ্যাগত পার্থক্য উজ্জ্বলতায় সমান অনুভূত পার্থক্যে অনুবাদ করে।
ব্র্যান্ড কালার সিস্টেম এবং ডিজাইন টোকেন: সোয়াচ থেকে স্টাইলশিট পর্যন্ত
একটি একক প্যালেট হেক্স কোড শুধু একটি ব্র্যান্ড কালার সিস্টেমের শুরু। প্রিন্টে, রঙ নির্দিষ্ট করা হয় Pantone Matching System (PMS)-এ — একটি শারীরিক কালি স্ট্যান্ডার্ড যেখানে PMS 286 C হলো একটি UPS ট্রাকের নির্দিষ্ট নীল, প্রিন্টার বা কাগজের স্টক নির্বিশেষে। ডিজিটাল স্ক্রিনের জন্য, সমতুল্য হলো একটি sRGB হেক্স বা RGB ট্রিপলেট: সেই একই রয়্যাল ব্লুর জন্য #0032A0। Pantone-ম্যানেজড নয় এমন অফসেট প্রিন্টিংয়ের জন্য, রঙ CMYK-এ রূপান্তরিত হয়।
ডিজাইন টোকেন আর্কিটেকচার প্যালেট রঙকে সিম্যান্টিক ভ্যারিয়েবলে পরিণত করে। Google Material Design 3 primary, on-primary, primary-container, secondary, tertiary, error, surface, এবং outline-এর মতো রোল সংজ্ঞায়িত করে। কোডে, এটি CSS কাস্টম প্রপার্টি-তে ম্যাপ হয়: --color-primary: #3b82f6;, যা কম্পোনেন্টগুলো হার্ডকোড করার বদলে রেফার করে। ব্র্যান্ড রঙ পাল্টালে, একটি টোকেন আপডেট সর্বত্র প্রচারিত হয়।
ডার্ক মোড প্যালেট রঙের চেয়ে টোকেন কেন গুরুত্বপূর্ণ তার সবচেয়ে স্পষ্ট প্রমাণ। একটি টোকেন সিস্টেমে, --color-surface লাইট থিমে #ffffff এবং ডার্ক থিমে #1a1a1a হতে পারে — একই সিম্যান্টিক রোল, ভিন্ন মান, একটি একক @media (prefers-color-scheme: dark) ব্লক বা একটি ক্লাস টগল দিয়ে পাল্টানো। কম্পোনেন্টগুলোতে যদি হার্ডকোডেড #ffffff ব্যাকগ্রাউন্ড থাকত, ডার্ক মোডের জন্য প্রতিটি ফাইল স্পর্শ করতে হতো। টোকেন দিয়ে, সম্পূর্ণ থিম একটি নিয়মে পাল্টে যায়।
রঙের অ্যাক্সেসিবিলিটি: কনট্রাস্ট রেশিও, কালারব্লাইন্ডনেস এবং প্যালেট অডিটিং
WCAG 2.1 (Web Content Accessibility Guidelines) টেক্সট এবং এর ব্যাকগ্রাউন্ডের মধ্যে ন্যূনতম কনট্রাস্ট রেশিও নির্ধারণ করে: AA কমপ্লায়েন্সে সাধারণ আকারের টেক্সটের জন্য 4.5:1, বড় টেক্সটের জন্য 3:1 (১৮pt+ বা ১৪pt+ বোল্ড) বা UI কম্পোনেন্ট বাউন্ডারি, এবং AAA বর্ধিত কমপ্লায়েন্সের জন্য 7:1। এই রেশিওগুলো দুটি রঙের আপেক্ষিক লুমিন্যান্স থেকে গণনা করা হয় — মানুষের ফটোরিসেপ্টর লাল, সবুজ এবং নীল আলোতে কীভাবে সাড়া দেয় তা থেকে উদ্ভূত একটি ফর্মুলা।
প্রায় ৮% পুরুষ এবং ০.৫% নারীর কোনো না কোনো ধরনের কালার ভিশন ডেফিসিয়েন্সি রয়েছে। সবচেয়ে সাধারণ ধরন হলো লাল-সবুজ কালার ব্লাইন্ডনেস (ডিউটেরানোপিয়া বা প্রোটানোপিয়া), যেখানে চোখ শুধু হিউ দিয়ে লাল থেকে সবুজ আলাদা করতে পারে না এবং এর বদলে লুমিন্যান্স পার্থক্যের ওপর নির্ভর করে। একটি প্যালেট যা একই লাইটনেসের লাল এরর স্টেট এবং সবুজ সাকসেস স্টেট পাশাপাশি রাখে — যেমন ট্রাফিক-লাইট UI কনভেনশনে সাধারণ — এই ব্যবহারকারীদের জন্য সম্পূর্ণ অস্পষ্ট হয়ে যায়।
অ্যাক্সেসযোগ্য প্যালেট ডিজাইনের জন্য একটি ব্যবহারিক নিয়ম: আপনার প্যালেটে অন্তত ৬০–৭০% রঙ জোড়া WCAG AA কনট্রাস্ট থ্রেশহোল্ড পাস করা উচিত যখন একটি ব্যাকগ্রাউন্ড হিসেবে এবং অপরটি ফোরগ্রাউন্ড টেক্সট হিসেবে ব্যবহৃত হয়। এই জেনারেটরের বিল্ট-ইন কনট্রাস্ট প্যানেল এই রেশিওগুলো রিয়েল টাইমে সামনে আনে, আপনাকে চিহ্নিত করতে দেয় কোন সোয়াচগুলো টেক্সট বহন করতে পারে এবং কোনগুলো শুধু ব্যাকগ্রাউন্ড বা ডেকোরেটিভ-অনলি — যেকোনো প্যালেট প্রোডাকশনে পাঠানোর আগে অপরিহার্য অডিট ধাপ।
Frequently asked questions
সেরা ফ্রি কালার প্যালেট জেনারেটর কোনটি?
সেরা জেনারেটর কোনো অ্যাকাউন্ট, সাবস্ক্রিপশন বা সার্ভার-সাইড প্রসেসিং ছাড়াই আপনার প্রয়োজনীয় সবকিছু করে। এই টুল পাঁচ উপায়ে প্যালেট তৈরি করে — র্যান্ডম, কালার-হুইল হারমনি, একটি ছবি থেকে, একটি হেক্স কোড থেকে এবং একটি কালার নাম থেকে — রঙ লক করতে এবং বাকিগুলো পুনরায় তৈরি করতে দেয়, WCAG কনট্রাস্ট রেশিও চেক করে, এবং CSS, Tailwind, SCSS, JSON এবং PNG-তে এক্সপোর্ট করে। Coolors র্যান্ডম জেনারেশন এবং লকিং কভার করে কিন্তু ইমেজ এক্সট্র্যাকশন ও অ্যাডভান্সড এক্সপোর্টের জন্য একটি Pro অ্যাকাউন্ট ($৪/মাস) প্রয়োজন।
আমি কীভাবে শূন্য থেকে একটি কালার প্যালেট তৈরি করব?
একটি শুরুর বিন্দু বেছে নিন — একটি ছবি ড্রপ করুন, একটি হেক্স কোড টাইপ করুন, একটি রঙের নাম লিখুন, একটি হারমনি টাইপ বেছে নিন, বা একটি র্যান্ডম সেটের জন্য Generate চাপুন (বা Space চাপুন)। প্যালেট সাইজ ৩–১০ রঙে সমন্বয় করুন, যেগুলো রাখতে চান সেই সোয়াচগুলো লক করুন, এবং পুরো প্যালেট ঠিক না হওয়া পর্যন্ত বাকিগুলো পুনরায় তৈরি করুন। HEX, RGB বা HSL ফরম্যাটে এর মান কপি করতে যেকোনো সোয়াচে ক্লিক করুন, তারপর পুরো সেটটি CSS, Tailwind বা একটি PNG সোয়াচ শিটে এক্সপোর্ট করুন।
আমি কীভাবে একটি ছবি বা ফটো থেকে কালার প্যালেট তৈরি করব?
‘Image’ মোডে পাল্টান এবং একটি ফটো ড্রপ করুন (বা একটি বেছে নিতে browse ক্লিক করুন)। টুলটি ছবিটি একটি লুকানো HTML5 canvas-এ আঁকে, পিক্সেল ডেটা স্যাম্পল করে, এবং সবচেয়ে প্রধান ও ভিজ্যুয়ালি স্বতন্ত্র রঙ বের করতে একটি median-cut কোয়ান্টাইজেশন অ্যালগরিদম চালায়। একটি সমুদ্র সৈকতের ছবি একটি বালুকাময় বেইজ, একটি জলের নীল এবং একটি গভীর টিল দিতে পারে। সবকিছু স্থানীয়ভাবে Canvas API দিয়ে ঘটে — ছবিটি কখনও সার্ভার স্পর্শ করে না। Coolors ইমেজ এক্সট্র্যাকশনের জন্য একটি Pro সাবস্ক্রিপশন চার্জ করে; এখানে এটি ফ্রি।
কমপ্লিমেন্টারি, অ্যানালগাস এবং ট্রায়াডিক রঙের মধ্যে পার্থক্য কী?
এগুলো কালার হুইলে অবস্থানের ওপর ভিত্তি করে সম্পর্ক, হিউয়ের ডিগ্রিতে পরিমাপ করা। কমপ্লিমেন্টারি রঙ সর্বোচ্চ কনট্রাস্টের জন্য ১৮০° দূরে থাকে — নীল এবং কমলা, লাল এবং সবুজ। অ্যানালগাস রঙ একটি শান্ত, একীভূত লুকের জন্য ±৩০°-এর মধ্যে প্রতিবেশী থাকে — নীল, নীল-সবুজ এবং টিল। ট্রায়াডিক রঙ একটি ব্যালেন্সড, প্রাণবন্ত স্কিমের জন্য সমানভাবে ১২০° ব্যবধানে থাকা তিনটি হিউ। হারমনি মোড এই সবকিছু তৈরি করে — টেট্রাডিক (৯০°-এ চারটি রঙ), স্প্লিট-কমপ্লিমেন্টারি (১৫০°/২১০°), এবং মনোক্রোমাটিক (একটি হিউ, বিভিন্ন লাইটনেস)-সহ — আপনার বেছে নেওয়া যেকোনো বেস রঙ থেকে।
একটি প্যালেটে কতগুলো রঙ থাকা উচিত?
বেশিরভাগ কার্যকর প্যালেট ৩ থেকে ৫টি রঙ ব্যবহার করে: একটি প্রধান রঙ, একটি বা দুটি সহায়ক রঙ, এবং একটি অ্যাকসেন্ট। ৬০-৩০-১০ নিয়ম একটি ডিজাইনে ৬০% প্রধান, ৩০% সেকেন্ডারি এবং ১০% অ্যাকসেন্ট প্রস্তাব করে। UI ডিজাইনের জন্য, ৫টি বেস রঙ তৈরি করুন এবং হোভার স্টেট, বর্ডার এবং ব্যাকগ্রাউন্ডের জন্য প্রতি-রঙ টিন্ট ও শেড স্কেল (৫০–৯০০ ধাপ) ব্যবহার করুন। এই টুল আপনাকে ৩ থেকে ১০টি সোয়াচ পর্যন্ত প্যালেট সাইজ সেট করতে দেয়।
আমি কীভাবে আমার ওয়েবসাইট বা ব্র্যান্ডের জন্য একটি প্যালেট তৈরি করব?
আপনার ব্র্যান্ডের প্রাইমারি রঙ থেকে শুরু করুন: একটি সমন্বিত সেট তৈরি করতে এর হেক্স ‘From hex’ মোডে পেস্ট করুন, অথবা এর চারপাশে একটি কমপ্লিমেন্টারি বা অ্যানালগাস স্কিম তৈরি করতে হারমনি মোড ব্যবহার করুন। হোভার স্টেট, বর্ডার রঙ এবং ব্যাকগ্রাউন্ড ভ্যারিয়েন্ট থাকার জন্য প্রতিটি রঙের জন্য টিন্ট/শেড স্কেল (৫০–৯০০) তৈরি করুন। টেক্সট-অন-ব্যাকগ্রাউন্ড কম্বিনেশন WCAG AA পাস করে কিনা তা নিশ্চিত করতে কনট্রাস্ট প্যানেল চেক করুন। তারপর CSS ভ্যারিয়েবল বা একটি Tailwind কনফিগে এক্সপোর্ট করুন।
আমি কীভাবে একটি প্যালেট CSS, Tailwind বা SCSS-এ এক্সপোর্ট করব?
প্যালেট তৈরি করার পর Export বাটন ব্যবহার করুন। ‘CSS’ কাস্টম প্রপার্টির একটি :root ব্লক কপি করে যেমন --color-1: #2563EB;, একটি স্টাইলশিটে পেস্ট করার জন্য প্রস্তুত। ‘Tailwind’ tailwind.config.js-এর জন্য প্রস্তুত palette-1 থেকে palette-n কী-সহ একটি theme.extend.colors অবজেক্ট কপি করে। ‘SCSS’ $color-n ভ্যারিয়েবল ডিক্লেয়ারেশন কপি করে। ‘JSON’ JavaScript বা ডিজাইন টোকেন পাইপলাইনে ব্যবহারের জন্য HEX, RGB এবং HSL মানসহ প্রতিটি রঙকে একটি অবজেক্ট হিসেবে এক্সপোর্ট করে।
আমার প্যালেট WCAG-এর জন্য অ্যাক্সেসিবল কিনা তা আমি কীভাবে চেক করব?
বিল্ট-ইন কনট্রাস্ট প্যানেল সাদা এবং কালো টেক্সটের বিপরীতে প্রতিটি রঙের কনট্রাস্ট রেশিও দেখায়, AA এবং AAA ব্যাজসহ। WCAG 2.1-এ সাধারণ-আকারের টেক্সটের জন্য (AA) অন্তত 4.5:1, বড় টেক্সটের জন্য (AA) 3:1, এবং বর্ধিত AAA কমপ্লায়েন্সের জন্য 7:1 রেশিও প্রয়োজন। উদাহরণস্বরূপ, #2563EB (মিডিয়াম নীল) সাদার ওপর 5.17:1 — AA পাস করে। #F59E0B (অ্যাম্বার) সাদার ওপর প্রায় 1.97:1 — AA ফেল করে এবং পরিবর্তে গাঢ় টেক্সট দরকার।
এটি Coolors এবং Adobe Color-এর সাথে কীভাবে তুলনীয়?
Coolors সবচেয়ে জনপ্রিয় প্যালেট জেনারেটর এবং একটি সলিড লকিং/রিজেনারেটিং ওয়ার্কফ্লো, কীবোর্ড শর্টকাট এবং একটি বিস্তৃত এক্সপ্লোর সেকশন রয়েছে। মূল সমস্যা: ইমেজ এক্সট্র্যাকশন এবং Tailwind এক্সপোর্টের মতো মূল ফিচারের জন্য একটি Coolors Pro অ্যাকাউন্ট ($৪/মাস) প্রয়োজন। Adobe Color চমৎকার কালার হারমনি এবং WCAG চেক করে কিন্তু প্যালেট সংরক্ষণের জন্য একটি Adobe অ্যাকাউন্ট প্রয়োজন, এবং ইন্টারফেস এক্সপোর্টে পৌঁছাতে ধীর। UtiloKit আপনাকে Coolors-স্টাইল ওয়ার্কফ্লো (লক, স্পেস-টু-জেনারেট) প্লাস ইমেজ এক্সট্র্যাকশন, হারমনি মোড, WCAG কনট্রাস্ট চেকিং এবং Tailwind/SCSS এক্সপোর্ট দেয় — কোনো অ্যাকাউন্ট বা পেমেন্ট ছাড়াই।
মনোক্রোমাটিক প্যালেট কী এবং কখন এটি ব্যবহার করা উচিত?
একটি মনোক্রোমাটিক প্যালেট একটি হিউ ব্যবহার করে স্যাচুরেশন এবং লাইটনেস পরিবর্তন করে টিন্ট (হালকা) এবং শেড (গাঢ়) তৈরি করে। উদাহরণস্বরূপ, #1E3A8A, #2563EB, #60A5FA এবং #BFDBFE সবগুলোই বিভিন্ন লাইটনেস লেভেলে একই নীল হিউ শেয়ার করে। এটি সবচেয়ে ঝুঁকিমুক্ত কালার স্কিম কারণ প্রতিটি রঙ স্বয়ংক্রিয়ভাবে হারমোনাইজ করে — ক্ল্যাশ করার কোনো ঝুঁকি নেই। মিনিমাল, মার্জিত ডিজাইনের জন্য, একটি একক-ব্র্যান্ড উপস্থিতি প্রয়োজন এমন কম্পোনেন্টের জন্য, বা একটি UI-এর প্রাইমারি কালার র্যাম্পের বেস হিসেবে এটি ব্যবহার করুন।
Coolors-এর মতো আমি কি একটি রঙ লক করে বাকিগুলো পুনরায় তৈরি করতে পারি?
হ্যাঁ — এটি ঠিক Coolors-স্টাইল ওয়ার্কফ্লো। সেই রঙকে জায়গায় পিন করতে যেকোনো সোয়াচের লক আইকনে ক্লিক করুন। তারপর Generate (বা স্পেসবার) চাপুন এবং শুধু আনলক করা সোয়াচগুলো পরিবর্তন হয়। পুরো প্যালেট ঠিক না মনে হওয়া পর্যন্ত আপনার পছন্দের সোয়াচগুলো লক করতে এবং বাকিগুলো পুনরায় তৈরি করতে থাকুন, তারপর সেটি এক্সপোর্ট করুন। এই ফিচারটি এখানে ফ্রি; Coolors পেইড-টায়ার এক্সপোর্টের পেছনে এটি গেট করে রাখে।
এই কালার প্যালেট জেনারেটর কি iPhone এবং Android-এ কাজ করে?
হ্যাঁ — এটি সম্পূর্ণ রেসপন্সিভ এবং iPhone Safari, Android Chrome এবং সব আধুনিক মোবাইল ব্রাউজারে কাজ করে। কালার সোয়াচ, লক মেকানিক এবং এক্সপোর্ট বাটন সবই বড় ট্যাপ টার্গেটসহ টাচ-ফ্রেন্ডলি। ক্যামেরা রোল থেকে ইমেজ এক্সট্র্যাকশন মোবাইলে ফাইল পিকারের মাধ্যমে কাজ করে। রিজেনারেট করতে স্পেসবার শর্টকাটের পাশাপাশি টাচস্ক্রিনের জন্য একটি Generate বাটনও রয়েছে। WCAG কনট্রাস্ট চেকিং, হারমনি মোড এবং সব এক্সপোর্ট ফরম্যাট মোবাইলে ডেস্কটপের মতোই অভিন্নভাবে কাজ করে।
Related tools
সব টুল দেখুন
নতুন CSS Grid প্লেগ্রাউন্ড
লাইভ প্রিভিউ ও CSS সহ গ্রিড কলাম, gap ও অ্যালাইনমেন্ট সমন্বয় করুন।
নতুন Glassmorphism জেনারেটর
একটি ফ্রস্টেড-গ্লাস কার্ড ডিজাইন করুন এবং লাইভ প্রিভিউ সহ CSS কপি করুন।
নতুন CSS Text-Shadow জেনারেটর
লাইভ প্রিভিউ সহ একটি CSS text shadow সমন্বয় করুন এবং কোড কপি করুন।
নতুন কালার মিক্সার
যেকোনো অনুপাতে দুটি রঙ মিশ্রিত করুন এবং ফলাফল বা যেকোনো ধাপ কপি করুন।
নতুন ইমেজ কালার পিকার
ছবি থেকে যেকোনো রং বেছে নিন এবং এর প্রধান প্যালেট HEX, RGB ও HSL হিসেবে বের করুন।
নতুন Pixel Art Maker
Draw pixel art on a customizable grid, pick colors, and export as PNG — in your browser.