ToolDeck-এর রঙ টুলগুলো আপনাকে রঙের ফরম্যাটের মধ্যে রূপান্তর করতে, অ্যাক্সেসিবিলিটি কনট্রাস্ট রেশিও যাচাই করতে, প্যালেট তৈরি করতে, CSS গ্রেডিয়েন্ট তৈরি করতে এবং সরাসরি আপনার ব্রাউজারে রঙের নাম বা Tailwind ক্লাস খুঁজে পেতে সাহায্য করে। রঙ কনভার্টার HEX, RGB, HSL এবং HSV-এর মধ্যে রূপান্তর করে। কনট্রাস্ট চেকার WCAG 2.1 AA এবং AAA সম্মতি পরীক্ষা করে। প্যালেট জেনারেটর যেকোনো মূল রঙ থেকে কমপ্লিমেন্টারি, অ্যানালগাস, ট্রায়াডিক এবং টেট্রাডিক স্কিম তৈরি করে। CSS গ্রেডিয়েন্ট জেনারেটর সরাসরি ব্যবহারযোগ্য লিনিয়ার ও রেডিয়াল গ্রেডিয়েন্ট কোড আউটপুট করে। রঙের নাম ফাইন্ডার যেকোনো মান থেকে সবচেয়ে কাছের CSS নামযুক্ত রঙ খুঁজে দেয়, এবং Tailwind রঙ ফাইন্ডার যেকোনো রঙকে Tailwind ইউটিলিটি ক্লাসে ম্যাপ করে। সব টুল ক্লায়েন্ট-সাইডে চলে এবং কোনো সার্ভারে ডেটা পাঠায় না।
রঙ টুল কী?
রঙ টুল হল এমন ইউটিলিটি যা ডেভেলপার ও ডিজাইনারদের ডিজিটাল রঙের মানের সাথে কাজ করতে সাহায্য করে। পর্দায় প্রতিটি রঙ সংখ্যা হিসেবে সংরক্ষিত থাকে: RGB-র জন্য তিনটি চ্যানেল (লাল, সবুজ, নীল), CSS শর্টহ্যান্ডের জন্য একটি হেক্স ট্রিপলেট, অথবা HSL-এর জন্য হিউ, স্যাচুরেশন ও লাইটনেস। এই উপস্থাপনাগুলোর মধ্যে হাতে পরিবর্তন করা ধীর এবং ত্রুটিপ্রবণ, বিশেষত যখন আপনাকে আলফা ট্রান্সপারেন্সি বা OKLCH-এর মতো নতুন মডেলও বিবেচনা করতে হয়।
ফরম্যাট রূপান্তরের বাইরে, রঙের কাজে অ্যাক্সেসিবিলিটি পরীক্ষা, প্যালেট তৈরি এবং গ্রেডিয়েন্ট তৈরি অন্তর্ভুক্ত। WCAG 2.1 সর্বনিম্ন কনট্রাস্ট রেশিও নির্ধারণ করে (সাধারণ টেক্সটের জন্য AA স্তরে ৪.৫:১, AAA-তে ৭:১) যা চোখ দিয়ে যাচাই করা কঠিন। সমন্বিত রঙ স্কিম তৈরি করতে HSL কালার হুইলে নির্ভুল কোণ গণনা প্রয়োজন। CSS গ্রেডিয়েন্টের জন্য দিক, কালার স্টপ এবং ফলব্যাক মানের সঠিক সিনট্যাক্স দরকার। কয়েক ডজন টোকেনসহ একটি ডিজাইন সিস্টেমে এগুলো ম্যানুয়ালি করা দ্রুত ক্লান্তিকর হয়ে যায়।
রঙ টুল এই কাজগুলো স্বয়ংক্রিয় করে। এগুলো একটি ফরম্যাটে রঙ গ্রহণ করে, গণনা সম্পন্ন করে এবং আপনার প্রয়োজনীয় ফলাফল ফেরত দেয় — রূপান্তরিত মান, পাস/ফেল অ্যাক্সেসিবিলিটি রায়, সমন্বিত সোয়াচের একটি সেট, অথবা একটি CSS কোড স্নিপেট। টুলটি ব্রাউজারে চলার কারণে আপনি তৃতীয় পক্ষের পরিষেবায় সংবেদনশীল ডিজাইন টোকেন আপলোড করা থেকেও বেঁচে যান।
কেন ToolDeck-এ রঙ টুল ব্যবহার করবেন?
ToolDeck-এর রঙ টুলগুলো সম্পূর্ণরূপে আপনার ব্রাউজারে চলে। কোনো রঙের মান আপনার মেশিন ছেড়ে যায় না, কোনো অ্যাকাউন্টের প্রয়োজন নেই এবং এক্সটেনশন বা ডেস্কটপ সফটওয়্যার ইনস্টল না করেই প্রতিটি টুল তাৎক্ষণিকভাবে লোড হয়।
🎨এক ধাপে ফরম্যাট রূপান্তর করুন
একটি HEX কোড পেস্ট করুন এবং একসাথে RGB, HSL এবং HSV মান পান। একাধিক কনভার্টার ব্যবহার করার বা রূপান্তর সূত্র মনে রাখার প্রয়োজন নেই।
🔒ডিজাইন টোকেন ব্যক্তিগত রাখুন
সমস্ত প্রক্রিয়াকরণ ক্লায়েন্ট-সাইডে হয়। আপনার ব্র্যান্ড রঙ, অপ্রকাশিত প্যালেট সিদ্ধান্ত এবং অভ্যন্তরীণ ডিজাইন সিস্টেমের মান আপনার ডিভাইসেই থাকে।
♿তাৎক্ষণিকভাবে অ্যাক্সেসিবিলিটি পরীক্ষা করুন
সাধারণ ও বড় টেক্সট উভয়ের জন্য WCAG 2.1 AA এবং AAA থ্রেশহোল্ডের বিপরীতে যেকোনো ফোরগ্রাউন্ড/ব্যাকগ্রাউন্ড জুটি যাচাই করুন। শুধু পাস/ফেল লেবেল নয়, সঠিক কনট্রাস্ট রেশিও জানুন।
⚡প্রোডাকশন-প্রস্তুত আউটপুট কপি করুন
প্রতিটি টুল এমন মান আউটপুট করে যা আপনি সরাসরি CSS, Tailwind কনফিগ বা ডিজাইন টুলের ইনপুট ফিল্ডে পেস্ট করতে পারেন। পুনরায় ফরম্যাটের প্রয়োজন নেই।
রঙ টুলের ব্যবহারের ক্ষেত্র
এখানে ছয়টি সাধারণ পরিস্থিতি দেওয়া হলো যেখানে ToolDeck-এর রঙ টুলগুলো সময় বাঁচায়।
ডিজাইন সিস্টেম রক্ষণাবেক্ষণ
একটি ডিজাইন সিস্টেম আপডেট করার সময়, আপনি প্রায়ই ডিজাইনারের কাছ থেকে HEX ফরম্যাটে রঙ পান কিন্তু CSS কাস্টম প্রোপার্টির জন্য HSL প্রয়োজন হয়।
রঙ কনভার্টার ফরম্যাটগুলোর মধ্যে অনুবাদ করে যাতে আপনি ম্যানুয়াল গণনা ছাড়াই টোকেন ফাইল পূরণ করতে পারেন।
অ্যাক্সেসিবিলিটি অডিট
WCAG সম্মতি অডিটের সময়, প্রতিটি টেক্সট/ব্যাকগ্রাউন্ড সংমিশ্রণকে সর্বনিম্ন কনট্রাস্ট রেশিও পূরণ করতে হবে।
রঙ কনট্রাস্ট চেকার সাধারণ ও বড় টেক্সট আকার উভয়ের জন্য সঠিক রেশিও এবং AA/AAA পাস স্ট্যাটাস দেখায়।
ব্র্যান্ড প্যালেট অন্বেষণ
একটি একক ব্র্যান্ড রঙ থেকে শুরু করে, আপনার অ্যাকসেন্ট এবং নিউট্রাল ভেরিয়েন্ট দরকার।
রঙ প্যালেট জেনারেটর কমপ্লিমেন্টারি, অ্যানালগাস, ট্রায়াডিক এবং টেট্রাডিক হার্মনি গণনা করে যাতে আপনি কোনো প্যালেটে প্রতিশ্রুতিবদ্ধ হওয়ার আগে বিকল্পগুলো মূল্যায়ন করতে পারেন।
CSS ব্যাকগ্রাউন্ড স্টাইলিং
গ্রেডিয়েন্ট সহ একটি হিরো সেকশন বা কার্ড ব্যাকগ্রাউন্ড তৈরি করতে কোণ, কালার স্টপ এবং ভেন্ডর প্রিফিক্সের সঠিক CSS সিনট্যাক্স প্রয়োজন।
CSS গ্রেডিয়েন্ট জেনারেটর আপনাকে গ্রেডিয়েন্ট দৃশ্যমানভাবে তৈরি করতে এবং কোড কপি করতে দেয়।
Tailwind মাইগ্রেশন
একটি প্রজেক্ট Tailwind CSS-এ মাইগ্রেট করার সময়, আপনাকে বিদ্যমান HEX বা RGB মানগুলোকে নিকটতম Tailwind ইউটিলিটি ক্লাসে ম্যাপ করতে হবে।
Tailwind রঙ ফাইন্ডার সবচেয়ে কাছের মিল খুঁজে দেয় এবং ডেল্টা দেখায় যাতে আপনি সিদ্ধান্ত নিতে পারেন এই আনুমানিক মিল গ্রহণযোগ্য কিনা।
কোড রিভিউ ও ডকুমেন্টেশন
কোড রিভিউর সময়, #708090-এর মতো একটি কাঁচা HEX মান এক নজরে কিছুই বোঝায় না।
রঙের নাম ফাইন্ডার এটিকে SlateGray হিসেবে সনাক্ত করে, যা রিভিউ ও ডকুমেন্টেশন আরও পাঠযোগ্য করে তোলে।
CSS রঙ মডেল রেফারেন্স
CSS একাধিক রঙ মডেল সমর্থন করে। নিচের টেবিলটি ছয়টি সবচেয়ে সাধারণ ফরম্যাট, তাদের সিনট্যাক্স এবং সাধারণ ব্যবহারের ক্ষেত্র সংক্ষেপ করে। এই সবগুলো ToolDeck-এর রঙ কনভার্টার দ্বারা সমর্থিত।
| মডেল | CSS সিনট্যাক্স | চ্যানেল | মানের পরিসর | সাধারণ ব্যবহার |
|---|
| HEX | #rrggbb | লাল, সবুজ, নীল | প্রতি চ্যানেলে 00–ff | CSS, ডিজাইন হ্যান্ডঅফ, ব্র্যান্ড গাইডলাইনে সবচেয়ে সাধারণ |
| RGB | rgb(r, g, b) | লাল, সবুজ, নীল | প্রতি চ্যানেলে 0–255 | JavaScript ক্যানভাস API, কম্পিউটেড স্টাইল, ছবি প্রক্রিয়াকরণ |
| HSL | hsl(h, s%, l%) | হিউ, স্যাচুরেশন, লাইটনেস | 0–360 / 0–100% / 0–100% | ডিজাইন টোকেন, থিম জেনারেশন, প্রোগ্রামেটিক শেড ভেরিয়েন্ট |
| HSV | N/A (CSS-এ নেই) | হিউ, স্যাচুরেশন, ভ্যালু | 0–360 / 0–100% / 0–100% | কালার পিকার (Photoshop, Figma), হার্ডওয়্যার কালার ক্যালিব্রেশন |
| OKLCH | oklch(L C H) | লাইটনেস, ক্রোমা, হিউ | 0–1 / 0–0.4 / 0–360 | পারসেপচুয়ালি ইউনিফর্ম প্যালেট (CSS Color Level 4 স্পেক) |
| Named | যেমন slategray | অভ্যন্তরীণভাবে RGB-তে ম্যাপ করা | ১৪৮টি পূর্বনির্ধারিত নাম | প্রোটোটাইপিং, পাঠযোগ্য কোড, দ্রুত প্রদর্শনী |
CSS Color Level 4 (W3C) আরও lab(), lch() এবং color() ফাংশন সংজ্ঞায়িত করে। HEX এবং RGB ব্রাউজার ও ডিজাইন টুলগুলোতে সবচেয়ে ব্যাপকভাবে সমর্থিত থাকে।
সঠিক রঙ টুল কীভাবে বেছে নেবেন
প্রতিটি রঙ টুল একটি ভিন্ন সমস্যা সমাধান করে। আপনার কাজের জন্য সঠিকটি খুঁজে পেতে নিচের গাইড ব্যবহার করুন।
- 1
যদি আপনার প্রয়োজন হয় HEX, RGB, HSL বা HSV ফরম্যাটের মধ্যে রঙ রূপান্তর করতে → রঙ কনভার্টার - 2
যদি আপনার প্রয়োজন হয় একটি টেক্সট/ব্যাকগ্রাউন্ড রঙের জুটি WCAG অ্যাক্সেসিবিলিটি মান পূরণ করছে কিনা যাচাই করতে → রঙ কনট্রাস্ট চেকার - 3
যদি আপনার প্রয়োজন হয় একটি একক মূল রঙ থেকে সমন্বিত রঙের একটি সেট তৈরি করতে → রঙ প্যালেট জেনারেটর - 4
যদি আপনার প্রয়োজন হয় একটি লিনিয়ার বা রেডিয়াল CSS গ্রেডিয়েন্ট তৈরি করে কোড পেতে → CSS গ্রেডিয়েন্ট জেনারেটর - 5
যদি আপনার প্রয়োজন হয় কোনো রঙের মানের সবচেয়ে কাছের মানব-পাঠযোগ্য CSS নাম খুঁজে পেতে → রঙের নাম ফাইন্ডার - 6
যদি আপনার প্রয়োজন হয় যেকোনো রঙকে নিকটতম Tailwind CSS ইউটিলিটি ক্লাসে ম্যাপ করতে → Tailwind রঙ ফাইন্ডার
সবগুলো ছয়টি টুল একাধিক ফরম্যাটে ইনপুট গ্রহণ করে। আপনি যদি নিশ্চিত না হন আপনার রঙ কোন ফরম্যাটে আছে, রঙ কনভার্টার দিয়ে শুরু করুন, যা HEX, RGB, HSL এবং HSV নোটেশন স্বয়ংক্রিয়ভাবে সনাক্ত করে।
প্রায়শই জিজ্ঞাসিত প্রশ্ন
HEX এবং RGB রঙ ফরম্যাটের মধ্যে পার্থক্য কী?
HEX এবং RGB একই রঙের স্থান উপস্থাপন করে। #ff6600-এর মতো একটি HEX কোড হল তিনটি RGB চ্যানেলের হেক্সাডেসিমাল এনকোডিং: ff = 255 (লাল), 66 = 102 (সবুজ), 00 = 0 (নীল)। পার্থক্য শুধু নোটেশনে। CSS স্টাইলশিটে HEX আরও সংক্ষিপ্ত, যেখানে RGB প্রোগ্রামেটিক্যালি পরিচালনা করা সহজ কারণ প্রতিটি চ্যানেল ইতিমধ্যেই একটি দশমিক পূর্ণসংখ্যা।
HEX বা RGB-এর পরিবর্তে HSL কখন ব্যবহার করব?
HSL হিউ (রঙটি নিজেই) কে স্যাচুরেশন ও লাইটনেস থেকে আলাদা করে। এটি শেড ভেরিয়েন্ট তৈরি করা সহজ করে: হিউ স্থির রেখে, গাঢ় শেডের জন্য লাইটনেস কমান, হালকা টিন্টের জন্য বাড়ান। ডিজাইন সিস্টেমগুলো যা একটি একক মূল রঙ থেকে লাইট/ডার্ক থিম তৈরি করে প্রায়ই এই কারণে HSL-এ টোকেন সংরক্ষণ করে। CSS কাস্টম প্রোপার্টিও HSL-এর সাথে ভালোভাবে কাজ করে কারণ আপনি পৃথক চ্যানেল ওভাররাইড করতে পারেন।
টেক্সটের জন্য WCAG 2.1 কী কনট্রাস্ট রেশিও প্রয়োজন?
WCAG 2.1 Level AA সাধারণ টেক্সটের জন্য (১৮pt-এর নিচে বা ১৪pt বোল্ড) ন্যূনতম ৪.৫:১ কনট্রাস্ট রেশিও এবং বড় টেক্সটের জন্য (১৮pt+ বা ১৪pt+ বোল্ড) ৩:১ প্রয়োজন। Level AAA সেই থ্রেশহোল্ড যথাক্রমে ৭:১ এবং ৪.৫:১-এ উন্নীত করে। এই রেশিওগুলো WCAG 2.1 Success Criterion 1.4.3-এ সংজ্ঞায়িত সূত্র ব্যবহার করে ফোরগ্রাউন্ড ও ব্যাকগ্রাউন্ড রঙের আপেক্ষিক লুমিন্যান্স থেকে গণনা করা হয়।
CSS কতটি নামযুক্ত রঙ সমর্থন করে?
CSS ১৪৮টি নামযুক্ত রঙ সংজ্ঞায়িত করে, যা SVG 1.1 এবং CSS3 রঙ স্পেসিফিকেশন থেকে উত্তরাধিকারসূত্রে পাওয়া। এগুলো red, blue এবং white-এর মতো সাধারণ নাম থেকে MediumSlateBlue, PapayaWhip এবং LavenderBlush-এর মতো নির্দিষ্ট নাম পর্যন্ত বিস্তৃত। নামযুক্ত রঙগুলো নির্দিষ্ট RGB মানের সাথে ম্যাপ করা। CSS Color Level 4 স্পেসিফিকেশন একই ১৪৮টি নাম বজায় রাখে এবং নতুন কোনো নাম যোগ করে না। ব্রাউজারগুলো transparent কীওয়ার্ডও চেনে (rgba(0,0,0,0)-এর সমতুল্য)।
আমি কি আজ CSS-এ OKLCH রঙ ব্যবহার করতে পারি?
হ্যাঁ। oklch() ফাংশন Chrome 111+, Firefox 113+ এবং Safari 15.4+-এ সমর্থিত। OKLCH হল W3C কর্তৃক প্রকাশিত CSS Color Level 4 স্পেসিফিকেশনের অংশ। HSL-এর তুলনায় এর প্রধান সুবিধা হল পারসেপচুয়াল ইউনিফর্মিটি: OKLCH-এ একই লাইটনেস মানসহ দুটি রঙ মানুষের চোখে সমানভাবে উজ্জ্বল দেখায়, যা HSL-এর ক্ষেত্রে সত্য নয়। এটি OKLCH-কে সামঞ্জস্যপূর্ণ অনুভূত উজ্জ্বলতা সহ অ্যাক্সেসিবল প্যালেট তৈরির জন্য আরও ভালো পছন্দ করে তোলে।
HSL এবং HSV-এর মধ্যে পার্থক্য কী?
HSL এবং HSV উভয়ই হিউকে একটি কোণ হিসেবে ব্যবহার করে নলাকার উপস্থাপনা ব্যবহার করে, কিন্তু তারা উজ্জ্বলতা ভিন্নভাবে সংজ্ঞায়িত করে। HSL-এ, ৫০% লাইটনেস হল বিশুদ্ধ রঙ; ০% হল কালো, ১০০% হল সাদা। HSV-তে, ১০০% ভ্যালু হল বিশুদ্ধ রঙ; ০% হল কালো। স্যাচুরেশন না কমিয়ে HSV-তে সাদায় পৌঁছানোর কোনো অন্তর্নির্মিত উপায় নেই। ডিজাইনার ও কালার পিকার (Photoshop, Figma) সাধারণত HSV ব্যবহার করে, যেখানে CSS স্বাভাবিকভাবেই HSL ব্যবহার করে।
যেকোনো HEX রঙের জন্য Tailwind ক্লাস কীভাবে খুঁজব?
Tailwind CSS প্রায় ২২০টি রঙ ক্লাসের একটি নির্দিষ্ট প্যালেট নিয়ে আসে (২২টি হিউ প্রতিটিতে ১০টি শেড, এছাড়া কালো, সাদা এবং ট্রান্সপারেন্ট)। কোনো HEX মানের জন্য নিকটতম ক্লাস খুঁজে পেতে, আপনি আপনার রঙ এবং প্রতিটি Tailwind সোয়াচের মধ্যে একটি পারসেপচুয়াল রঙ স্পেসে (যেমন CIELAB বা OKLCH) ইউক্লিডিয়ান দূরত্ব গণনা করুন। ToolDeck-এর Tailwind রঙ ফাইন্ডার এটি স্বয়ংক্রিয়ভাবে করে এবং রঙের পার্থক্যসহ সবচেয়ে কাছের মিল দেখায় যাতে আপনি বিচার করতে পারেন আনুমানিক মিল যথেষ্ট ভালো কিনা।
কোনো অনলাইন টুলে গোপনীয় ব্র্যান্ড রঙ পেস্ট করা কি নিরাপদ?
এটি টুলের উপর নির্ভর করে। যেকোনো টুল যা আপনার ইনপুট সার্ভারে পাঠায় তা নেটওয়ার্ক ট্রাফিক ও সার্ভার লগে সেই মানগুলো প্রকাশ করে। ToolDeck-এর রঙ টুলগুলো ক্লায়েন্ট-সাইড JavaScript ব্যবহার করে সম্পূর্ণরূপে আপনার ব্রাউজারে চলে। কোনো HTTP অনুরোধ আপনার রঙের ডেটা কোনো ব্যাকএন্ডে বহন করে না। টুলটি ব্যবহার করার সময় আপনার ব্রাউজারের Network ট্যাব খুলে এটি যাচাই করতে পারেন। সর্বোচ্চ সতর্কতার জন্য, প্রথম পেজ লোডের পরে অফলাইনেও টুলগুলো ব্যবহার করা যাবে।