কালার কনভার্শন কী?
আপনার ব্রাউজার রেন্ডার করা প্রতিটি রং শেষ পর্যন্ত একটি sRGB ট্রিপল — লাল, সবুজ ও নীল চ্যানেলের জন্য ০ থেকে ২৫৫-এর মধ্যে তিনটি সংখ্যা, এবং একটি ঐচ্ছিক আলফা। CSS Color Level 4 স্পেসিফিকেশন বেশ কয়েকটি টেক্সট ফরম্যাট সংজ্ঞায়িত করে যা একই ট্রিপলে রাউন্ড-ট্রিপ করে, পাশাপাশি পারসেপচুয়ালি-ইউনিফর্ম OKLCH স্পেস। এই টুল যেকোনো ফরম্যাট পড়ে, সবগুলোতে রূপান্তর করে, এবং দ্বিতীয় রংয়ের বিপরীতে WCAG 2.1 কন্ট্রাস্ট রেশিও জানায়।
কালার কনভার্শন কীভাবে কাজ করে?
কনভার্শন হলো সুনির্দিষ্ট রৈখিক ও অরৈখিক রূপান্তরের একটি ধারা। প্রতিটি ধাপ আপনার ব্রাউজারে চলে — কোনো ইনপুট আমাদের সার্ভারে পৌঁছায় না:
- আপনার ইনপুট পার্স করা হয়। টুলটি ৩, ৪, ৬ বা ৮-ডিজিট HEX, ফাংশনাল ফর্ম
rgb()/rgba()/hsl()/hsla()/hsv()/hwb()লিগেসি কমা সিনট্যাক্স বা আধুনিক স্ল্যাশ-আলফা সিনট্যাক্সে, অথবা ১৫০টি নামযুক্ত CSS রঙের যেকোনোটি (rebeccapurpleসহ) স্বয়ংক্রিয়ভাবে শনাক্ত করে। - পার্স করা রংটি ক্যানোনিকাল sRGB-এ নরমালাইজ করা হয় — চারটি ফ্লোট
{r, g, b, a}প্রতিটি ০–১ পরিসরে। এটিই একক সত্যের উৎস যা থেকে প্রতিটি আউটপুট ফরম্যাট তৈরি হয়। - HEX প্রতিটি চ্যানেলকে তার ০–২৫৫ বাইট মানে গোলাকার করে এবং হেক্স ডিজিট যোগ করে। RGB / RGBA একই বাইট প্রিন্ট করে। HSL ও HSV স্ট্যান্ডার্ড W3C সিলিন্ড্রিক্যাল-কোঅর্ডিনেট অ্যালগরিদম প্রয়োগ করে।
- CMYK একটি সরল আনুমানিক পদ্ধতি —
k = 1 - max(r, g, b), তারপর অবশিষ্ট চ্যানেল থেকেc, m, y। এটি স্ক্রিন প্রিভিউর জন্য উপযুক্ত কিন্তু প্রিন্টের জন্য নয়: প্রকৃত CMYK আউটপুটের জন্য ICC প্রোফাইল প্রয়োজন। - OKLCH css-color-4 ফরওয়ার্ড পাথ অনুসরণ করে: sRGB রৈখিক করা হয়, LMS ম্যাট্রিক্স দিয়ে গুণ করা হয়, কিউব-রুট নেওয়া হয়, LMS-to-OKLab ম্যাট্রিক্স দিয়ে গুণ করা হয়, এবং অবশেষে আয়তাকার OKLab থেকে মেরু OKLCH-এ রূপান্তর করা হয়।
এই কালার কনভার্টার কেন ব্যবহার করবেন?
- গোপনীয়তা: প্রতিটি কনভার্শন সাধারণ JavaScript ব্যবহার করে আপনার ব্রাউজারে চলে। আপনি পেস্ট করা রং কখনও আপনার ডিভাইস ছাড়ে না — অপ্রকাশিত ব্র্যান্ড কাজ, অভ্যন্তরীণ ডিজাইন সিস্টেম এবং NDA-এর অধীনে ক্লায়েন্ট মকের জন্য এটি গুরুত্বপূর্ণ।
- ডিজাইনার-থেকে-ডেভেলপার হ্যান্ডঅফ: Figma থেকে HEX পেস্ট করুন এবং Tailwind কনফিগের জন্য
rgb()স্ট্রিং, CSS কাস্টম প্রপার্টির জন্যhsl()স্ট্রিং, বা আধুনিক প্যালেটের জন্যoklch()স্ট্রিং পড়ুন। - WCAG নির্ভুলতা: কন্ট্রাস্ট চেকার সঠিক WCAG 2.1 রিলেটিভ-লুমিনেন্স ফর্মুলা এবং স্বাভাবিক ও বড় টেক্সটের জন্য প্রকাশিত AA (4.5 / 3.0) ও AAA (7.0 / 4.5) থ্রেশহোল্ড ব্যবহার করে।
- ডার্ক-মোড ও প্যালেট ডেরিভেশন: HSL ও OKLCH লাইটনেসকে একটি একক চ্যানেল হিসেবে উন্মুক্ত করে, তাই ডার্ক-মোড টোকেন ডেরাইভ করতে বা একটি সিড থেকে ১০-ধাপের প্যালেট র্যাম্প তৈরি করতে ব্র্যান্ড কালারের লাইটনেস অক্ষ সহজেই পরিবর্তন করা যায়।
কালার কনভার্শনের সাধারণ ব্যবহার কী কী?
ওয়েব ডেভেলপমেন্ট, ডিজাইন ও অ্যাক্সেসিবিলিটি কাজে কালার কনভার্শন দেখা যায়:
- ডিজাইন সিস্টেম: ব্র্যান্ড HEX-কে CSS কাস্টম-প্রপার্টি স্কেলের জন্য মিলে যাওয়া HSL ও OKLCH টোকেনে রূপান্তর করা, তারপর প্রতিটি টোকেন কম্বিনেশন পেজ ব্যাকগ্রাউন্ডের বিপরীতে WCAG AA পাস করে কিনা যাচাই করা।
- অ্যাক্সেসিবিলিটি অডিট: একটি আসল পণ্যের স্ক্রিন থেকে ফোরগ্রাউন্ড ও ব্যাকগ্রাউন্ড পেয়ার পেস্ট করা এবং এক নজরে কন্ট্রাস্ট রেশিও ও স্বাভাবিক ও বড় টেক্সটের AA/AAA ভার্ডিক্ট পড়া।
- ক্রস-টুল রাউন্ড-ট্রিপ: স্ক্রিনশট পিকার থেকে (HEX) রং নিয়ে এখানে পেস্ট করা এবং Tailwind, Figma টোকেন বা CSS-in-JS থিমে সরাসরি
hsl()বাoklch()স্ট্রিং কপি করা।
কালার কনভার্শনের উদাহরণ কেমন দেখায়?
বিখ্যাত rebeccapurple নিন। নামযুক্ত-কালার লুকআপ এটিকে #663399-এ রিজলভ করে। RGB কনভার্শন দেয় rgb(102, 51, 153)। HSL কনভার্শন দেয় hsl(270, 50%, 40%)। কন্ট্রাস্ট টুল দিয়ে বিশুদ্ধ সাদার বিপরীতে পরীক্ষা করলে রেশিও প্রায় 7.39 পাওয়া যায়, যা স্বাভাবিক টেক্সটের জন্য AAA (7.0) এবং বড় টেক্সটের জন্য AAA (4.5) ক্লিয়ার করে।
এই কনভার্টারটি কোডে, ডিজাইন ফাইলে বা স্ক্রিনশটে যেকোনো রংয়ের জন্য দ্রুত রেফারেন্স হিসেবে ব্যবহার করুন — এবং শিপ করার আগে স্যানিটি চেক হিসেবে কন্ট্রাস্ট চেকার। সবকিছু স্থানীয়ভাবে চলে, কিছুই লগ হয় না, এবং কনভার্শন গণিত প্রকাশিত W3C ও WCAG স্পেসিফিকেশন অনুসরণ করে।