কীভাবে ব্যবহার করবেন
- একটি রং লিখুন — #0f766e, rgb(15 118 110), hsl(175 77% 26%), oklch(…) — অথবা কালার পিকার দিয়ে বেছে নিন।
- তালিকা থেকে আপনার প্রয়োজনীয় ফরম্যাটটি কপি করুন।
- কন্ট্রাস্ট অনুপাত এবং WCAG AA/AAA ফলাফল দেখতে একটি ব্যাকগ্রাউন্ড রং সেট করুন।
- স্কেলে একটি শেডে ক্লিক করে সেটি ব্যবহার করুন।
অপশনগুলোর ব্যাখ্যা
- HEX / RGB
- স্ক্রিনের রং লাল, সবুজ ও নীলের মান হিসেবে 0–255 পর্যন্ত দেখায়। #rrggbbaa এবং rgb(… / 50%) স্বচ্ছতাও যোগ করে।
- HSL / HSV
- Hue, saturation এবং lightness (অথবা value)। হাতে করে কোনো রং হালকা বা গাঢ় করার জন্য সুবিধাজনক।
- OKLCH
- CSS Color 4-এর একটি অনুভূতিনির্ভর রঙের স্থান। Lightness বদলালে hue এবং চোখে অনুভূত রঙের তীব্রতা স্থির থাকে, তাই palette ও dark theme-এর জন্য এটি আদর্শ।
- CMYK
- শুধু রেফারেন্সের জন্য একটি সরল রূপান্তর। আসল প্রিন্টের রং প্রিন্টারের color profile-এর ওপর নির্ভর করে, তাই সঠিক মানের জন্য আপনার প্রিন্টারকে জিজ্ঞেস করুন।
- কন্ট্রাস্ট অনুপাত
- WCAG 2.2-এর AA স্তরে সাধারণ লেখার জন্য 4.5:1 এবং বড় লেখার জন্য 3:1 (18pt, অথবা 14pt গাঢ়) দরকার; AAA স্তরে দরকার যথাক্রমে 7:1 ও 4.5:1।
উদাহরণ
#0f766e হলো rgb(15 118 110), hsl(175 77% 26%) এবং oklch(51.1% 0.086 186.4)। সাদা ব্যাকগ্রাউন্ডে এর কন্ট্রাস্ট অনুপাত প্রায় 5.5:1, যা সব আকারের লেখার জন্য WCAG AA পাস করে।
সব ফরম্যাটে প্রচলিত রং
CSS-এর নামযুক্ত রং ও তাদের মান। এখানকার CMYK একটি সরল গাণিতিক রূপান্তর; পেশাদার প্রিন্টিংয়ের জন্য আপনার প্রিন্টারের কালার প্রোফাইলের CMYK মান ব্যবহার করুন।
| CSS নাম | HEX | RGB | HSL | CMYK |
|---|---|---|---|---|
| red | #ff0000 | rgb(255 0 0) | hsl(0 100% 50%) | 0%, 100%, 100%, 0% |
| orange | #ffa500 | rgb(255 165 0) | hsl(39 100% 50%) | 0%, 35%, 100%, 0% |
| gold | #ffd700 | rgb(255 215 0) | hsl(51 100% 50%) | 0%, 16%, 100%, 0% |
| green | #008000 | rgb(0 128 0) | hsl(120 100% 25%) | 100%, 0%, 100%, 50% |
| teal | #008080 | rgb(0 128 128) | hsl(180 100% 25%) | 100%, 0%, 0%, 50% |
| blue | #0000ff | rgb(0 0 255) | hsl(240 100% 50%) | 100%, 100%, 0%, 0% |
| navy | #000080 | rgb(0 0 128) | hsl(240 100% 25%) | 100%, 100%, 0%, 50% |
| purple | #800080 | rgb(128 0 128) | hsl(300 100% 25%) | 0%, 100%, 0%, 50% |
| hotpink | #ff69b4 | rgb(255 105 180) | hsl(330 100% 71%) | 0%, 59%, 29%, 0% |
| brown | #a52a2a | rgb(165 42 42) | hsl(0 59% 41%) | 0%, 75%, 75%, 35% |
| gray | #808080 | rgb(128 128 128) | hsl(0 0% 50%) | 0%, 0%, 0%, 50% |
কোন ফরম্যাট ব্যবহার করবেন
HEX হলো CSS ও ডিজাইন টুলে রং লেখার সবচেয়ে সংক্ষিপ্ত উপায়: লাল, সবুজ ও নীলের জন্য দুটি করে হেক্স অঙ্ক।
RGB একই তথ্য দশমিকে প্রকাশ করে, আর rgb(255 0 0 / 50%) স্বচ্ছতা যোগ করে।
HSL হিউ, স্যাচুরেশন ও লাইটনেস বর্ণনা করে, ফলে শুধু শেষ সংখ্যাটি বদলে একই রঙের হালকা বা গাঢ় শেড বানানো সহজ হয়।
OKLCH CSS-এর নতুন একটি ফরম্যাট, যেখানে উজ্জ্বলতার সমান ধাপগুলো চোখে সমান আলাদা দেখায় — অ্যাক্সেসিবল কালার প্যালেটের জন্য কাজের।
সচরাচর জিজ্ঞাসিত প্রশ্ন
লেখার জন্য ভালো কন্ট্রাস্ট অনুপাত কত?
মূল লেখার জন্য অন্তত 4.5:1 (WCAG AA)। সাদা রঙের ওপর একেবারে কালোর অনুপাত 21:1; সাদা রঙের ওপর প্রচলিত #767676 ধূসর 4.54:1, যা মাত্র পাস করে।
CMYK-এর মান Photoshop-এর থেকে আলাদা কেন?
Photoshop নির্দিষ্ট প্রেস ও কাগজের জন্য একটি ICC color profile ব্যবহার করে রূপান্তর করে। এই টুলটি সরল গাণিতিক সূত্র ব্যবহার করে, যা আনুমানিক হিসাবের জন্য ঠিক আছে, তবে print proof-এর জন্য নয়।
HSL ও OKLCH-এর মধ্যে পার্থক্য কী?
HSL হলো RGB-এর একটি সরল পুনর্বিন্যাস, তাই একই lightness থাকা হলুদ ও নীল উজ্জ্বলতার দিক থেকে খুব আলাদা দেখায়। OKLCH এমনভাবে তৈরি যে একই lightness চোখে সমান উজ্জ্বল দেখায়।
আপনি কি আজ CSS-এ OKLCH ব্যবহার করতে পারেন?
হ্যাঁ। oklch() বর্তমান সব প্রধান ব্রাউজারে কাজ করে।
গোপনীয়তা
এই টুলটি পুরোপুরি আপনার ব্রাউজারে চলে। আপনার ফাইল ও লেখা আপনার ডিভাইসেই প্রসেস হয় এবং কখনো আমাদের সার্ভারে আপলোড হয় না।