একটি রং লেখার তিনটি পথ
| HEX | #2563D9 |
| RGB | rgb(37, 99, 217) |
| HSL | hsl(219, 71%, 50%) |
তিনটিই একই নীল। পর্দা প্রতিটি রং মেশায় লাল, সবুজ আর নীল আলো থেকে, আর প্রতিটি রূপ ওই পরিমাণগুলো লেখার একটি আলাদা পথ।
RGB আর HEX
RGB লাল, সবুজ আর নীল দেয় 0 থেকে 255 পর্যন্ত। HEX একই তিনটি সংখ্যা লেখে 16 ভিত্তিতে, প্রত্যেকটি দুই অঙ্কে: 25 মানে 37, 63 মানে 99 আর D9 মানে 217। #FFF-র মতো একটি ছোট কোড প্রতিটি অঙ্ক দ্বিগুণ করে (#FFFFFF, সাদা), আর একটি চতুর্থ জোড়া পারদর্শিতা জোড়ে (#2563D980 প্রায় অর্ধেক দেখা-যাওয়া)।
HSL
HSL একটি রং বর্ণনা করে মানুষ যেভাবে তা ভাবেন: বর্ণ হলো রঙের চাকায় ডিগ্রিতে অবস্থান (0 লাল, 120 সবুজ, 240 নীল), পূর্ণতা হলো তা কত জোরালো, আর হালকাভাব চলে 0%-এ কালো থেকে 100%-এ সাদা পর্যন্ত। তাতে একটি হালকা কিংবা গাঢ় ছায়া বানানো সহজ হয়ে যায়: বর্ণ আর পূর্ণতা একই রেখে হালকাভাবটি বদলে দিন।
CMYK ছাপার জন্য
ছাপার যন্ত্র আলোর বদলে সায়ান, ম্যাজেন্টা, হলুদ আর কালো কালি মেশায়। RGB আর CMYK-র মধ্যে রূপান্তর আন্দাজি, কারণ পর্দা আর কালি ঠিক একই পরিসরের রং দেখাতে পারে না।
লেখার জন্য বৈসাদৃশ্য
WCAG সুগম্যতার পথনির্দেশ AA স্তরে সাধারণ লেখার জন্য অন্তত 4.5:1 আর বড় লেখার জন্য 3:1 বৈসাদৃশ্যের অনুপাত চায়। রং রূপান্তরকারী এই সব রূপের মধ্যে বদলে দেয় আর সাদা ও কালো লেখার বিপরীতে বৈসাদৃশ্য পরখ করে। একটি ছবি কিংবা পর্দার ছবিতে একটি রঙের কোড খুঁজতে ছবি থেকে রং তুলুন ব্যবহার করুন।
HSL দিয়ে একটি রঙের তালিকা গড়া
বর্ণ একই রেখে হালকাভাব বদলে দিন, আর আপনি এমন একগুচ্ছ ছায়া পাবেন যা একসঙ্গেই মানায়। hsl(219, 71%, 50%), অর্থাৎ একটি মাঝারি নীল থেকে:
| ব্যবহার | HSL | HEX |
|---|---|---|
| ছোঁয়ার পটভূমি | hsl(219, 71%, 95%) | #E9F0FB |
| সীমানা | hsl(219, 71%, 80%) | #A8C1F0 |
| বোতাম | hsl(219, 71%, 50%) | #2564DA |
| চাপা বোতাম | hsl(219, 71%, 40%) | #1E50AE |
| শিরোনামের লেখা | hsl(219, 71%, 25%) | #12326D |
HEX-এ একই কাজ করা মানে একবারেই তিনটি সংখ্যা আন্দাজ করা, আর তাই নকশার সরঞ্জাম HSL-এই কাজ করে।
বৈসাদৃশ্য দেখে নেওয়া
সাদার বিপরীতে ওই নীল বৈসাদৃশ্যের অনুপাত দেয় 5.37:1, যা সাধারণ লেখার 4.5:1 পার করে। কালোর বিপরীতে তা কেবল 3.91:1, তাই বোতামে কালো নয়, সাদা লেখা। বৈসাদৃশ্য বর্ণের চেয়ে হালকাভাবের ওপরেই অনেক বেশি নির্ভর করে, তাই একটি মাঝারি-হালকাভাবের রং প্রায়ই দুটিরই বিপরীতে ব্যর্থ হয়।
চেনা ভুল
- একই হালকাভাব সমান উজ্জ্বল দেখাবে আশা করা। hsl(60, 100%, 50%) একটি ঝলমলে হলুদ, hsl(240, 100%, 50%) একটি গাঢ় নীল। আমাদের চোখ নীলের চেয়ে সবুজে অনেক বেশি সংবেদী। বৈসাদৃশ্য দেখে নিন, হালকাভাবের সংখ্যায় ভরসা করবেন না।
- HSL আর HSB গুলিয়ে ফেলা। Photoshop-র HSB, যাকে HSV-ও বলা হয়, তা HSL নয়। 100% উজ্জ্বলতা আর 100% পূর্ণতায় HSB একটি বিশুদ্ধ বর্ণ দেয়, আর 100% হালকাভাবে HSL সবসময়ই সাদা।
- যেখানে চলে না সেখানে পারদর্শিতাওয়ালা একটি HEX কোড লেখা। আট-অঙ্কের HEX ব্রাউজারে চলে, কিন্তু অনেক অ্যাপ আর পুরোনো সরঞ্জাম কেবল ছয় অঙ্কই নেয়।
- একটি পর্দার ছবির রং বিচার করা। JPG হিসেবে সংকুচিত একটি পর্দার ছবি পিক্সেলের মান সরিয়ে দেয়, তাই তুলে নেওয়া একটি রং কয়েক ধাপ সরে থাকতে পারে। একটি PNG থেকে তুলে নিন।