কালার কনভার্টার: HEX, RGB, HSL ও CMYK

বাংলা

HEX থেকে RGB (এবং উল্টোটা) কীভাবে করবেন

এই কালার কনভার্টার লেখার সঙ্গে সঙ্গে একটি HEX কোডকে RGB, HSL, HSV, CMYK আর OKLCH-এ বদলে দেয়, আর উল্টো দিকেও কাজ করে: যেকোনো বক্সে rgb(255, 99, 71) পেস্ট করলে পাবেন #FF6347। প্রতিটি বক্স সব ফরম্যাট নেয়, তাই ঠিক ঘরটি খুঁজতে হয় না।

হাতে করতে চাইলে মনে রাখুন, HEX কোড আসলে 16 ভিত্তিতে লেখা তিনটি সংখ্যা। #3B82F6 নিন, জোড়ায় জোড়ায় ভাগ করুন, তারপর প্রতিটি জোড়া রূপান্তর করুন:

RGB থেকে HEX-এ যাওয়া ঠিক উল্টো প্রক্রিয়া। প্রতিটি চ্যানেলকে 16 দিয়ে ভাগ করুন: ভাগফল প্রথম অঙ্ক, ভাগশেষ দ্বিতীয়। 255 হলো 15, ভাগশেষ 15, তাই FF। 99 হলো 6, ভাগশেষ 3, তাই 63। এ কারণেই টমেটো লাল, rgb(255, 99, 71), দাঁড়ায় #FF6347।

HEX, RGB ও HSL-এ প্রচলিত কালার কোড

এগুলো দেখামাত্র চিনতে পারা কাজে দেয়। সবগুলোই বৈধ CSS কালার নাম, আর আপনি যে রংই লিখুন, টুলটি সবচেয়ে কাছের নাম দেখায় (#3B82F6 সবচেয়ে কাছে dodgerblue-এর, যদিও হুবহু এক নয়)।

ছোট, বড় ও স্বচ্ছ HEX কোড

HEX চার রকম দৈর্ঘ্যের হয়। তিন অঙ্কের কোড সংক্ষিপ্ত রূপ, যেখানে প্রতিটি অঙ্ক দুবার ধরা হয়, তাই #F60 মানে #FF6600। ছয় অঙ্ক সাধারণ রূপ। আট অঙ্কে শেষে একটি আলফা চ্যানেল যোগ হয়: #3B82F680 একই নীল, তবে 255-এর মধ্যে 128, মোটামুটি 50% অস্বচ্ছতায়। চার অঙ্ক তারই সংক্ষিপ্ত রূপ। ব্রাউজার বহু বছর ধরে চারটিই বোঝে, কিন্তু কিছু ডিজাইন অ্যাপ আর ইমেইল ক্লায়েন্ট এখনো শুধু ছয় অঙ্ক নেয়, তাই সন্দেহ থাকলে ছয় অঙ্কের কোড পেস্ট করে অস্বচ্ছতা আলাদা করে ঠিক করুন।

কোন ফরম্যাট ব্যবহার করবেন?

• HEX ডিজাইন টুল, ব্র্যান্ড গাইড বা CMS-এ পেস্ট করার জন্য। ছোট, আর কেউ ভুল পড়ে না।
• RGB / RGBA যখন পুরোনো CSS বা JavaScript canvas কোডে স্বচ্ছতা দরকার।
• HSL যখন যুক্তি দিয়ে রং একটু বদলাতে চান। শেষ সংখ্যা কমালে রং গাঢ় হয়, মাঝেরটা কমালে ধূসর হয়। হোভার স্টেট এভাবে লেখা অনেক সহজ।
• OKLCH নতুন CSS ডিজাইন সিস্টেমের জন্য। এর লাইটনেস চোখে যা দেখায় তার সঙ্গে মেলে, তাই একই L-এর দুটি রং সত্যিই সমান উজ্জ্বল দেখায়, যা HSL পারে না (50% লাইটনেসের হলুদ 50%-এর নীলের চেয়ে অনেক উজ্জ্বল দেখায়)।
• CMYK কেবল প্রিন্টের মোটামুটি ধারণার জন্য। এখানকার সংখ্যা সাধারণ সূত্র থেকে আসে, প্রিন্টার প্রোফাইল থেকে নয়, তাই ব্রোশিওর স্ক্রিনের সঙ্গে হুবহু মিলবে না। প্রেসকে জিজ্ঞেস করুন তারা কোন প্রোফাইল ব্যবহার করে।
• HSV / HSB মূলত Photoshop বা Figma-র পিকারের সঙ্গে মেলাতে, কারণ সেগুলো এটিই ব্যবহার করে।

কালার কনট্রাস্ট চেকার: WCAG-এ কী পাস করে?

WCAG 2 লেখা আর ব্যাকগ্রাউন্ডের আপেক্ষিক উজ্জ্বলতা তুলনা করে এবং তা একটি অনুপাতে প্রকাশ করে, 1:1 (একই রং) থেকে 21:1 (সাদার উপর কালো) পর্যন্ত। সীমাগুলো নির্দিষ্ট:

WCAG 2.1 অনুযায়ী আইকন, ইনপুটের বর্ডার আর ফোকাস রিংয়ের দরকার 3:1। সাদার উপর লেখা হিসেবে কিছু বাস্তব রং কেমন স্কোর করে দেখুন:

#777777-এর সারিটিই চিরচেনা ফাঁদ। দেখতে #767676-এর মতোই, আর যে চেকার এক দশমিক ঘর দেখায় সেটি 4.5 দেখাবে, কিন্তু নিয়ম হলো "কমপক্ষে 4.5", আর 4.48 তা নয়। এই টুল কখনো ফেল করা অনুপাতকে সীমা পর্যন্ত রাউন্ড করে না।

কোনো রং ফেল করলে চেকার একই হিউ-এর সবচেয়ে কাছের পাস করা শেড খুঁজে দেয়। সাদার উপর #3B82F6-এর জন্য AA-তে প্রস্তাব করে #1E6FF5 (4.52:1) আর AAA-তে #0950C5 (7.08:1)। লোড করতে ব্যবহার করুন চাপুন, অথবা সরাসরি স্টাইলশিটে কপি করুন। উজ্জ্বল হলুদ আর কমলা রং সাদার উপর লেখা হিসেবে চলতে হলে সাধারণত অনেক গাঢ় শেড লাগে; সেগুলোর ক্ষেত্রে উজ্জ্বল রংটি ব্যাকগ্রাউন্ডে রাখুন আর উপরে গাঢ় লেখা দিন।

প্যালেট তৈরি করুন এবং ছবি থেকে রং বাছুন

প্যালেট প্যানেল 50 থেকে 950 পর্যন্ত টিন্ট ও শেডের একটি স্কেল বানায় (Tailwind যে নামকরণ ব্যবহার করে), সঙ্গে কমপ্লিমেন্টারি, অ্যানালগাস, ট্রায়াডিক, স্প্লিট-কমপ্লিমেন্টারি, স্কয়ার আর মনোক্রোম সেট। যেকোনো সোয়াচে ক্লিক করে কপি করুন, তারপর পুরো সেট CSS কাস্টম প্রপার্টি, SCSS ভেরিয়েবল, JSON বা Tailwind কালার ব্লক হিসেবে এক্সপোর্ট করুন, অথবা স্লাইডে বসাতে বা ক্লায়েন্টকে পাঠাতে একটি PNG স্ট্রিপ ডাউনলোড করুন।

লোগো বা ছবির কোনো রং মেলাতে ছবিটি লোড করে জায়গাটিতে ট্যাপ করুন। কম্প্রেশনের নয়েজের কারণে JPG-এর একটি পিক্সেল চোখে দেখা রং থেকে কয়েক শেড আলাদা হতে পারে, তাই ছবির জন্য 3×3 বা 5×5 গড়ে চলে যান। Chrome ও Edge-এ স্ক্রিন থেকে বাছুন বাটন আপনার ডিসপ্লের যেকোনো জায়গা থেকে, অন্য উইন্ডো থেকেও, রং তুলে আনতে পারে। কিছুই আপলোড হয় না; ছবিটি আপনার ব্রাউজারেই পড়া হয়।

সচরাচর জিজ্ঞাসিত প্রশ্ন