কালার পিকার
যেকোনো রং বেছে নিন এবং সব প্রচলিত ফরম্যাটে তার কোড পান, কপি করার জন্য প্রস্তুত। মানানসই প্যালেট তৈরি করুন, ছবি আপলোড না করেই তার প্রধান রংগুলো বের করুন, এবং লেখা ও ব্যাকগ্রাউন্ডের রঙের জোড়া WCAG কনট্রাস্টে পাস করে কিনা পরীক্ষা করুন।
কালার পিকার
সব ফরম্যাটে রঙের কোড
- HEX#2F6FED
- RGB47, 111, 237
- HSL220°, 84%, 56%
- HSB / HSV220°, 80%, 93%
- CMYK (আনুমানিক)80%, 53%, 0%, 7%
- CSS rgb()rgb(47 111 237)
- CSS hsl()hsl(220 84% 56%)
এই রং থেকে প্যালেট
পরিপূরক
সদৃশ
ট্রায়াডিক
টিন্ট (সাদার সঙ্গে মেশানো)
শেড (কালোর সঙ্গে মেশানো)
ছবি থেকে প্যালেট
আপনার ছবি আপনার নিজের ব্রাউজারেই পড়া হয়, কখনো আপলোড হয় না: এই ডিভাইসে ক্যানভাসে পিক্সেল নমুনা নেওয়া হয় এবং কোথাও কিছু পাঠানো হয় না।
এখানে ছবি, স্ক্রিনশট বা লোগো ছেড়ে দিন
আপনার ছবির ছয়টি প্রধান রং এখানে দেখা যাবে। পিকারে লোড করতে কোনো সোয়াচে ক্লিক করুন।
কনট্রাস্ট চেকার (WCAG 2.1)
বড় টেক্সটের নমুনা
The quick brown fox jumps over the lazy dog. 0123456789
- AA · সাধারণ টেক্সটপাস
- AAA · সাধারণ টেক্সটপাস
- AA · বড় টেক্সটপাস
- AAA · বড় টেক্সটপাস
বড় টেক্সট মানে অন্তত 18 pt (24 px) রেগুলার বা 14 pt (প্রায় 18.7 px) বোল্ড। AA-এর জন্য সাধারণ টেক্সটে 4.5:1 ও বড় টেক্সটে 3:1 লাগে; AAA-তে 7:1 ও 4.5:1।
প্রচলিত CSS নামযুক্ত রং
প্রতিটি ব্রাউজারের চেনা কুড়িটি কীওয়ার্ড, তাদের সঠিক HEX, RGB ও HSL মানসহ।
| নাম | HEX | RGB | HSL |
|---|---|---|---|
black | #000000 | 0, 0, 0 | 0°, 0%, 0% |
white | #ffffff | 255, 255, 255 | 0°, 0%, 100% |
gray | #808080 | 128, 128, 128 | 0°, 0%, 50% |
silver | #c0c0c0 | 192, 192, 192 | 0°, 0%, 75% |
red | #ff0000 | 255, 0, 0 | 0°, 100%, 50% |
crimson | #dc143c | 220, 20, 60 | 348°, 83%, 47% |
maroon | #800000 | 128, 0, 0 | 0°, 100%, 25% |
tomato | #ff6347 | 255, 99, 71 | 9°, 100%, 64% |
coral | #ff7f50 | 255, 127, 80 | 16°, 100%, 66% |
orange | #ffa500 | 255, 165, 0 | 39°, 100%, 50% |
gold | #ffd700 | 255, 215, 0 | 51°, 100%, 50% |
yellow | #ffff00 | 255, 255, 0 | 60°, 100%, 50% |
olive | #808000 | 128, 128, 0 | 60°, 100%, 25% |
green | #008000 | 0, 128, 0 | 120°, 100%, 25% |
teal | #008080 | 0, 128, 128 | 180°, 100%, 25% |
aqua | #00ffff | 0, 255, 255 | 180°, 100%, 50% |
blue | #0000ff | 0, 0, 255 | 240°, 100%, 50% |
navy | #000080 | 0, 0, 128 | 240°, 100%, 25% |
purple | #800080 | 128, 0, 128 | 300°, 100%, 25% |
rebeccapurple | #663399 | 102, 51, 153 | 270°, 50%, 40% |
HEX, RGB, HSL ও HSB আসলে কী বোঝায়
এই পেজের প্রতিটি রঙ sRGB-তে দেওয়া, যা ১৯৯০-এর দশকের শেষে ব্রাউজারগুলো গ্রহণ করার পর থেকে ওয়েবের ডিফল্ট কালার স্পেস। স্ক্রিন লাল, সবুজ ও নীল আলো মিশিয়ে রঙ তৈরি করে, আর প্রতিটি চ্যানেলে ২৫৬টি স্তর (0–255) থাকে, ফলে মোট 16,777,216টি রঙ সম্ভব। RGB সরাসরি এই তিনটি সংখ্যা লেখে; HEX একই তিনটি সংখ্যা ১৬ ভিত্তিতে, প্রতিটি দুই অঙ্কে লেখে, তাই #FF6600 মানে লাল 255, সবুজ 102, নীল 0। তিন অঙ্কের সংক্ষিপ্ত রূপে প্রতিটি অঙ্ক দ্বিগুণ হয়: #F60 মানে #FF6600।
HSL ও HSB (যাকে HSV-ও বলে) একই রঙকে এমনভাবে বর্ণনা করে যা হাতে বদলানো সহজ। হিউ হলো কালার হুইলের একটি কোণ: 0° লাল, 120° সবুজ, 240° নীল। পার্থক্য শেষ সংখ্যায়। HSL-এ লাইটনেস 100% মানে সবসময় সাদা, আর 50% হলো হিউয়ের সবচেয়ে খাঁটি রূপ; HSB-তে ব্রাইটনেস 100% মানে খাঁটি হিউ, আর সাদা পেতে স্যাচুরেশন 0% লাগে। Photoshop ও Figma-র মতো ডিজাইন অ্যাপ পিকারে HSB ব্যবহার করে, আর CSS নিজে থেকেই hsl() বোঝে, তাই উপরে দুটোই দেখানো হয়েছে।
CMYK মান কেন শুধু আনুমানিক
স্ক্রিন আলো যোগ করে; প্রিন্টার সায়ান, ম্যাজেন্টা, ইয়েলো ও ব্ল্যাক কালি দিয়ে আলো বাদ দেয়। দুই পদ্ধতির রঙের পরিসর আলাদা, যাকে গ্যামুট বলে। উজ্জ্বল RGB সবুজ, ইলেকট্রিক নীল বা নিয়ন কমলার মতো খুব স্যাচুরেটেড স্ক্রিন রঙ প্রসেস কালিতে ফুটিয়ে তোলা যায় না, তাই প্রিন্টে সেগুলো মনিটরের চেয়ে ফ্যাকাশে দেখায়।
এখানকার CMYK সংখ্যা ICC প্রোফাইল ছাড়া সাধারণ গাণিতিক রূপান্তরে তৈরি, যা মোটামুটি ব্রিফের জন্য কাজের, কিন্তু প্রেসের জন্য নয়। প্রিন্টার তার কাগজ ও প্রেসের প্রোফাইল দিয়ে রূপান্তর করে, যেমন ইউরোপে FOGRA39 বা যুক্তরাষ্ট্রে GRACoL, আর একই RGB রঙে প্রতিটিতে কালির শতাংশ আলাদা আসতে পারে। প্রিন্টের কাজে RGB বা HEX মানের সাথে আপনার প্রিন্টারের চাওয়া প্রোফাইলও পাঠান।
কনট্রাস্ট রেশিও কীভাবে হিসাব করা হয়
WCAG 2.1 দুটি রঙের আপেক্ষিক ল্যুমিন্যান্স তুলনা করে: হালকাটির সাথে 0.05 যোগ করে গাঢ়টির সাথে 0.05 যোগফল দিয়ে ভাগ। ফল 1:1 (একই রঙ) থেকে 21:1 (সাদার উপর কালো) পর্যন্ত হয়। AA স্তরে সাধারণ লেখার জন্য কমপক্ষে 4.5:1 এবং বড় লেখার (18 পয়েন্ট বা 14 পয়েন্ট বোল্ড) জন্য 3:1 লাগে; AAA স্তরে তা 7:1 ও 4.5:1। ইনপুটের বর্ডার ও আইকনের মতো ইউজার-ইন্টারফেস অংশের জন্য সাকসেস ক্রাইটেরিয়ন 1.4.11 অনুযায়ী আশপাশের সাথে 3:1 লাগে।
ল্যুমিন্যান্সে সবুজের ওজন নীলের চেয়ে অনেক বেশি, কারণ চোখ সবুজের প্রতি সবচেয়ে সংবেদনশীল। তাই সাদার উপর হলুদ লেখা মারাত্মকভাবে ব্যর্থ হয়, অথচ সাদার উপর গাঢ় নীল সহজেই পাস করে, যদিও দুটো রঙই পুরোপুরি স্যাচুরেটেড দেখায়। লোগো ও শুধু সাজসজ্জার লেখা এই নিয়মের বাইরে।
ছবি বা লোগো থেকে প্যালেট বের করা
ইমেজ প্যালেট আপনার ফাইলটি ব্রাউজারের ক্যানভাসে পড়ে, লম্বা দিকে সর্বোচ্চ 200 পিক্সেলে ছোট করে এবং ১৯৮২ সালে Paul Heckbert-এর বর্ণিত মিডিয়ান-কাট পদ্ধতিতে একই ধরনের পিক্সেল দলবদ্ধ করে: রঙের পরিসরকে সবচেয়ে চওড়া চ্যানেল বরাবর বারবার ভাগ করা হয় যতক্ষণ না ছয়টি দল থাকে, আর প্রতিটি দলের গড় একটি সোয়াচ হয়। স্বচ্ছ পিক্সেল বাদ যায়, তাই স্বচ্ছ ব্যাকগ্রাউন্ডের লোগো থেকে লোগোর রঙই পাওয়া যায়।
রঙগুলো পেয়ে গেলে, সমতল লোগো প্রায়ই ভেক্টর হিসেবে ভালো কাজ করে। ছবি থেকে SVG কনভার্টার এই হুবহু রঙ রেখে আকৃতিতে ট্রেস করে, আর চ্যানেল হেডার ডিজাইন করলে YouTube ব্যানার রিসাইজার সেফ এরিয়া মাথায় রেখে আর্টওয়ার্ক 2560 × 1440-এ বসিয়ে দেয়।
সচরাচর জিজ্ঞাসা
- CSS-এর "green" কেন RGB পিকারের সবুজের চেয়ে গাঢ়?
- কিওয়ার্ড green হলো #008000, পুরনো ১৬ রঙের HTML প্যালেট থেকে পাওয়া একটি মাঝারি সবুজ। পুরোপুরি স্যাচুরেটেড #00FF00-কে বলা হয় lime। CSS-এর পূর্ণ তালিকায় এমন আরও অবাক করা বিষয় আছে: gray (#808080) darkgray (#A9A9A9)-এর চেয়ে গাঢ়।
- প্যালেট বের করার সময় কি আমার ছবি আপলোড হয়?
- না। ফাইলটি আপনার ব্রাউজারেই খোলা হয়, মেমরিতে ক্যানভাসে আঁকা হয় এবং সেখানেই বিশ্লেষণ হয়। ছবি নিয়ে কোনো রিকোয়েস্ট যায় না, আর ট্যাব বন্ধ করলে ছবি মুছে যায়।
- মূল লেখার জন্য কত কনট্রাস্ট রেশিও দরকার?
- WCAG 2.1 AA স্তরের জন্য কমপক্ষে 4.5:1, আর AAA-র জন্য 7:1। 18 পয়েন্ট বা তার বড়, কিংবা 14 পয়েন্ট বোল্ড হেডিং AA-তে 3:1 ব্যবহার করতে পারে। অনেক ডিজাইন সিস্টেম সবখানে 4.5:1 লক্ষ্য রাখে, যাতে ম্লান স্ক্রিনে ও রোদে লেখা পড়া যায়।
- স্বচ্ছতাসহ ৮-অঙ্কের HEX কোড কি ব্যবহার করা যায়?
- হ্যাঁ, CSS-এ। শেষ দুই অঙ্ক আলফা চ্যানেল, তাই #2F6FED80 একই নীল রঙ, প্রায় 50% অপাসিটিতে। এই পিকার অপাক রঙ নিয়ে কাজ করে, তাই ছয় অঙ্ক দেখায়; দরকার হলে আলফার জোড়াটি নিজে যোগ করুন।
- CSS-এ কতগুলো নামযুক্ত রং আছে?
- CSS Color Module Level 4 মোট 148টি কালার কিওয়ার্ড নির্ধারণ করে, gray ও grey-এর মতো দ্বৈত বানানসহ। সবচেয়ে নতুনটি rebeccapurple (#663399), যা ২০১৪ সালে CSS লেখক Eric Meyer-এর মেয়ে Rebecca Meyer-এর স্মরণে যোগ করা হয়।