OKLCH-ভিত্তিক ব্র্যান্ড প্যালেট। একটি বেস বাছুন, প্রতিটি ক্লাসিক harmony এবং একটি 50–950 tonal scale পান। Lock করুন, re-roll করুন, CSS / Tailwind v4 / SCSS / JSON হিসেবে এক্সপোর্ট করুন।
OKLCH-ভিত্তিক ব্র্যান্ড প্যালেট। একটি বেস বাছুন, প্রতিটি ক্লাসিক harmony এবং একটি 50–950 tonal scale পান। Lock করুন, re-roll করুন, CSS / Tailwind v4 / SCSS / JSON হিসেবে এক্সপোর্ট করুন।
আমাদের Color Picker & Converter একসাথে একটি কালারের জন্য — pick / convert / copy। এই টুলটি প্যালেটের জন্য: একটি বেস কালার দিন, এক ধাক্কায় একটি সম্পূর্ণ ব্র্যান্ড-প্রস্তুত সিস্টেম (harmony + tonal scale) পান। এটি একটি শার্ট কেনা বনাম একটি পুরো wardrobe পাওয়ার পার্থক্য।
HSL hue অসমভাবে ছড়ায় (60° তে হলুদ একই lightness মানেও 240° তে নীলের চেয়ে অনেক উজ্জ্বল লাগে)। HSL-এ একটি triadic প্যালেটে একটি swatch অন্যদের থেকে স্পষ্টতই বেশি উজ্জ্বল বা মলিন হয়। OKLCH perceptual uniform — একই OKLCH lightness-এ তিনটি swatch একই উজ্জ্বলতায় দেখায়। এজন্যই প্রতিটি আধুনিক ডিজাইন সিস্টেম (Apple HI, Tailwind v4, IBM Carbon) harmony এবং scale-এর জন্য OKLCH-তে যাচ্ছে।
আপনার ব্র্যান্ড কালার কখনো আপনার ডিভাইস ছাড়ে না। DevTools → Network খুলুন, যেকোনো অপারেশনের সময় শূন্য outbound request দেখবেন।
টিপ: unlocked swatch গুলো re-roll করতে Space চাপুন।
OKLCH harmony, tonal scale, lock-and-reroll, design-token এক্সপোর্ট — এবং কিছু ছোট স্পর্শ যা একে আসলেই উপভোগ্য করে তোলে।
Complementary, analogous, triadic, tetradic, split-complementary, monochromatic — সবই OKLCH-এ গণিত যাতে তিনটি saturated bright কালারের একটি triadic প্যালেট সমভাবে উজ্জ্বল থাকে। কোনো HSL muddiness নেই।
আপনার ব্র্যান্ড কালার দিন, একটি OKLCH curve জুড়ে lightness হেঁটে তৈরি Tailwind-আকৃতির 50, 100, 200, … 900, 950 tonal scale পান। চরম প্রান্তে chroma সংকুচিত হয় যাতে কালার sRGB gamut-এ থাকে।
যেকোনো swatch পিন করুন (lock আইকন) এবং Re-roll চাপুন (বা শুধু Space টিপুন) যাতে নির্বাচিত harmony-র মধ্যে বাকিগুলো বদলে যায়। দ্রুত iterate করুন, যা ভালো লাগে রাখুন।
CSS custom properties (--brand-500), Tailwind v4 @theme block, SCSS map, এবং JSON design tokens Style Dictionary / Figma Tokens-এর জন্য প্রস্তুত। সাথে একটি 1200×200 PNG swatch strip।
প্রতিটি swatch কালো বা সাদার মধ্যে যেটি বেশি ভালো তার বিপরীতে তার WCAG contrast ratio দেখায়, সাথে AA / AAA / fail ব্যাজ। শিপিংয়ের আগে accessibility সমস্যা ধরুন।
প্রতিটি byte আপনার ডিভাইসেই থাকে। OKLCH math, harmony তৈরি, scale derivation, PNG এক্সপোর্ট সব JavaScript হিসেবে লোকাল চলে। DevTools → Network খুলে যাচাই করুন — শূন্য outbound request।
একটি বেস কালার থেকে সম্পূর্ণ design-token-প্রস্তুত প্যালেট পর্যন্ত চারটি ধাপ।
কালার বক্সে ক্লিক করুন, একটি HEX paste করুন, অথবা অনুপ্রেরণার জন্য র্যান্ডম বেস চাপুন। টুলটি পুরো প্যালেটটিকে এই কালারের ওপর কেন্দ্রিক করে — harmony swatch এবং 11-ধাপের tonal scale উভয়ই।
ডিফল্ট হলো Analogous — বেসের 30°-এর মধ্যে তিনটি কালার, শান্ত ব্র্যান্ড প্যালেটের জন্য নিখুঁত। contrast accent-এর জন্য Complementary। editorial / playful ব্র্যান্ডের জন্য Triadic / Tetradic। এক-hue tonal সিস্টেমের জন্য Monochromatic। সবই OKLCH-এ গণিত যাতে সমভাবে উজ্জ্বল থাকে।
যে swatch রাখতে চান তার lock আইকনে ক্লিক করুন, তারপর Space টিপুন (বা Re-roll চাপুন) যাতে harmony-র মধ্যে বাকিগুলো বদলায়। দ্রুত iterate করুন। সঠিক মান নির্ধারণ করতে চাইলে যেকোনো swatch-এর HEX ফিল্ডে ক্লিক করে সরাসরি সম্পাদনা করুন।
CSS আউটপুট (custom properties), Tailwind v4 (@theme block), SCSS map, বা JSON design tokens কপি করুন। অথবা design brief-এ ফেলার জন্য একটি 1200×200 swatch strip-এর জন্য Download PNG চাপুন।
চারটি সাধারণ পরিস্থিতি যেখানে privacy-first OKLCH palette টুল Figma-তে hex code হ্যান্ড-টিউনিংকে ছাড়িয়ে যায়।
আপনার একটি ব্র্যান্ড কালার আছে, এর চারপাশে একটি সিস্টেম দরকার। HEX দিন, Analogous বাছুন, যতক্ষণ না দুটি supporting কালার সুর মেলে re-roll করুন, তিনটিই lock করুন। Tonal Scale ভিউতে যান, Tailwind @theme block কপি করুন, নতুন প্রজেক্টের app.css-এ paste করুন। মোট সময়: 5 মিনিট।
ডিফল্ট Tailwind indigo আপনার ব্র্যান্ড নয়। আপনার ব্র্যান্ড #5B3FCD। এটি দিন, Tailwind-এর spacing-কে নিখুঁতভাবে আয়না করা একটি 11-ধাপের tonal scale পান। @theme block কপি করুন — প্রতিটি bg-brand-500 / text-brand-700 ঠিকঠাক কাজ করে।
প্রতিটি swatch তার WCAG contrast ratio + AA/AAA ব্যাজ দেখায়। স্পট-চেক করুন brand-500 সাদার বিপরীতে AA হিট করছে কিনা, এবং brand-100 brand-900 টেক্সটসহ ব্যাকগ্রাউন্ড টিন্ট হিসেবে পাঠযোগ্য থাকছে কিনা। সমস্যাযুক্ত swatch গুলো আলাদাভাবে re-roll করে ঠিক করুন।
এজেন্সি / মাল্টি-ব্র্যান্ড কোম্পানি N-টি সমান্তরাল design system বজায় রাখে, প্রতিটি একই আকৃতির কিন্তু ভিন্ন ব্র্যান্ড hue-র। প্রতিটি ব্র্যান্ডের জন্য একই harmony + tonal-scale workflow ব্যবহার করুন, প্রতিটি JSON token হিসেবে এক্সপোর্ট করুন, Style Dictionary-তে ফেলুন। সঙ্গতিপূর্ণ আকৃতি, স্বতন্ত্র identity।
আপনার ব্র্যান্ড কালার কখনো আপনার ডিভাইস ছাড়ে না। DevTools → Network খুলুন, যেকোনো অপারেশনের সময় শূন্য outbound request দেখবেন।
canvas ব্যবহার করে; swatch ছবিটি সম্পূর্ণরূপে ব্রাউজার মেমরিতে তৈরি হয় এবং একটি Blob হিসেবে ডাউনলোড হয় — কিছুই নেটওয়ার্ক অতিক্রম করে না।
OKLCH প্যালেট, ব্র্যান্ড কালার সিস্টেম এবং design token-এর ওপর হাতে বাছাই করা পঠনসামগ্রী।
Why OKLCH replaces HSL for design systems: perceptual lightness, predictable chroma, wide-gamut support.
From sRGB linearization to relative luminance — every step of the contrast formula, with worked examples.
আমাদের Color Picker & Converter একসাথে একটি কালারের জন্য — pick / convert / copy। এই টুলটি প্যালেটের জন্য: একটি বেস কালার দিন, এক ধাক্কায় একটি সম্পূর্ণ ব্র্যান্ড-প্রস্তুত সিস্টেম (harmony + tonal scale) পান। এটি একটি শার্ট কেনা বনাম একটি পুরো wardrobe পাওয়ার পার্থক্য।
HSL hue অসমভাবে ছড়ায় (60° তে হলুদ একই lightness মানেও 240° তে নীলের চেয়ে অনেক উজ্জ্বল লাগে)। HSL-এ একটি triadic প্যালেটে একটি swatch অন্যদের থেকে স্পষ্টতই বেশি উজ্জ্বল বা মলিন হয়। OKLCH perceptual uniform — একই OKLCH lightness-এ তিনটি swatch একই উজ্জ্বলতায় দেখায়। এজন্যই প্রতিটি আধুনিক ডিজাইন সিস্টেম (Apple HI, Tailwind v4, IBM Carbon) harmony এবং scale-এর জন্য OKLCH-তে যাচ্ছে।
এটি Tailwind-স্টাইলের ব্র্যান্ড-কালার scale: indigo-50 (সবচেয়ে হালকা), indigo-100, indigo-200, … indigo-900, indigo-950 (সবচেয়ে গাঢ়)। আপনার ব্র্যান্ড কালার দিন, টুলটি একটি স্থির curve জুড়ে OKLCH lightness হেঁটে স্বয়ংক্রিয়ভাবে সমস্ত 11টি ধাপ তৈরি করে। ফলাফল হলো আপনার ব্র্যান্ড hue-তে যেকোনো Tailwind palette token-এর জন্য একটি drop-in প্রতিস্থাপন।
যেকোনো swatch-এর উপরের-বামে lock আইকন ক্লিক করুন — এটি স্থির থাকবে। তারপর Re-roll চাপুন বা Space টিপুন যাতে নির্বাচিত harmony-র মধ্যে প্রতিটি unlocked swatch বদলে যায়। এভাবেই দারুণ একটি প্যালেট খুঁজে পাবেন: যে ব্র্যান্ড কালার ইতিমধ্যেই চূড়ান্ত করেছেন সেটি পিন করুন, তার চারপাশে variation explore করুন।
না। OKLCH math, harmony তৈরি, tonal-scale derivation, contrast-ratio গণনা, PNG এক্সপোর্ট, প্রতিটি clipboard কপি — সবই আপনার ডিভাইসে JavaScript-এ চলে। DevTools → Network খুলুন, শূন্য outbound request দেখবেন। আপনার ব্র্যান্ড কালার, ইন্টারনাল design token, NDA-locked প্যালেট paste করুন — কিছুই আপনার laptop ছাড়ে না।