রং কনভার্টার কী?
একটি রং কনভার্টার হলো ওয়েব ডেভেলপার, গ্রাফিক ডিজাইনার এবং ডিজিটাল রং নিয়ে কাজ করেন এমন সকলের জন্য একটি অপরিহার্য সরঞ্জাম।
এই ক্যালকুলেটর কখন ব্যবহার করবেন
- Figma বা Sketch থেকে CSS-সামঞ্জস্যপূর্ণ মানে একটি ডিজাইনারের রং স্পেসিফিকেশন রূপান্তর করার সময়।
- একটি ডিজাইন সিস্টেম তৈরি করার সময়।
- HSL ব্যবহার করে রং প্যালেট তৈরি করার সময়।
- WCAG মানদণ্ড অনুযায়ী প্রবেশযোগ্যতা সমতার জন্য রং কন্ট্রাস্ট পরীক্ষা করার সময়।
- বিদ্যমান কোডে পুরানো রং মান একটি ভিন্ন ফর্ম্যাটে রূপান্তর করার সময়।
- ফর্ম্যাট জুড়ে একটি রং প্রকৃতভাবে কেমন দেখায় তা যাচাই করে CSS রং সমস্যা ডিবাগ করার সময়।
ধাপসমূহ:
- যেকোনো ফর্ম্যাটে একটি রং মান প্রবেশ করুন।
- HEX / RGB / HSL ট্যাব ব্যবহার করে ইনপুট ফর্ম্যাট নির্বাচন করুন।
- ইনপুটের নিচে তিনটি ফর্ম্যাটে রূপান্তরিত মান দেখুন।
- সেই মান কপি করতে যেকোনো ফর্ম্যাটে কপি বোতাম ব্যবহার করুন।
- প্রবেশযোগ্যতা সমতা যাচাই করতে WCAG কন্ট্রাস্ট ব্যাজ দেখুন।
সূত্র
HEX → RGB: #RRGGBB কে দশমিক মানে বিভক্ত করুন
RGB → HSL: RGB নরমালাইজ করুন → হিউ/স্যাচুরেশন/লাইটনেস খুঁজুন
HSL → RGB: ক্রোমা সূত্র ব্যবহার করে রূপান্তর করুন
ব্যবহারের ক্ষেত্র
- CSS রঙ মান রূপান্তর
- বেস রং থেকে রং স্কিম তৈরি করা
- ডিজাইন সিস্টেমের রঙ মিলানো
- HSL-এর মাধ্যমে রং সম্পর্ক বোঝা
প্রধান সুবিধাসমূহ
- HEX, RGB এবং HSL ফর্ম্যাটের মধ্যে তাৎক্ষণিক এবং নিখুঁতভাবে রং রূপান্তর করুন
- টাইপ করার সাথে সাথে রিয়েল-টাইমে আপডেট হওয়া লাইভ রং পূর্বরূপ দেখুন
- স্বয়ংক্রিয় AA এবং AAA ব্যাজ ইঙ্গিত সহ WCAG কন্ট্রাস্ট অনুপাত পরীক্ষা করুন
- আপনার সাম্প্রতিক রং সংরক্ষণকারী একটি রূপান্তর ইতিহাস অ্যাক্সেস করুন
- এক ক্লিকে যেকোনো ফর্ম্যাট কপি করুন
- কোনো ডাটা সার্ভারে পাঠানো ছাড়াই সম্পূর্ণরূপে আপনার ব্রাউজারে কাজ করে
প্রো টিপস
- রং ভেরিয়েশন তৈরি করতে HSL ব্যবহার করুন
- CSS এবং HTML-এর জন্য সবসময় HEX ব্যবহার করুন
- WCAG কন্ট্রাস্ট প্রয়োজনীয়তার সাথে আপনার রং পছন্দ যাচাই করুন
- একটি ডিজাইন সিস্টেম তৈরি করার সময় আপনার বেস প্যালেট HSL-এ সংজ্ঞায়িত করুন
- মনে রাখবেন HEX মান কেস-ইনসেন্সিটিভ
এড়ানোর সাধারণ ভুলসমূহ
- HEX রং প্রবেশ করার সময় # উপসর্গ ভুলে যাওয়া
- 0-255 পরিসীমার বাইরে RGB চ্যানেল মান ব্যবহার করা
- HSL হিউ পরিসীমা RGB চ্যানেল পরিসীমার সাথে বিভ্রান্ত করা
- HSL লাইটনেস এবং RGB উজ্জ্বলতা সমান ধরে নেওয়া
মূল শব্দ ব্যাখ্যা
- HEX: CSS এবং ওয়েব ডিজাইনে ব্যবহৃত একটি হেক্সাডেসিমাল রং নোটেশন, #RRGGBB হিসাবে লেখা।
- RGB: লাল-সবুজ-নীল রং মডেল যেখানে প্রতিটি রং তিনটি সংখ্যাসূচক মান দ্বারা সংজ্ঞায়িত।
- HSL: হিউ-স্যাচুরেশন-লাইটনেস রং মডেল।
- রং স্পেস: রং সংগঠিত এবং উপস্থাপন করার জন্য একটি গাণিতিক মডেল।
- WCAG কন্ট্রাস্ট অনুপাত: অগ্রভূমি পাঠ্য এবং পটভূমির রংয়ের মধ্যে উজ্জ্বলতার পার্থক্যের একটি সংখ্যাসূচক পরিমাপ।
সম্পর্কিত ধারণা
- CSS ইউনিট কনভার্টার: px, rem, em, vw এবং অন্যান্য CSS ইউনিটের মধ্যে রূপান্তর।
- Base64 এনকোডার/ডিকোডার: Base64 স্ট্রিং এনকোড এবং ডিকোড করুন।
- JSON ফর্ম্যাটার: JSON ডাটা ফর্ম্যাট এবং যাচাই করুন।
- রেজেক্স পরীক্ষক: নমুনা পাঠ্যে নিয়মিত এক্সপ্রেশন পরীক্ষা করুন
- URL এনকোডার/ডিকোডার: URL-সুরক্ষিত স্ট্রিং এনকোড এবং ডিকোড করুন।
উদাহরণ
ইনপুট: #FF5733 (HEX) → RGB: rgb(255, 87, 51) → HSL: hsl(11, 100%, 60%). ইনপুট: hsl(200, 50%, 50%) → RGB: rgb(64, 149, 191) → HEX: #4095BF.
আপনার ফলাফলের ব্যাখ্যা
কনভার্টার আপনার রং তিনটি ফর্ম্যাটে একই সাথে প্রদর্শন করে। HEX হলো ওয়েব ডেভেলপমেন্টে সবচেয়ে সাধারণ ফর্ম্যাট। RGB সরাসরি রং চ্যানেলে নিয়ন্ত্রণ দেয়। HSL মানুষের বোঝার জন্য সবচেয়ে স্বাভাবিক।