Color Token Generator
নতুনGenerate a full design-token scale (50–950 shades) from a single base color — CSS, Tailwind or JSON.
Runs entirely in your browser. Nothing is uploaded.
প্রতিটি ডিজাইন সিস্টেমে একটি কালার স্কেল কেন প্রয়োজন
একটি কালার স্কেল একটি সামঞ্জস্যপূর্ণ ভিজ্যুয়াল ভাষার মেরুদণ্ড। এটি ছাড়া, ডিজাইনার এবং ডেভেলপাররা তাৎক্ষণিক সিদ্ধান্ত নেন — “হোভারের জন্য একটু গাঢ় নীল” বা “কার্ড ব্যাকগ্রাউন্ডের জন্য খুব হালকা ভার্সন” — যা কোনো সিস্টেম্যাটিক সম্পর্ক ছাড়া প্রায় একই রকম দেখতে ডজন খানেক হেক্স মান তৈরি করে। সময়ের সাথে এটি এমন একটি কোডবেস তৈরি করে যা একবারে আপডেট করা অসম্ভব একগাদা একবার-ব্যবহারের রঙে ভরা।
একটি সঠিকভাবে তৈরি ১১-স্টপ স্কেল এটি সমাধান করে: হালকা স্টপ (৫০–২০০) টিন্টেড সারফেস এবং ব্যাকগ্রাউন্ডে কাজ করে, মিড স্টপ (৩০০–৬০০) বাটন, লিংক এবং ফোকাস রিংয়ের মতো ইন্টারঅ্যাকটিভ উপাদান বহন করে, এবং গাঢ় স্টপ (৭০০–৯৫০) টেক্সট এবং উচ্চ-কনট্রাস্ট বর্ডার সামলায়। প্রতিটি সিদ্ধান্ত স্কেলে ফিরে যায়, এবং ব্র্যান্ড রঙ পাল্টানো মানে স্টাইলশিটে শত শত হেক্স কোড খোঁজার বদলে একটি বেস মান আপডেট করা।
Tailwind কালার স্কেল কনভেনশন
Tailwind CSS ১১-স্টপ সাংখ্যিক নামকরণ কনভেনশন জনপ্রিয় করেছে — ৫০, ১০০, ২০০ থেকে ৯০০, ৯৫০ — এবং এটি এখন Radix UI, shadcn/ui, Material Design 3 এবং বেশিরভাগ আধুনিক কম্পোনেন্ট লাইব্রেরি ইকোসিস্টেম কর্তৃক স্ট্যান্ডার্ড হিসেবে গৃহীত। সুবিধাটি হলো অনুমানযোগ্যতা: এই সিস্টেমগুলোর যেকোনোটি ব্যবহার করা একজন ডেভেলপার সাথে সাথে জানেন যে একটি ৫০০-লেভেল টোকেন মিড-রেঞ্জ বেস রঙ, একটি ১০০-লেভেল টোকেন একটি খুব হালকা টিন্ট, এবং একটি ৮০০-লেভেল টোকেন হালকা ব্যাকগ্রাউন্ডে ব্যবহারের জন্য একটি গাঢ় শেড।
এই টুল এমন স্কেল তৈরি করে যা Tailwind-এর বিল্ট-ইন প্যালেটের (নীল, লাল, সবুজ, ইত্যাদি) সাথে ভিজ্যুয়ালি সামঞ্জস্যপূর্ণ, তাই একটি কাস্টম ব্র্যান্ড রঙ যোগ করা সহজ যা Tailwind-এর ডিফল্টের পাশাপাশি স্বাভাবিকভাবে একীভূত হয়। Tailwind এক্সপোর্ট ফরম্যাট ঠিক তাই যা tailwind.config.js-এ theme.extend.colors আশা করে।
WCAG কনট্রাস্ট রেশিও বোঝা
একটি টেক্সট রঙ এবং এর ব্যাকগ্রাউন্ডের মধ্যে কনট্রাস্ট রেশিও তাদের আপেক্ষিক লুমিন্যান্স থেকে গণনা করা হয় — মানুষের চোখে প্রতিটি রঙ কতটা উজ্জ্বল দেখায় তার একটি পরিমাপ। WCAG ফর্মুলা হলো (L1 + 0.05) / (L2 + 0.05), যেখানে L1 হালকা রঙের লুমিন্যান্স এবং L2 গাঢ় রঙের। ফলাফল 1:1 (অভিন্ন রঙ, কোনো কনট্রাস্ট নেই) থেকে 21:1 (সাদা ব্যাকগ্রাউন্ডে কালো টেক্সট, সর্বোচ্চ কনট্রাস্ট) পর্যন্ত হয়।
WCAG AA-তে সাধারণ টেক্সটের জন্য 4.5:1 এবং বড় টেক্সটের (১৮pt+) জন্য 3:1 প্রয়োজন। WCAG AAA-তে সাধারণ টেক্সটের জন্য 7:1 প্রয়োজন। এই টুলে, প্রতিটি সোয়াচের সাদা-টেক্সট এবং কালো-টেক্সট কনট্রাস্ট রেশিও গণনা করা হয় এবং W✓ ও B✓ ব্যাজ হিসেবে দেখানো হয়। মিড-স্কেল স্টপ (৪০০–৬০০) সাধারণত উভয় থ্রেশহোল্ডে ফেল করে — এগুলো ডেকোরেটিভ ফিল এবং ইন্টারঅ্যাকটিভ অ্যাকসেন্টের জন্য ডিজাইন করা, টেক্সট ব্যাকগ্রাউন্ডের জন্য নয়।
কালার স্পেস: HSL, OKLCH এবং কেন এটি গুরুত্বপূর্ণ
ঐতিহ্যবাহী প্যালেট জেনারেটরগুলো HSL-এ কাজ করে — হিউ, স্যাচুরেশন, লাইটনেস। HSL স্বজ্ঞাত এবং ভালোভাবে সমর্থিত, কিন্তু পারসেপচুয়ালি নন-ইউনিফর্ম: একই সংখ্যাগত লাইটনেস ধাপ হিউয়ের ওপর নির্ভর করে নাটকীয়ভাবে ভিন্ন দেখায়। ৫০% থেকে ৬০% লাইটনেসে যাওয়া নীলের জন্য একটি বড় লাফ মনে হয় কিন্তু হলুদের জন্য একটি ক্ষুদ্র ধাপ, কারণ মানুষের চোখ বর্ণালী জুড়ে রঙ ভিন্নভাবে অনুভব করে।
OKLCH একটি পারসেপচুয়ালি ইউনিফর্ম কালার স্পেস যেখানে সমান সংখ্যাগত লাইটনেস ধাপ হিউ নির্বিশেষে মানুষের চোখে সমান দেখায়। Tailwind CSS v4 এই কারণে অভ্যন্তরীণভাবে OKLCH-এ স্যুইচ করেছে। একটি প্যালেট জেনারেটরের জন্য, OKLCH এমন স্কেল তৈরি করে যেখানে প্রতিটি স্টপ সত্যিকারভাবে হালকা বা গাঢ়ের দিকে একটি সমান ধাপের মতো দেখায় — অ্যাক্সেসিবল প্যালেট ডিজাইনের জন্য বিশেষভাবে মূল্যবান।
CSS, Tailwind, SCSS, JSON এবং DTCG-তে এক্সপোর্ট করা
CSS Variables এক্সপোর্ট :root { }-এর ভেতরে --color-N নামকরণ প্যাটার্ন ব্যবহার করে। Tailwind এক্সপোর্ট সরাসরি tailwind.config.js-এর theme.extend.colors-এ ড্রপ হয় — ‘color’-কে আপনার টোকেন নামে (যেমন ‘primary’ বা ‘brand’) রিনেম করুন। SCSS এক্সপোর্ট Sass এবং Less-সামঞ্জস্যপূর্ণ $color-N ভ্যারিয়েবল সিনট্যাক্স ব্যবহার করে। JSON এক্সপোর্ট W3C DTCG টোকেন ফরম্যাট অনুসরণ করে এবং Style Dictionary, Theo, Supernova, এবং আধুনিক টোকেন পাইপলাইন ইকোসিস্টেমের যেকোনো টুলের সাথে সামঞ্জস্যপূর্ণ।
সব চারটি ফরম্যাট একই ১১টি হেক্স মান আউটপুট দেয়, তাই জেনারেশনের পর সেগুলোর মধ্যে পাল্টাতে কোনো পরিবর্তন প্রয়োজন হয় না। ক্লিপবোর্ডে সরাসরি এর হেক্স মান কপি করতে যেকোনো একক সোয়াচে ক্লিক করুন — একটি Figma ডিজাইন ফাইলের জন্য একটি নির্দিষ্ট শেড দরকার হলে, একটি একবারের ইনলাইন স্টাইল, বা একটি সম্পূর্ণ এক্সপোর্ট না চালিয়ে একটি দ্রুত কালার রেফারেন্স দরকার হলে দরকারি।
এটি Coolors, Adobe Color এবং Material Design Color Tool-এর সাথে কীভাবে তুলনীয়
Coolors.co একটি প্যালেট ডিসকভারি টুল যা র্যান্ডম ৫-রঙের কম্বিনেশন তৈরির জন্য ডিজাইন করা। এটি অনুপ্রেরণার জন্য চমৎকার কিন্তু টোকেন স্কেল তৈরি করে না, Tailwind কনফিগ আউটপুট দেয় না, এবং প্রতি-সোয়াচ WCAG কনট্রাস্ট ব্যাজ দেখায় না। আপনি হেক্স মান এক্সপোর্ট করতে পারেন, কিন্তু আপনি পাচ্ছেন পাঁচটি স্বতন্ত্র রঙ — একটি একক হিউ থেকে একটি স্ট্রাকচার্ড ডার্ক-টু-লাইট র্যাম্প নয়।
Adobe Color একটি কালার হুইল থেকে কালার হারমনি জেনারেশন এবং কিছু এক্সপোর্ট অপশন দেয়, কিন্তু প্যালেট সংরক্ষণ ও এক্সপোর্ট করার জন্য একটি Adobe অ্যাকাউন্ট প্রয়োজন। এটি একটি Tailwind-সামঞ্জস্যপূর্ণ কালার স্কেল বা DTCG JSON তৈরি করে না, এবং এতে প্রতি-স্টপ কনট্রাস্ট রেশিও ডিসপ্লের অভাব রয়েছে।
Google-এর Material Design Color Tool একটি ১০-স্টপ স্কেল তৈরি করে (৫০ স্টপ অনুপস্থিত) এবং বিশেষভাবে Material Design থিমিংয়ের জন্য ডিজাইন করা — আউটপুট Tailwind বা অন্য ইকোসিস্টেমে পরিষ্কারভাবে ম্যাপ হয় না। এতে DTCG এবং SCSS এক্সপোর্ট ফরম্যাটেরও অভাব রয়েছে।
এই টুল একটি সম্পূর্ণ ১১-স্টপ স্কেল তৈরি করে, প্রতিটি সোয়াচে WCAG W✓/B✓ ব্যাজ দেখায়, চারটি ফরম্যাটে এক্সপোর্ট করে, এবং কোনো লগইন প্রয়োজন হয় না। সবকিছু আপনার ব্রাউজারে চলে — কোনো কালার ডেটা কোনো সার্ভারে আপলোড হয় না।
ডিজাইন টোকেন: ধারণা এবং তিন-স্তরের মডেল
ডিজাইন টোকেন ২০১৪ সালে জিনা অ্যান কর্তৃক Salesforce-এর Lightning Design System-এর উন্নয়নের সময় প্রবর্তিত হয়েছিল — হার্ড-কোডেড মানের বদলে ডেটা হিসেবে সংরক্ষিত ক্ষুদ্রতম, অবিভাজ্য ডিজাইন সিদ্ধান্ত হিসেবে সংজ্ঞায়িত। টোকেনের আগে, #3b82f6-এর মতো রঙের মান হাজার হাজার CSS ফাইল জুড়ে ছড়িয়ে ছিল। ব্র্যান্ড রঙ পাল্টানো মানে সম্পূর্ণ কোডবেস জুড়ে একটি ফাইন্ড-অ্যান্ড-রিপ্লেস — একটি ত্রুটিপ্রবণ প্রক্রিয়া যা অনিবার্যভাবে প্রোডাক্টের কোণে পুরনো মান রেখে যেত। টোকেন এটি সমাধান করে মানকে সিম্যান্টিক নাম দিয়ে যা একটি জায়গায় আপডেট করা যায় এবং স্বয়ংক্রিয়ভাবে সর্বত্র প্রচারিত হয়।
শিল্পে একটি তিন-স্তরের টোকেন আর্কিটেকচার-এ ঐকমত্য হয়েছে। প্রথম স্তর — গ্লোবাল বা প্রিমিটিভ টোকেন — কোনো সিম্যান্টিক অর্থ ছাড়া কাঁচা মান সংরক্ষণ করে: color-blue-500: #3b82f6। দ্বিতীয় স্তর — সিম্যান্টিক টোকেন — প্রিমিটিভ স্তরে প্রসঙ্গ-ভিত্তিক অ্যালিয়াস তৈরি করে: color-action: {color-blue-500}। তৃতীয় স্তর — কম্পোনেন্ট টোকেন — সিম্যান্টিক টোকেনগুলোকে নির্দিষ্ট UI উপাদানে ম্যাপ করে: button-background: {color-action}।
এই তিন-স্তরের মডেলই একটি কালার স্কেল জেনারেটরকে শুধু একটি প্যালেট টুলের বদলে একটি টোকেন জেনারেটর বানায়। এই টুল তৈরি করা ১১-স্টপ স্কেল হলো প্রিমিটিভ স্তর। আপনার ডিজাইন সিস্টেমের সিম্যান্টিক স্তর সিদ্ধান্ত নেয় কোন স্টপ --color-primary হবে — এবং সেই সিদ্ধান্তগুলো কম্পোনেন্ট কোড স্পর্শ না করেই যেকোনো সময় পাল্টানো যায়।
ডিজাইন টোকেন ইকোসিস্টেম: Style Dictionary, DTCG এবং Figma Variables
Style Dictionary, ২০১৭ সালে Amazon কর্তৃক ওপেন-সোর্স করা, ডিজাইন টোকেনকে একটি প্ল্যাটফর্ম-নিরপেক্ষ JSON ফরম্যাট থেকে প্ল্যাটফর্ম-নির্দিষ্ট আউটপুটে রূপান্তরের জন্য সবচেয়ে বেশি ব্যবহৃত টুল: CSS কাস্টম প্রপার্টি, SCSS ভ্যারিয়েবল, iOS-এর জন্য Swift কনস্ট্যান্ট, Android XML রিসোর্স ফাইল, এবং JavaScript/TypeScript মডিউল। এই টুল থেকে এক্সপোর্ট করা একটি DTCG JSON ফাইল একবারে সব প্ল্যাটফর্মের টোকেন ফাইল তৈরি করতে Style Dictionary-তে ফিড করা যায়।
২০২০ সাল থেকে সক্রিয় W3C Design Token Community Group (DTCG) স্পেসিফিকেশন টোকেন ফাইল ফরম্যাট স্ট্যান্ডার্ডাইজ করে যাতে Figma, Style Dictionary, Supernova, Theo এবং অন্যান্য টুল কাস্টম রূপান্তর ছাড়াই একই JSON ব্যবহার করতে পারে। DTCG ফরম্যাট প্রতিটি টোকেনে একটি $type অ্যানোটেশন যুক্ত করে — কালার মানের জন্য "$type": "color" — যা টুলগুলোকে টোকেন সঠিকভাবে যাচাই ও রূপান্তর করতে দেয়। এই কালার স্কেল জেনারেটর থেকে JSON এক্সপোর্ট ঠিক DTCG স্কিমা অনুসরণ করে।
২০২৩ সালে চালু হওয়া Figma Variables হলো Figma-এর নিজস্ব টোকেন সিস্টেম। ডিজাইনাররা সরাসরি Figma ফাইলে প্রিমিটিভ, সিম্যান্টিক এবং কম্পোনেন্ট কালার টোকেন সংজ্ঞায়িত করতে পারেন এবং কম্পোনেন্ট জুড়ে রেফার করতে পারেন — একই তিন-স্তরের মডেল, কিন্তু ডিজাইন টুলের ভেতরে বাস করে। Figma Variables প্লাগইনের মাধ্যমে কোডে এক্সপোর্ট হয় যা DTCG-সামঞ্জস্যপূর্ণ JSON আউটপুট দেয়, লুপ সম্পূর্ণ করে।
রানটাইম টোকেন হিসেবে CSS কাস্টম প্রপার্টি
CSS কাস্টম প্রপার্টি — CSS ভ্যারিয়েবলও বলা হয় — ব্রাউজারে রানটাইমে ডিজাইন টোকেন বাস্তবায়নের নেটিভ ব্যবস্থা। একটি টোকেন :root সিলেক্টরে --color-primary: #3b82f6; হিসেবে ডিক্লেয়ার করা হয় এবং স্টাইলশিটে যেকোনো জায়গায় background-color: var(--color-primary); দিয়ে ব্যবহার করা হয়। SCSS বা Less ভ্যারিয়েবলের বিপরীতে (যা কম্পাইল টাইমে রেজলভ হয় এবং আউটপুট CSS-এ অদৃশ্য হয়ে যায়), কাস্টম প্রপার্টি লাইভ DOM-এ বিদ্যমান থাকে এবং রানটাইমে JavaScript দিয়ে পড়া ও পরিবর্তন করা যায়।
কাস্টম প্রপার্টি স্বাভাবিক CSS ক্যাসকেড এবং ইনহেরিটেন্স নিয়ম অনুসরণ করে — এগুলো যেকোনো সিলেক্টরে স্কোপ করা যায় এবং সেই স্কোপের ভেতরে সবকিছুর জন্য রুট ডেফিনিশন ওভাররাইড করবে। ডার্ক মোড হলো ক্যানোনিক্যাল ব্যবহারের ক্ষেত্র: :root-এ --color-background: #ffffff; ডিক্লেয়ার করুন এবং @media (prefers-color-scheme: dark)-এর ভেতরে এটি ওভাররাইড করুন। var(--color-background) ব্যবহার করা প্রতিটি কম্পোনেন্ট কম্পোনেন্ট কোড না পাল্টিয়েই স্বয়ংক্রিয়ভাবে ওভাররাইডে সাড়া দেয়।
@property নিয়ম (CSS Houdini) কাস্টম প্রপার্টিকে আরও প্রসারিত করে: একটি প্রপার্টিকে syntax: '<color>' হিসেবে ডিক্লেয়ার করে, ব্রাউজার এটিকে একটি টেক্সট প্রতিস্থাপনের বদলে একটি টাইপড কালার মান হিসেবে বিবেচনা করে। এটি কালার টোকেনের CSS ট্রানজিশন এবং অ্যানিমেশন আনলক করে — টাইপড কাস্টম প্রপার্টিও পারফরম্যান্স উন্নত করে রি-পার্সিং বাদ দিয়ে এবং CSS color-mix() ও oklch() ফাংশনকে সরাসরি টোকেন মানের ওপর কাজ করতে দেয়।
সিম্যান্টিক নামকরণ কনভেনশন এবং বাস্তব-বিশ্বের কালার সিস্টেম
সবচেয়ে বিপজ্জনক টোকেন নামকরণ প্যাটার্ন হলো নামাঙ্কিত-রঙ টোকেন: --color-blue: #0000ff। সংজ্ঞার সময় এগুলো স্পষ্ট মনে হয় কিন্তু ব্র্যান্ড বিকশিত হওয়ার মুহূর্তেই মিথ্যা হয়ে যায়। প্রাইমারি অ্যাকশন কালার যদি নীল থেকে টিলে পাল্টায়, তাহলে --color-blue রেফার করা প্রতিটি কম্পোনেন্ট এখন ভুল মান পায়। সমাধান হলো সিম্যান্টিক রোল: --color-primary, --color-secondary, --color-success, --color-warning, --color-error, --color-neutral। এগুলো চেহারা নয়, উদ্দেশ্য জানায়, এবং প্যালেট পাল্টালেও সঠিক থাকে।
প্রোডাকশন ডিজাইন সিস্টেম সারফেস/কনটেন্ট প্যাটার্ন দিয়ে সিম্যান্টিক নামকরণকে আরও প্রসারিত করে। সারফেস টোকেন UI-এর ব্যাকগ্রাউন্ড শ্রেণিবিন্যাসের স্তর বর্ণনা করে: --color-surface-default, --color-surface-raised (কার্ড, ড্রপডাউন), --color-surface-overlay (মোডাল, পপওভার)। কনটেন্ট টোকেন ওপরের টেক্সট ও আইকন স্তর বর্ণনা করে: --color-content-primary, --color-content-secondary, --color-content-disabled।
Radix UI-এর কালার সিস্টেম এই পদ্ধতির সবচেয়ে বেশি অধ্যয়ন করা রেফারেন্স বাস্তবায়ন। এটি ১২-ধাপের কালার স্কেল সংজ্ঞায়িত করে যেখানে প্রতিটি ধাপ সংখ্যা একটি সুস্পষ্ট সিম্যান্টিক রোল বহন করে: পেজ এবং কম্পোনেন্ট ব্যাকগ্রাউন্ডের জন্য ধাপ ১–২, ইন্টারঅ্যাকটিভ UI উপাদান ব্যাকগ্রাউন্ডের জন্য ধাপ ৩–৫, বর্ডার ও সেপারেটরের জন্য ধাপ ৬–৮, সলিড ইন্টারঅ্যাকটিভ ফিলের জন্য ধাপ ৯–১০, এবং অ্যাক্সেসিবল টেক্সটের জন্য ধাপ ১১–১২। এই টুল তৈরি করা ১১-স্টপ স্কেল (৫০ থেকে ৯৫০) Radix ১২-ধাপের মডেলের সাথে ঘনিষ্ঠভাবে ম্যাপ হয়।
Frequently asked questions
ডিজাইন টোকেন কী?
ডিজাইন টোকেন হলো নামাঙ্কিত ভ্যারিয়েবল যা ভিজ্যুয়াল ডিজাইন সিদ্ধান্ত — রঙ, স্পেসিং, টাইপোগ্রাফি, শ্যাডো — একটি ফরম্যাটে সংরক্ষণ করে যা প্ল্যাটফর্ম এবং টুল জুড়ে শেয়ার করা যায়। '--color-brand-500: #7c3aed'-এর মতো একটি কালার টোকেন ওয়েব CSS, iOS Swift, Android XML এবং React Native-এ অভিন্নভাবে ব্যবহার করা যায়। এগুলো স্কেলযোগ্য, মাল্টি-প্ল্যাটফর্ম ডিজাইন সিস্টেমের ভিত্তি এবং এখন W3C Design Token Community Group (DTCG) ফরম্যাটের অধীনে স্ট্যান্ডার্ডাইজড।
১১-স্টপ কালার স্কেল কী?
একটি ১১-স্টপ স্কেল একটি রঙের ১১টি শেড সংজ্ঞায়িত করে যার নাম ৫০, ১০০, ২০০, ৩০০, ৪০০, ৫০০, ৬০০, ৭০০, ৮০০, ৯০০, এবং ৯৫০। স্টপ ৫০ প্রায়-সাদা (৯৭% লাইটনেস), স্টপ ৫০০ বেস মিড-টোন, এবং স্টপ ৯৫০ প্রায়-কালো (৮% লাইটনেস)। Tailwind CSS এই কনভেনশন প্রতিষ্ঠা করেছে এবং এটি এখন Radix UI, shadcn/ui, Material Design 3 এবং বেশিরভাগ এন্টারপ্রাইজ কম্পোনেন্ট লাইব্রেরিসহ ডিজাইন সিস্টেমের স্ট্যান্ডার্ড। বেশিরভাগ অন্যান্য প্যালেট জেনারেটর শুধু ৫ বা ১০টি স্টপ তৈরি করে।
স্কেলের স্টপগুলো কীভাবে তৈরি হয়?
জেনারেটর আপনার হেক্স রঙকে HSL-এ (হিউ, স্যাচুরেশন, লাইটনেস) রূপান্তর করে এবং আপনার রঙের হিউকে একটি পূর্বনির্ধারিত পারসেপচুয়াল লাইটনেস কার্ভ দিয়ে প্রতিটি স্টপে ম্যাপ করে: স্টপ ৫০-এ ৯৭%, স্টপ ৯৫০-এ ৮% পর্যন্ত নেমে। গাঢ় স্টপে স্যাচুরেশন সামান্য কমানো হয় অতিরিক্ত উজ্জ্বল শ্যাডো এড়াতে, যা Tailwind-এর বিল্ট-ইন প্যালেটের ভিজ্যুয়াল আচরণের সাথে মেলে। Coolors.co-এর বিপরীতে, যা র্যান্ডম ৫-রঙের কম্বিনেশন তৈরি করে, এই টুল একটি একক বেস রঙ থেকে একটি সিস্টেম্যাটিক র্যাম্প তৈরি করে।
HSL এবং OKLCH কালার স্পেসের মধ্যে পার্থক্য কী?
HSL (হিউ, স্যাচুরেশন, লাইটনেস) বেশিরভাগ প্যালেট জেনারেটর ব্যবহৃত ঐতিহ্যবাহী কালার মডেল। এটি সহজ এবং দ্রুত কিন্তু পারসেপচুয়ালি নন-ইউনিফর্ম — HSL-এ সমান সংখ্যাগত লাইটনেস পরিবর্তন মানুষের চোখে সবসময় সমান উজ্জ্বল দেখায় না। OKLCH একটি নতুন পারসেপচুয়ালি ইউনিফর্ম কালার স্পেস যেখানে সমান লাইটনেস ধাপ সব হিউ জুড়ে সমান অনুভূত উজ্জ্বলতা তৈরি করে। Tailwind v4 এখন আরও সামঞ্জস্যপূর্ণ প্যালেটের জন্য অভ্যন্তরীণভাবে OKLCH ব্যবহার করে।
প্রতিটি সোয়াচে W✓ / B✓ ব্যাজের মানে কী?
W✓ মানে সেই সোয়াচে সাদা টেক্সট 4.5:1 WCAG AA কনট্রাস্ট থ্রেশহোল্ড পাস করে। B✓ মানে সেই সোয়াচে কালো টেক্সট 4.5:1 পাস করে। যদি কোনো ব্যাজ না দেখা যায়, তাহলে সাদা এবং কালো উভয় টেক্সটই AA ফেল করে — সোয়াচটি শুধু ডেকোরেটিভ উদ্দেশ্যে বা বড়-ফরম্যাট টেক্সটের জন্য উপযুক্ত (যার জন্য শুধু 3:1 প্রয়োজন)। টেক্সট রঙ নির্ধারণের আগে এই ব্যাজগুলো চেক করা প্রোডাকশনে পৌঁছানোর আগে অ্যাক্সেসিবিলিটি লঙ্ঘন রোধ করে।
WCAG কী এবং কনট্রাস্ট কেন গুরুত্বপূর্ণ?
WCAG (Web Content Accessibility Guidelines) হলো W3C প্রকাশিত ওয়েব অ্যাক্সেসিবিলিটির আন্তর্জাতিক স্ট্যান্ডার্ড। AA লেভেলে সাধারণ টেক্সটের (১৮pt-এর কম) জন্য অন্তত 4.5:1 এবং বড় টেক্সটের (১৮pt+ বা ১৪pt+ বোল্ড) জন্য 3:1 কনট্রাস্ট রেশিও প্রয়োজন। অপর্যাপ্ত কনট্রাস্ট কম দৃষ্টিসম্পন্ন ব্যবহারকারী, কালার ভিশন ডেফিসিয়েন্সি বা উজ্জ্বল বহিরঙ্গন পরিবেশে টেক্সট পঠনযোগ্য করে তোলে না। অনেক এখতিয়ারে, WCAG AA কমপ্লায়েন্স ADA এবং EN 301 549-এর অধীনে পাবলিক-ফেসিং ওয়েবসাইটের জন্য একটি আইনি প্রয়োজনীয়তাও।
আমি কীভাবে আমার প্রজেক্টে Tailwind এক্সপোর্ট ব্যবহার করব?
Tailwind এক্সপোর্ট কপি করুন এবং আপনার tailwind.config.js-এর theme.extend.colors অবজেক্টের ভেতরে পেস্ট করুন, ‘color’-কে আপনার টোকেন নামে (যেমন ‘brand’ বা ‘primary’) রিনেম করে। CSS-ফার্স্ট @theme ব্লকসহ Tailwind v4-এর জন্য, পরিবর্তে CSS Variables এক্সপোর্ট ব্যবহার করুন এবং --color-brand-500: #hex; প্যাটার্ন ব্যবহার করে আপনার @theme { } ডিক্লেয়ারেশনের ভেতরে পেস্ট করুন — Tailwind v4 কোনো JavaScript কনফিগ ফাইল ছাড়াই সরাসরি CSS কাস্টম প্রপার্টি পড়ে।
আমি কীভাবে CSS Variables এক্সপোর্ট ব্যবহার করব?
CSS Variables এক্সপোর্ট আপনার গ্লোবাল স্টাইলশিটে একটি :root { } ব্লকের ভেতরে পেস্ট করুন। প্রতিটি স্টপ --color-500: #7c3aed-এর মতো একটি কাস্টম প্রপার্টি হয়ে যায় যা আপনি আপনার CSS-এ যেকোনো জায়গায় var(--color-500) দিয়ে রেফার করতে পারেন। স্পষ্টতার জন্য ‘color’-কে আপনার টোকেন নামে রিনেম করুন। এই প্রপার্টিগুলো স্বাভাবিকভাবে ক্যাসকেড করে, তাই আপনি কম্পোনেন্ট-স্কোপড সিলেক্টর বা ডার্ক-মোড মিডিয়া কোয়েরির ভেতরে নির্দিষ্ট স্টপ ওভাররাইড করতে পারেন। কোনো বিল্ড টুল প্রয়োজন নেই।
আমি কি নিউট্রাল ধূসরের জন্য প্যালেট তৈরি করতে পারি?
হ্যাঁ। একটি পরিষ্কার ধূসরের জন্য #6b7280-এর কাছাকাছি যেকোনো হেক্স লিখুন। কম HSL স্যাচুরেশন সর্বনিম্ন কালার ক্যাস্টসহ একটি নিউট্রাল র্যাম্প তৈরি করে। উষ্ণ নিউট্রালের জন্য (আধুনিক UI ডিজাইনে জনপ্রিয় সামান্য বাদামি-আভাযুক্ত ধূসর — Tailwind-এর স্টোন বা স্যান্ড প্যালেটের কথা ভাবুন), ২৫–৪০ ডিগ্রি হিউ এবং ৬–১২% স্যাচুরেশনসহ একটি হেক্স লিখুন। শীতল ধূসরের (স্লেট-এর মতো) জন্য, ২১০–২৩০ ডিগ্রি রেঞ্জে একটি হিউ ব্যবহার করুন।
হালকা স্টপগুলো (৫০, ১০০) কেন খাঁটি সাদা নয়?
টিন্টেড হালকা স্টপ বাস্তব UI-তে খাঁটি সাদার চেয়ে অনেক বেশি ব্যবহারিক — এগুলো নোংরা বা দুর্ঘটনাজনক না দেখিয়ে ব্যাকগ্রাউন্ড, কার্ড এবং ইনপুট লেভেলের মধ্যে দৃশ্যমান সারফেস শ্রেণিবিন্যাস তৈরি করে। খাঁটি সাদার (#ffffff) কোনো রঙের পরিচয় নেই এবং সারফেস স্তরের মধ্যে পার্থক্য করা অসম্ভব করে তোলে। ৯৭% এবং ৯৩% লাইটনেসে ৫০ এবং ১০০ স্টপ যথেষ্ট হালকা যাতে ‘প্রায়-সাদা’ পড়া যায় তবু আপনার ব্র্যান্ড হিউয়ের সাথে স্পষ্টভাবে সংযুক্ত থাকে।
W3C DTCG (Design Token Community Group) ফরম্যাট কী?
DTCG ফরম্যাট হলো ইন্টারঅপারেবল ডিজাইন টোকেনের জন্য একটি উদীয়মান W3C স্ট্যান্ডার্ড, JSON-এ টোকেন কীভাবে গঠিত হওয়া উচিত তা সংজ্ঞায়িত করে যাতে Figma, Style Dictionary, Theo এবং Supernova-এর মতো টুল কাস্টম রূপান্তর ছাড়াই একই টোকেন ফাইল ব্যবহার করতে পারে। এই টুল থেকে JSON এক্সপোর্ট টাইপ অ্যানোটেশনসহ DTCG আকৃতি অনুসরণ করে, এটিকে style-dictionary এবং অন্যান্য টোকেন পাইপলাইন টুলের সাথে সামঞ্জস্যপূর্ণ করে তোলে।
বাটন রঙ, টেক্সট এবং ব্যাকগ্রাউন্ডের জন্য আমি কীভাবে সঠিক স্টপ বেছে নেব?
সাধারণ নিয়ম: হালকা স্টপ (৫০–২০০) টিন্টেড ব্যাকগ্রাউন্ড, টেবিল রো স্ট্রাইপ এবং সূক্ষ্ম সারফেস ফিলের জন্য কাজ করে। মিড স্টপ (৩০০–৫০০) হালকা ব্যাকগ্রাউন্ডে বাটন ফিল, ফোকাস রিং এবং ইন্টারঅ্যাকটিভ অ্যাকসেন্টের জন্য কাজ করে। গাঢ় স্টপ (৬০০–৮০০) মিড-স্টপ বাটনে হোভার স্টেট এবং খুব হালকা ব্যাকগ্রাউন্ডে টেক্সটের জন্য কাজ করে। খুব গাঢ় স্টপ (৯০০–৯৫০) টেক্সট এবং উচ্চ-কনট্রাস্ট বর্ডারের জন্য কাজ করে। যেকোনো টেক্সট-বহনকারী প্রয়োগের জন্য কনট্রাস্ট যাচাই করতে W✓/B✓ ব্যাজ ব্যবহার করুন।
এটি Coolors.co এবং Adobe Color-এর সাথে কীভাবে তুলনীয়?
Coolors.co একটি প্যালেট ডিসকভারি টুল — র্যান্ডম ৫-রঙের কম্বিনেশন তৈরির জন্য চমৎকার, কিন্তু এটি স্ট্রাকচার্ড টোকেন স্কেল বা CSS এক্সপোর্ট তৈরি করে না। Adobe Color একটি কালার হুইল থেকে হারমনি তৈরি করে কিন্তু টোকেন এক্সপোর্ট করতে একটি Adobe অ্যাকাউন্ট প্রয়োজন, এবং Tailwind কনফিগ বা DTCG JSON আউটপুট দেয় না। এই টুল বিশেষভাবে ডিজাইন-টোকেন ব্যবহারের ক্ষেত্রের জন্য তৈরি: একটি হেক্স দিন এবং চারটি এক্সপোর্ট ফরম্যাট ও প্রতি-সোয়াচ WCAG কনট্রাস্ট ব্যাজসহ একটি স্ট্যান্ডার্ড-সামঞ্জস্যপূর্ণ ১১-স্টপ স্কেল ফেরত পান।
Related tools
সব টুল দেখুন
নতুন Pixel Art Maker
Draw pixel art on a customizable grid, pick colors, and export as PNG — in your browser.
কালার পিকার ও কনভার্টার
একটি রঙ বেছে নিন এবং HEX, RGB, HSL ও OKLCH-এ রূপান্তর করুন।
নতুন কালার কনট্রাস্ট চেকার
টেক্সট ও ব্যাকগ্রাউন্ড রঙের মধ্যে WCAG AA/AAA কনট্রাস্ট অনুপাত যাচাই করুন।
নতুন CSS গ্রেডিয়েন্ট জেনারেটর
লাইভ প্রিভিউ সহ linear, radial ও conic CSS গ্রেডিয়েন্ট তৈরি করুন।
নতুন CSS Box-Shadow জেনারেটর
প্রিসেট ও লাইভ প্রিভিউ সহ মাল্টি-লেয়ার CSS box-shadow তৈরি করুন। CSS, value বা React স্টাইল তাৎক্ষণিক কপি করুন।
নতুন কালার প্যালেট জেনারেটর
complementary, analogous, triadic ও monochromatic প্যালেট তৈরি করুন।