RGB থেকে HEX রঙ কনভার্টার
RGB কালার মানকে HEX কোডে তাৎক্ষণিকভাবে রূপান্তর করুন। ওয়েব ডিজাইন, CSS ও গ্রাফিক ডিজাইনের জন্য। বিনামূল্যে কনভার্টার — তাৎক্ষণিক, সঠিক ফলাফল।
আইআরজিবি এবং এইচইএক্স রঙ সিস্টেম ব্যাখ্যা করা হয়েছে
আইআরজিবি এবং এইচইএক্স রঙ সিস্টেম ব্যাখ্যা করা হয়েছে
আইআরজিবি (লাল, সবুজ, নীল) এবং এইচইএক্স (হেক্সাডেসিমাল) হলো দুটি রঙ উপস্থাপনের উপায় যা একই রঙকে উপস্থাপন করে — তারা শুধুমাত্র ভিন্ন নোটেশন সিস্টেম ব্যবহার করে। উভয়ই তিনটি মূল আলোর রঙ (লাল, সবুজ, নীল) ভিন্ন তীব্রতায় মিশ্রিত করে রঙকে বর্ণনা করে। ওয়েব ডিজাইন, সিএসএস, গ্রাফিক্স ডিজাইন, ছবি সম্পাদনা এবং ডিজিটাল শিল্পে উভয় সিস্টেম বোঝা অপরিহার্য।
আইআরজিবি মডেলে, প্রতিটি তিনটি চ্যানেল (লাল, সবুজ, নীল) এর তীব্রতা মান 0 থেকে 255 পর্যন্ত। শূন্য মানে সেই রঙের কোনো পরিমাণ নেই; 255 মানে সর্বাধিক তীব্রতা। সব তিনটি 255 দিয়ে মিশ্রিত করলে সাদা (rgb(255,255,255)) পাওয়া যায়। সব তিনটি 0 দিয়ে মিশ্রিত করলে কালো (rgb(0,0,0)) পাওয়া যায়। 256 সম্ভাব্য মান প্রতিটি চ্যানেলে এবং 3 চ্যানেলের সাথে, আইআরজিবি 256³ = 16,777,216 স্বতন্ত্র রঙ (প্রায় 16.7 মিলিয়ন) উপস্থাপন করতে পারে।
এইচইএক্স মডেলে, একই তিনটি চ্যানেল প্রতিটি 2-অঙ্কের হেক্সাডেসিমাল সংখ্যা (00 থেকে FF) হিসাবে প্রকাশ করা হয়, যা # দ্বারা পূর্বাবস্থান করা হয়। হেক্সাডেসিমাল বেস 10 থেকে 16 বেসে রূপান্তর করে। এইচইএক্সে FF = 15 × 16 + 15 = 255 ডিসিটালের সমান। তাই #FFFFFF = rgb(255,255,255) = সাদা। রূপান্তরটি শুধুমাত্র ভিত্তির পরিবর্তন: ডিসিটাল (বেস 10) থেকে হেক্সাডেসিমাল (বেস 16)।
কীভাবে আইআরজিবিকে এইচইএক্সে রূপান্তর করা যায়: ধাপে ধাপে
- চ্যানেল মান (0–255) নিন
- 16 দ্বারা ভাগ করুন: ভাগফল = প্রথম হেক্স অঙ্ক, অবশিষ্ট = দ্বিতীয় হেক্স অঙ্ক
- যদি তারা 10–15 (A–F) হয় তবে উভয়কে হেক্সে রূপান্তর করুন
- প্রথম অঙ্ক + দ্বিতীয় অঙ্ক = 2-অঙ্কের হেক্স মান
- জি এবং বি চ্যানেলের জন্য পুনরাবৃত্তি করুন
- একত্রিত করুন: # + R_hex + G_hex + B_hex
উদাহরণ: rgb(255, 99, 71) কে এইচইএক্সে (টোমেটো লাল) রূপান্তর করুন।
- R=255: 255÷16=15 অবশিষ্ট 15 → F + F → FF
- G=99: 99÷16=6 অবশিষ্ট 3 → 6 + 3 → 63
- B=71: 71÷16=4 অবশিষ্ট 7 → 4 + 7 → 47
- ফলাফল: #FF6347
টেবিল
| ডিসিটাল | ÷16 ভাগফল | অবশিষ্ট | হেক্স |
|---|---|---|---|
| 0 | 0 | 0 | 00 |
| 16 | 1 | 0 | 10 |
| 128 | 8 | 0 | 80 |
| 160 | 10 (A) | 0 | A0 |
| 200 | 12 (C) | 8 | C8 |
| 238 | 14 (E) | 14 (E) | EE |
| 255 | 15 (F) | 15 (F) | FF |
সাধারণ ওয়েব রঙ: আইআরজিবি এবং এইচইএক্স রেফারেন্স
প্রদত্ত তালিকায় প্রদত্ত হলো সবচেয়ে বেশি ব্যবহৃত ওয়েব রঙের একটি সম্পূর্ণ রেফারেন্স তালিকা।
| রঙের নাম | এইচইএক্স | আইআরজিবি | ব্যবহারের ক্ষেত্র |
|---|---|---|---|
| সাদা | #FFFFFF | rgb(255,255,255) | পটভূমি, কালো পটভূমিতে টেক্সট |
| কালো | #000000 | rgb(0,0,0) | টেক্সট, উচ্চ-বিরোধী পটভূমি |
| লাল | #FF0000 | rgb(255,0,0) | সতর্কতা, ত্রুটি, বন্ধ সংকেত |
| লাইম | #00FF00 | rgb(0,255,0) | সাফল্যের প্রতীক |
| নীল | #0000FF | rgb(0,0,255) | লিঙ্ক, প্রাথমিক রঙ |
| হলুদ | #FFFF00 | rgb(255,255,0) | সতর্কতা, উল্লেখযোগ্য |
| সাইয়ান | #00FFFF | rgb(0,255,255) | অ্যাক্সেন্ট, আধুনিক আইআই |
| ম্যাজেন্টা | #FF00FF | rgb(255,0,255) | অ্যাক্সেন্ট, উল্লেখযোগ্য |
| আরেঞ্জ | #FFA500 | rgb(255,165,0) | কল টু অ্যাকশন, শক্তি |
| পার্পল | #800080 | rgb(128,0,128) | সুলভেশ্য, সৃজনশীল |
| গ্রে | #808080 | rgb(128,128,128) | আইআই উপাদান, নিরপেক্ষ |
| নেভি | #000080 | rgb(0,0,128) | পেশাদার, বিশ্বাসযোগ্য |
| টোমেটো | #FF6347 | rgb(255,99,71) | গরম লাল, খাবার অ্যাপ |
| করাল | #FF7F50 | rgb(255,127,80) | বন্ধুত্বপূর্ণ, গরম ডিজাইন |
| টিয়াল | #008080 | rgb(0,128,128) | পেশাদার, ভারসাম্যপূর্ণ |
আইআরজিবি এবং এইচইএক্স ব্যবহার করে সিএসএস এবং ওয়েব ডিজাইন
সিএসএস আইআরজিবি এবং এইচইএক্স সহ বিভিন্ন রঙ ফরম্যাট গ্রহণ করে। এইচইএক্স এবং আইআরজিবি হল সবচেয়ে বেশি ব্যবহৃত, কিন্তু আধুনিক সিএসএস এছাড়াও হিএসএল, নামকৃত রঙ, এবং নতুন ওকলচ এবং ওকলচ রঙ স্থল ব্যবহার করে বিস্তৃত গ্যামুট ডিসপ্লের জন্য।
সিএসএস অ্যালফা এবং আরজিবি
RGBA এবং আলফা অপারেন্সি
RGBA আরজিবিতে একটি চতুর্থ চ্যানেল যোগ করে: আলফা, যা অপারেন্সিকে নিয়ন্ত্রণ করে। আলফা মান শূন্য থেকে 1 পর্যন্ত হয় (সম্পূর্ণরূপে অপারেন্ট, অপারেন্সি ছাড়া)। ভগ্নাংশীয় মান সেমি-অপারেন্ট রঙ তৈরি করে।
উদাহরণস্বরূপ: rgba(0, 0, 0, 0.5) একটি সেমি-অপারেন্ট কালো (একটি ট্রান্সপারেন্ট ওভারলেয়)। rgba(255, 255, 255, 0.8) একটি 80% অপারেন্ট সাদা। এটি ব্যাপকভাবে ওভারলেয় প্রভাব, ফ্রোস্টেড-গ্লাস UI উপাদান, এবং হোভার স্টেট হাইলাইটিং এর জন্য ব্যবহৃত হয়।
আধুনিক সিএসএস-এ, আরজিবিতে আলফা সহ HEX আছে: 8-চরিত্র হেক্স কোড যেখানে শেষ 2 চরিত্র আলফা নির্দেশ করে। #FF6347CC হল টমেটো যার অপারেন্সি 80% (CC হেক্সে = 204 ডিজিটাল; 204/255 ≈ 0.8)। এই ফরম্যাটটি সিএসএস কলার লেভেল 4 স্পেসিফিকেশনে প্রবর্তিত হয়েছে এবং সব আধুনিক ব্রাউজারে সমর্থিত।
RGBA এর সমতুল্য হল মানুষের জন্য সহজ: rgba(255, 99, 71, 0.8) vs #FF6347CC। যে ফরম্যাটটি ব্যবহার করা হয় তা ব্যক্তিগত পছন্দ এবং টুলিং উপর নির্ভর করে — ডিজাইন টুল যেমন Figma প্রায়শই এবং এক্সপোর্ট করে হেক্স, যখন সিএসএস প্রিপ্রোসেসর (Sass, Less) সাধারণত তাদের পড়তে সহজ করে তোলে।
রঙের তত্ত্বের মৌলিক বিষয়গুলি ডিজাইনারদের জন্য
RGB রঙের মডেল বোঝার সাথে রঙের তত্ত্ব বোঝার সাথে যায়। RGB হল একটি যোগফল রঙের মডেল — রঙ তৈরি করা হয় লাল, নীল এবং সবুজ লাইট যোগ করে। লাল, নীল এবং সবুজ সবই সর্বোচ্চ পরিমাণে যোগ করলে সাদা (সমস্ত আলো) তৈরি হয়। এটি পিগমেন্ট/ছাপানোর বিপরীত (বিয়োগী রঙের) থেকে, যেখানে সমস্ত রঙ একত্রিত করলে কালো তৈরি হয়।
সম্পূরক রঙ RGB-এ রঙের বিপরীতে অবস্থিত: লাল (FF0000) এবং সাইয়ান (00FFFF) সম্পূরক — লক্ষ্য করুন যে সাইয়ানের RGB হল লালের বাইটওয়াইজ বিপরীত (0,255,255 বনাম 255,0,0)। একইভাবে, নীল এবং হলুদ, সবুজ এবং ম্যাজেন্টা। সম্পূরক জোড়া সবচেয়ে বেশি বিপরীত এবং দৃষ্টিভঙ্গি সৃষ্টি করে যখন একসাথে রাখা হয়।
রঙের সমন্বয় নির্বাচন করার মাধ্যমে ডিজাইনাররা রঙের সেট বেছে নেয়: অ্যানালগাস (সংলগ্ন রঙ), ত্রিকোণাকার (তিনটি সমানভাবে বিভক্ত রঙ), স্প্লিট-কমপ্লিমেন্টারি, এবং টেট্রাডিক (চারটি রঙ যা একটি বর্গ গঠন করে)। এই সম্পর্কগুলি ডিজাইনাররা একটি অনুমতি এবং দৃষ্টিভঙ্গি সহ রঙের সেট তৈরি করতে সাহায্য করে।
অ্যাক্সেসিবিলিটি এবং বিপরীততা: ডিজাইন এবং ডেভেলপমেন্ট অনুযায়ী ওয়েব কন্টেন্ট অ্যাক্সেসিবিলিটি গাইডলাইন (WCAG) প্রয়োজনীয় একটি ন্যূনতম বিপরীততা রেট মধ্যে টেক্সট এবং প্রসঙ্গ: 4.5:1 নরমাল টেক্সটের জন্য, 3:1 বড় টেক্সটের জন্য। বিপরীততা অনুপাত গণনা করা হয় আরজিবি মানের থেকে রেলেটিভ লুমিনেন্স। অনেক অনলাইন টুল ওয়াইসিএজি সম্মতি পরীক্ষা করে — এটি লোভা দৃষ্টি বা রঙ অন্ধবিদ্যার ব্যবহারকারীদের জন্য অত্যন্ত গুরুত্বপূর্ণ।
RGB এর বাইরে রঙের স্থান: HSL, HSB, CMYK
RGB সর্বদা রঙ বেছে নেওয়ার জন্য সবচেয়ে সুবিধাজনক সিস্টেম নয়। বিভিন্ন ব্যবহারিক ক্ষেত্রে বিকল্প রঙের স্থান আরও প্রয়োজনীয়:
| রঙের মডেল | উপাদান | বিশেষত ব্যবহার করা হয় | ব্যবহৃত হয় |
|---|---|---|---|
| RGB | লাল, সবুজ, নীল (0–255 প্রতিটি) | স্ক্রীন প্রদর্শন, ওয়েব | CSS, প্রদর্শন, ক্যামেরা |
| HEX | #RRGGBB (একই যেমন RGB) | ওয়েব ডেভেলপমেন্ট | CSS, HTML, ডিজাইন টুল |
| HSL | হু (0–360°), স্যাটুরেশন (%), লাইটনেস (%) | ডিজাইন সাজানোর জন্য আরও সুবিধাজনক | CSS, ডিজাইন টুল |
| HSB/HSV | হু, স্যাটুরেশন, ব্রাইটনেস/ভ্যালু | রঙ পিকার UI | ফটোশপ, আইলুস্ট্রেটর |
| CMYK | সাইয়ান, ম্যাজেন্টা, হলুদ, কী (কালো) | ছাপানোর ডিজাইন | ইনডিজাইন, ছাপানোর প্রবাহ |
| Pantone | স্ট্যান্ডার্ডাইজড রঙের কোড | ব্র্যান্ড সংযোগ | বস্তুগত পণ্য, ছাপানো |
HSL বিশেষভাবে ডিজাইনারদের জন্য সুবিধাজনক: হু রঙটি বেছে নেয় (0°=লাল, 120°=সবুজ, 240°=নীল), স্যাটুরেশন কীভাবে বিশিষ্ট তা নিয়ন্ত্রণ করে (0% হল কালো, 100% হল পুরো রঙ, 50% হল পুরো রঙ), এবং ল
অভিজ্ঞতা সমূহ
প্রতিটি চ্যানেল (0–255) কে 2-অঙ্কের হেক্স: 16 দ্বারা ভাগ করুন প্রথম অঙ্ক, দ্বিতীয় অঙ্ক হিসাবে অবশিষ্টাংশ ব্যবহার করুন (10–15 = A–F)। সবকিছু # এর পরে একত্রিত করুন। উদাহরণস্বরূপ: rgb(128, 0, 255) → 128=80, 0=00, 255=FF → #8000FF (ভিন্ন)। #FFFFFF. সাদা RGB হল (255,255,255) — তিনটি চ্যানেলের সমস্ত সর্বোচ্চ প্রকাশ। হেক্সে, 255 = FF. তাই সাদা হল #FF+FF+FF = #FFFFFF. 3-চরিত্র সংক্ষিপ্ত রূপ #FFF. হ্যাঁ। CSS উভয় তারা একই তথ্যকে ভিন্ন লেখার উপায়ে উপস্থাপন করে। RGB ব্যবহার করে তিনটি বাইনারি সংখ্যা (0–255)। হেক্স ব্যবহার করে তিনটি 2-অঙ্কের হেক্সাডেসিমাল মান (00–FF)। হেক্স হল সংক্ষিপ্ত (7 চরিত্র vs 15+) এবং হেক্স হল CSS এবং ডিজাইন টুলগুলিতে প্রধান ফরম্যাট। তাদের মধ্যে রূপান্তর সঠিক — কোনো তথ্য হারিয়ে যায় না। বেস 16 (হেক্সাডেসিমাল) সঠিকভাবে 8-বিট মান (0–255) একটি সংক্ষিপ্ত কোডিং করে দেয়। দুটি হেক্স ডিজিট প্রতিটি 4 বিট প্রতিনিধিত্ব করে, মোট 8 বিট = 1 বাইট। তিনটি RGB বাইট (24 বিট) একটি 6-চরিত্র হেক্স কোডে পরিণত হয়। এই সংক্ষিপ্ততা এবং কম্পিউটার বাইনারির সাথে সামঞ্জস্যপূর্ণ হল কারণ হেক্স হল কম্পিউটিংয়ে প্রধান ফরম্যাট। 8-চরিত্র হেক্স কোডটি শেষ 2 ডিজিট (00=অপাক, FF=অপাক) একটি অ্যালফা চ্যানেল অন্তর্ভুক্ত করে। #FF6347CC = টমেটো প্রায় 80% অপাক (CC হেক্স = 204 দশমিক; 204/255 ≈ 0.8)। সব আধুনিক ব্রাউজারে সমর্থিত। এটি RGBA নোটেশনের চেয়ে কম সাধারণ। যখন R=G=B, ফলস্বরূপ সর্বদা একটি ধূসর রঙ হয়। rgb(0,0,0) = কালো, rgb(128,128,128) = মধ্যম ধূসর (#808080), rgb(255,255,255) = সাদা। ধূসর রঙের রেঞ্জ হল #000000 থেকে #FFFFFF পর্যন্ত সমান ধাপের ধূসর মান। WCAG 2.1 প্রয়োজনীয় হল সাধারণ টেক্সট এবং এর প্রকৃত পটভূমির মধ্যে 4.5:1 বিরোধিতা অনুপাত (3:1 বড় টেক্সট এবং UI উপাদানের জন্য)। বিরোধিতা অনুপাত গণনা করা হয় থেকে রেলেটিভ লুমিনেন্স থেকে, যা আসে আরএবিজিমান। বিরোধিতা চূড়ান্ত করার জন্য প্রয়োজনীয়তা পূরণ না করলে ব্যবহারকারীদের কম দৃষ্টি সম্পর্কে অ্যাক্সেস করতে বাধা হয় বা আলোকিত শর্তের সময় ব্যবহারকারীরা অ্যাক্সেস করতে বাধা হয়। HSL (Hue, Saturation, Lightness) হল একটি বিকল্প CSS রঙ মডেল যা মানুষের জন্য আরও পরিচিত হতে ডিজাইন করা হয়েছে। হ্যাঁ। সমস্ত প্রধান ডিজাইন টুল (Figma, Adobe XD, Photoshop, Sketch, Canva) রঙ পিকার ক্লিক করলে হেক্স কোড দেখায় এবং কপি করে। Figma-এ, প্রপার্টিজ প্যানেলে রঙের ফিল ক্লিক করুন হেক্স কোড দেখতে এবং কপি করুন। ফটোশপে, কলার পিকার উইন্ডোতে হেক্স নীচে দেখানো হয়। ব্রাউজার ডেভটুলস (ইনস্পেক্ট ইলেমেন্ট → স্টাইলস) এছাড়াও রঙের মান পরিবর্তন করতে হেক্স ফরম্যাটে পরিবর্তন করতে পারে।সাধারণ প্রশ্ন
RGB কে HEX হিসাবে কীভাবে হাতে করা যায়?
হেক্স কোড কী হল সাদা?
আমি CSS-এ RGB ব্যবহার করতে পারি?
rgb(255, 128, 0) এবং #FF8000 — তারা একই ফলাফল তৈরি করে। RGB পড়াবলে পছন্দসই; HEX ব্রেভিটির জন্য। RGBA অভিন্নতা যোগ করে: rgba(255, 128, 0, 0.7) 70% অপাক লালের জন্য।হেক্স এবং RGB এর মধ্যে কী পার্থক্য আছে?
হেক্স কেন বেস 16 ব্যবহার করে?
8-চরিত্র হেক্স কোড (যেমন #RRGGBBAA) কী?
সমান RGB মানের কোনো রঙ আছে?
কীভাবে রঙের বিরোধিতা অ্যাক্সেসিবিলিটি প্রভাবিত করে?
কীভাবে HSL এবং এটি হেক্সের সাথে সম্পর্কিত?
hsl(0, 100%, 50%) পুরো লাল = #FF0000. হেক্সে রূপান্তর করতে, HSL ব্যবহার করে RGB মান গণনা করুন কালার মডেল রূপান্তর, তারপর RGB থেকে হেক্স রূপান্তর করুন। CSS সরাসরি HSL সমর্থন করে, তাই আপনি এটি ব্যবহার করতে পারেন ব্যবহার করার প্রয়োজন না হলে।আমি ডিজাইন টুলগুলিতে একটি রঙ পিকার থেকে হেক্স কোড কীভাবে পাব?
রঙের অ্যাক্সেসিবিলিটি এবং তুলনা অনুপাত
ওয়েব অ্যাক্সেসিবিলিটি গাইডলাইন (WCAG 2.1) স্পেসিফাই করে যে টেক্সট এবং ব্যাকগ্রাউন্ড রঙের মধ্যে ন্যূনতম তুলনা অনুপাত রয়েছে যাতে লোকেরা কম দৃষ্টি বা রঙের অক্ষমতার সাথে পড়ার জন্য নিশ্চিত করে। প্রায় 8% পুরুষের কিছু ধরনের রঙের অক্ষমতা (রঙের অক্ষমতা) রয়েছে, যার ফলে পেশাদার ওয়েব ডিজাইনের জন্য অ্যাক্সেসিবল রঙের বেছে নেওয়া নৈতিক এবং আইনি প্রয়োজনীয়তা।
দুটি রঙের মধ্যে তুলনা অনুপাত তাদের অভিন্ন আলোকতত্ত্ব থেকে গণনা করা হয়: তুলনা অনুপাত = (L1 + 0.05) / (L2 + 0.05), যেখানে L1 হল আলোকতত্ত্বের আরও হালকা রঙ এবং L2 হল আরও কালো। অভিন্ন আলোকতত্ত্ব আসে আরজিবি মানগুলির মাধ্যমে: প্রতিটি চ্যানেল মান v = V/255, যদি v ≤ 0.03928 তাহলে লিনিয়ার = v/12.92, অন্যথায় লিনিয়ার = ((v+0.055)/1.055)^2.4। তারপর L = 0.2126×R + 0.7152×G + 0.0722×B।
ন্যূনতম তুলনা প্রয়োজনীয়তা: AA স্তরের জন্য 4.5:1 প্রয়োজন রয়েছে সাধারণ টেক্সট (18pt এর নিচে বা 14pt বোঝাইলে) এবং 3:1 বড় টেক্সটের জন্য। AAA স্তরের জন্য 7:1 প্রয়োজন সাধারণ টেক্সট এবং 4.5:1 বড় টেক্সটের জন্য। সবচেয়ে সাধারণ ব্যর্থতা হল হালকা সাদা টেক্সট সাদা ব্যাকগ্রাউন্ডের উপর (#999999 সাদা শুধু 2.85:1 অনুপাত রয়েছে, AA এর জন্য ব্যর্থ) এবং কালো টেক্সট কালো ব্যাকগ্রাউন্ডের উপর।
| টেক্সট / ব্যাকগ্রাউন্ড কম্বো | তুলনা অনুপাত | WCAG AA সাধারণ | WCAG AA বড় |
|---|---|---|---|
| কালো #000 / সাদা #FFF | 21:1 | ✓ পাস | ✓ পাস |
| গভীর নীল #003366 / সাদা | 12.2:1 | ✓ পাস | ✓ পাস |
| মধ্যম সাদা #767676 / সাদা | 4.54:1 | ✓ পাস | ✓ পাস |
| হালকা সাদা #999 / সাদা | 2.85:1 | ✗ ব্যর্থ | ✗ ব্যর্থ |
| সবুজ #FFFF00 / সাদা | 1.07:1 | ✗ ব্যর্থ | ✗ ব্যর্থ |
| সাদা #FFF / গভীর নীল #003366 | 12.2:1 | ✓ পাস | ✓ পাস |
একটি রঙের প্যালেট তৈরি করা: এইচএক্স থেকে ডিজাইন সিস্টেম
একটি পেশাদার রঙের প্যালেট সাধারণত একটি প্রাথমিক ব্র্যান্ড রঙ, গৌণ অ্যাক্সেন্ট রঙ, নির্মূল সাদা, এবং বৈধতা নীল, সতর্কতা কালো, ত্রুটি লাল, তথ্য নীল। প্রতিটি ভিত্তি রঙের জন্য বিভিন্ন UI অবস্থা জন্য বিভিন্ন রঙের প্রয়োজন।
একটি ব্র্যান্ড রঙের মতো #3B82F6 (টেইলওয়ান্ডের নীল-500) থেকে, আপনি একটি 10-শেড স্কেল তৈরি করতে পারেন হেইল্ড স্পেসে আলোকতত্ত্ব সামঞ্জস্য করে: নীল-50 (#EFF6FF, খুব হালকা), নীল-100 (#DBEAFE), নীল-900 (#1E3A5F, খুব কালো) পর্যন্ত। ডিজাইন টোকেনগুলি তারপর এই শেডগুলিকে বৈধতা ব্যবহারের সাথে ম্যাপ করে: প্রাইমারি-বাটন-বিজি = নীল-600, প্রাইমারি-বাটন-হোভার = নীল-700, প্রাইমারি-বাটন-টেক্সট = সাদা, ইত্যাদি।
একটি ব্র্যান্ড রঙের সিস্টেম তৈরি করার সময় বিবেচনা করুন: 60-30-10 নিয়ম — 60% প্রধান রঙ (সাধারণত একটি নির্মূল), 30% গৌণ রঙ, 10% অ্যাক্সেন্ট। সব টেক্সট কম্বো পাস করে এমন নিশ্চিত করুন। রঙগুলি বিভিন্ন আলোক শর্ত এবং ডিভাইস স্ক্রিনের উপর পরীক্ষা করুন। ডার্ক মোড (যা সম্ভবত বিভিন্ন শেড মান বজায় রাখার জন্য আলাদা রঙের মান প্রয়োজন) এর জন্য বিবেচনা করুন। একটি ভাল ডিজাইন করা রঙের সিস্টেম কোডে 8–15 এইচএক্স মান রয়েছে যা সমস্ত ব্যবহার করে স্থিতিশীলভাবে।
রঙ মনোবিজ্ঞানীয় এবং মানসিক প্রতিক্রিয়া জাগায়, যা ব্র্যান্ডিং এবং ইউআই ডিজাইনের জন্য রঙের বেছে নেওয়া একটি কৌশলগত সিদ্ধান্ত। রঙের মনোবিজ্ঞান গবেষণা (যখনই জনপ্রিয় সংস্কৃতিতে অতিরিক্ত উল্লেখ করা হয়) কার্যকর দৃশ্যমান অভিজ্ঞতা ডিজাইন করার জন্য ব্যবহারিক নির্দেশিকা প্রদান করে।
প্রতিটি রঙের জন্য একটি সংক্ষিপ্ত বিবরণ নিম্নরূপ:
- লাল (#FF0000 পরিসর): শক্তি, ত্বরণ, প্রেম, বিপদ। বিক্রয়ের জন্য ("বিক্রয়!" চিহ্নগুলি সাধারণত লাল), জরুরী সংবাদ, বন্ধ সংকেত, এবং খাবার ব্র্যান্ড (কোকা-কোলা, ম্যাকডোনাল্ড'স, কেএফসি - লাল খাবারের আকাঙ্ক্ষা জাগায় এবং ত্বরণ তৈরি করে)। উচ্চ-বিরতি লাল কল টু অ্যাকশনের জন্য একটি অত্যন্ত ভাল বিকল্প যখন আপনি তাৎক্ষণিক ব্যবহারকারী কর্মের জন্য চান।
- নীল (#0000FF পরিসর): বিশ্বাস, পেশাদারতা, স্থিতিশীলতা, শান্তি। বিনিয়োগ এবং প্রযুক্তি ব্র্যান্ডিং (ফেসবুক, টুইটার/এক্স, লিঙ্কডইন, পেইপ্যাল, আইবিএম, স্যামসাং)। গবেষণা দেখায় যে নীল হল সারা বিশ্বের পছন্দসই রঙ। হালকা নীল খোলা এবং বন্ধুত্বপূর্ণ বোঝায়; কালো নীল অধিকার এবং বিশেষজ্ঞতা বোঝায়।
- সবুজ (#00FF00 পরিসর): প্রকৃতি, স্বাস্থ্য, বৃদ্ধি, সাফল্য (মার্কিন যুক্তরাষ্ট্রে অর্থ)। স্বাস্থ্য/সুস্থতা ব্র্যান্ড, আর্থিক অ্যাপ্লিকেশন (ইতিবাচক রিটার্ন সবুজ দেখানো হয়), পরিবেশগত সংস্থা, এবং "যাওয়া" সংকেতে ব্যাপকভাবে ব্যবহৃত হয়। মধ্যম টোন যেমন #28A745 (বুটস্ট্র্যাপ সাফল্যের সবুজ) ইউআই-এ ইতিবাচক অবস্থা চিহ্নিত করে ব্যাঙ্গানা করে না।
- হলুদ/কালো পরিসর: অপ্টিমিজম, শক্তি, সৃজনশীলতা, সতর্কতা। হলুদ অত্যন্ত দেখা যায় (নির্মাণ চিহ্ন, ট্যাক্সি ক্যাব) কিন্তু সাদা পটভূমিতে পাঠ্য হিসাবে কঠিন পড়া যায়। কালো (#FFA500 পরিসর) কল টু অ্যাকশনের জন্য ব্যাপকভাবে ব্যবহৃত হয় - এটি দেখা যায় এবং শক্তি সহ বিপদের প্রতিনিধিত্বের চেয়ে ত্বরণের প্রতিনিধিত্ব করে না।
প্রতিটি রঙের পরিসর এবং এর সাথে সম্পর্কিত মানসিক সংযোগ নিম্নরূপ:
| রঙের পরিবার | সাধারণ HEX পরিসর | মানসিক সংযোগ | ব্র্যান্ড উদাহরণ |
|---|---|---|---|
| লাল | #CC0000–#FF6666 | ত্বরণ, শক্তি, আকাঙ্ক্ষা | কোকা-কোলা, নেটফ্লিক্স, ইউটিউব |
| নীল | #003399–#66AAFF | বিশ্বাস, শান্তি, পেশাদারতা | ফেসবুক, লিঙ্কডইন, পেইপ্যাল |
| সবুজ | #006600–#66FF66 | প্রকৃতি, স্বাস্থ্য, বৃদ্ধি | হোল ফুডস, স্পটিফাই, স্টারবাক্স |
| কালো | #CC5500–#FFAA44 | শক্তি, সৃজনশীলতা, গরম | আমাজন, হার্লে-ডেভিডসন |
| বেগুনি | #440088–#AA66CC | সুলভাব, জ্ঞান, সৃজনশীলতা | ক্যাডবারি, হলিডেই, টুইচ |
| কালো | #000000–#333333 | সুন্দরতা, শক্তি, সৌন্দর্য | আপল, চানেল, নাইকে |
জনপ্রিয় ডিজাইন টুলের সাথে কাজ করা
প্রতিটি মূল ডিজাইন টুলের নিজস্ব রঙের প্রবাহ রয়েছে। রঙের প্রবাহ বোঝার মাধ্যমে আপনি আপনার টুলে এক্সপ্রেস করার জন্য এক্সএইচএক্স এবং আরজিবি কার্যকরভাবে ব্যবহার করতে পারেন এবং পেশাদার ডিজাইন কাজে অনেক সময় বাঁচাতে পারেন।
প্রতিটি টুলের জন্য একটি সংক্ষিপ্ত বিবরণ নিম্নরূপ:
- Figma: কোনো পূর্ণ উপাদানকে ক্লিক করুন → বৈশিষ্ট্য প্যানেলে পূর্ণ রঙ দেখাবে → রঙের স্বাচ্ছন্দ্যতা ক্লিক করুন রঙের পিকার খুলে দেবে। আপনি এক্সএইচএক্স মান সরাসরি টাইপ করতে পারেন বা আরজিবি, এইচএসএল, বা এইচএসবি মোডে স্বস্তি করতে পারেন। Figma আলাদা অপ্যাসিটি ক্ষেত্র এবং আরএইএইচএক্স নোটেশন দিয়ে অপ্যাসিটি দেখায়। আপনি Figma এবং CSS-এর মধ্যে এক্সএইচএক্স কোড কপি/পেস্ট করতে পারেন কোনো রূপান্তর প্রয়োজন নেই।
- আডবেস ফটোশপ: রঙের পিকার খোলুন (সামনের পটভূমি/পিছনের পটভূমি বর্ণের বর্গ)। পিকারের নীচে একটি টেক্সট ফিল্ড থাকবে যেখানে এক্সএইচএক্স কোড দেখাবে। রঙের স্বাচ্ছন্দ্যতা ক্লিক করে আপনি এটিকে আপনার প্যালেটে যোগ করতে পারেন। আইডি টুলটি কোনো রঙের উপর হাইলাইট করে সেই রঙের এক্সএইচএক্স কোড দেখাবে।
- ব্রাউজার ডেভটুলস: কোনো উপাদানকে আইন্স্পেক্ট করুন → স্ট
সেকশন ক্লাস="কন্টেন্ট-সেকশন">
RGB থেকে HEX কনভার্টার ব্যবহার করার উপায়
রেড, গ্রীন, এবং ব্লু চ্যানেল মান (প্রতিটি 0 এবং 255 এর মধ্যে) এন্টার করুন। কনভার্টার এক্সএইচএক্স রঙের কোড প্রদান করে যা সরাসরি কেসিএস, এইচটিএমএল, বা কোনো ডিজাইন টুলে পেস্ট করা যাবে। মান বাইরে 0–255 এর বাইরে থাকলে তা স্বয়ংক্রিয়ভাবে ক্ল্যাম্প করা হয়। কনভার্টারটি বিপরীত অপারেশনও দেখায়: এক্সএইচএক্স কোড প্রদান করুন এবং আপনি আপনার রঙের বিভাজন পেতে পারেন। এই টুলটি ব্যবহার করুন যখন একটি ডিজাইন টুল আপনাকে একটি RGB মান দেয় কিন্তু আপনার কেসিএস স্টাইলশিটে এক্সএইচএক্স ফরম্যাট ব্যবহার করা হয় বা কপি করার সময় বিভিন্ন অ্যাপ্লিকেশন যে আলাদা ফরম্যাট ব্যবহার করে। এক্সএইচএক্স কোড আউটপুটে প্রদান করা হয় যা সরাসরি কেসিএস রঙের বৈশিষ্ট্যে পেস্ট করার জন্য নেতিবাচক চিহ্ন (#) সহ আছে। সমস্ত 16.7 মিলিয়ন RGB রঙের সংমিশ্রণ একটি অনন্য 6-চরিত্র এক্সএইচএক্স কোডের সাথে ম্যাপ করে যা অস্পষ্টতা বা রাউন্ডিং ছাড়াই আছে।