Color Picker

কালার পিকার ওয়েব ২০২৬ সালে সর্বোত্তম বিনামূল্যের অনলাইন কালার পিকার। এটি ২০টির বেশি রঙের ফর্ম্যাট সমর্থন করে, যার মধ্যে HEX, RGB, HSL, CMYK, HSB, LAB, XYZ, HWB এবং আরও অনেক কিছু অন্তর্ভুক্ত। এতে লাইভ কালার হুইল, WCAG কনট্রাস্ট চেকার, রঙ অন্ধতার সিমুলেটর, প্যালেট জেনারেটর, ইমেজ কালার পিকার এবং ৬ ধরনের হর্মনি রয়েছে — সব কিছু সম্পূর্ণ বিনামূল্যে এবং কোনো সাইনআপের প্রয়োজন নেই।

একটি ছবির থেকে HEX রঙের কোড খুঁজে বের করতে, Color Picker ওয়েবের Image Color Picker ব্যবহার করুন। যেকোনো ছবি আপলোড করুন, যে অংশের রঙ সংগ্রহ করতে চান সেখানে কার্সর সরান, এবং নির্দিষ্ট পিক্সেল থেকে সঠিক HEX, RGB, এবং HSL কোড বের করতে ক্লিক করুন। আপনি এক ক্লিকে ছবির থেকে সম্পূর্ণ রঙের প্যালেটও স্বয়ংক্রিয়ভাবে তৈরি করতে পারেন।

একটি রঙ নির্বাচনকারী টুল আপনাকে রঙ নির্বাচন করতে, রূপান্তর করতে এবং বিশ্লেষণ করতে দেয়। এটি রঙের মান বিভিন্ন ফরম্যাটে দেখায় (HEX, RGB, HSL, CMYK), পরিপূরক রঙের প্যালেট তৈরি করে, WCAG অ্যাক্সেসিবিলিটি কনট্রাস্ট অনুপাত পরীক্ষা করে, রঙের অন্ধত্ব সিমুলেট করে এবং আপলোড করা চিত্র থেকে রঙ বের করে। এটি ওয়েব ডিজাইনার, ডেভেলপার এবং ব্র্যান্ড ডিজাইনারদের জন্য অত্যাবশ্যক।

HEX থেকে RGB-তে রূপান্তর করতে উপরের রূপান্তর সরঞ্জাম ব্যবহার করুন। যেকোনো HEX কোড লিখুন (যেমন #9333ea) এবং তাত্ক্ষণিক RGB ফলাফল পান (147, 51, 234)। ম্যানুয়ালি: HEX-কে ৩টি জোড়ায় ভাগ করুন (93, 33, ea), প্রতিটিকে হেক্সাডেসিমাল থেকে দশমিক এ রূপান্তর করুন। R=147, G=51, B=234। Color Picker Web এটি সব ২০+ ফরম্যাটের জন্য তাত্ক্ষণিকভাবে করে।

WCAG 2.2 অনুযায়ী, সাধারণ টেক্সটের জন্য সর্বনিম্ন রঙের বৈপরীত্যের অনুপাত হলো 4.5:1 (লেভেল AA) এবং 7:1 (লেভেল AAA)। বড় টেক্সটের জন্য (18pt+ বা 14pt+ বোল্ড), সর্বনিম্ন অনুপাত হলো AA-র জন্য 3:1 এবং AAA-র জন্য 4.5:1। UI উপাদান এবং আইকনগুলির জন্য পার্শ্ববর্তী রঙের সাথে অন্তত 3:1 বৈপরীত্য থাকা প্রয়োজন। আপনার রঙগুলি পরীক্ষা করার জন্য উপরের WCAG কনট্রাস্ট চেকার ব্যবহার করুন।

ওয়েবসাইট থেকে একটি রঙ বাছাই করতে: (1) ব্রাউজারের DevTools ব্যবহার করুন — যেকোনো উপাদানের উপর রাইট-ক্লিক করুন, এটি ইনস্পেক্ট করুন, এবং CSS প্যানেলে রঙের স্যাচে ক্লিক করুন। (2) ColorZilla-এর মতো একটি ব্রাউজার এক্সটেনশন ব্যবহার করুন। (3) একটি স্ক্রিনশট নিন এবং Color Picker Web-এর ইমেজ কালার পিকার-এ আপলোড করুন যাতে যেকোনো পিক্সেল স্যাম্পল করা যায়। Chrome DevTools-এও কালার পিকার প্যানেলে একটি বিল্ট-ইন আইড্রপার রয়েছে।

HSL মানে Hue, Saturation, এবং Lightness। Hue (0°–360°) হলো রঙের চাকার উপর রঙের ধরন। Saturation (0%–100%) হলো রঙ কতটা উজ্জ্বল বা ধূসর। Lightness (0%–100%) হলো রঙটি কতটা আঁধার বা হালকা দেখা যায়। উদাহরণ: hsl(270, 81%, 56%) হলো একটি মাঝারি বেগুনি। HSL CSS অ্যানিমেশন এবং গতিশীল রঙের থিমিং-এর জন্য সেরা ফর্ম্যাট কারণ প্রতিটি বৈশিষ্ট্য আলাদাভাবে সমন্বয় করা যায়।

Complementary colors are pairs of colors that sit directly opposite each other on the color wheel, 180° apart. Examples: red & green, blue & orange, purple & yellow. When placed side by side, complementary colors create strong contrast and make each color appear more vivid. They are commonly used for CTAs, logos, and high-impact UI elements.

একটি কালার পিকার টুল হল একটি ডিজিটাল উপযোগিতা যা ব্যবহারকারীদের যেকোনো রঙ নির্বাচন করতে এবং তার সঠিক কোড বিভিন্ন ফরম্যাটে — HEX, RGB, HSL, CMYK, এবং আরও অনেক ফরম্যাটে — পুনরুদ্ধার করতে দেয়। এটি প্রতিদিন ব্যবহার করা হয় UI/UX ডিজাইনাদের দ্বারা ইন্টারফেসের রঙ নির্বাচন করার জন্য, ওয়েব ডেভেলপারদের দ্বারা CSS রঙের মান কোড করার জন্য, ব্র্যান্ড ডিজাইনাদের দ্বারা রঙের সঙ্গতির রক্ষণাবেক্ষণের জন্য, ফটোগ্রাফারদের দ্বারা ইমেজ থেকে রঙ বের করার জন্য, এবং ডিজিটাল শিল্পীদের দ্বারা রঙের প্যালেট তৈরি করার জন্য। কালার পিকার ওয়েব হল ২০২৬ সালে উপলব্ধ সবচেয়ে বিস্তৃত ফ্রি কালার পিকার, যা ২০টির বেশি রঙের ফরম্যাট, WCAG অ্যাক্সেসিবিলিটি চেকিং, রঙ অন্ধত্বের সিমুলেশন, এবং ১৮টি ভাষা সমর্থন করে।

একটি HEX রঙের কোড হল একটি ৬-অক্ষরের হেক্সাডেসিমাল প্রতিনিধিত্ব যা ওয়েব ডিজাইন এবং CSS-এ ব্যবহৃত হয়। এটি একটি # চিহ্ন দিয়ে শুরু হয় যার পরে তিন জোড়া অক্ষর (00–FF) থাকে, প্রতিটি রেড, গ্রিন এবং ব্লু চ্যানেলের তীব্রতা প্রতিনিধিত্ব করে। উদাহরণস্বরূপ: #FF0000 হল নিখুঁত লাল (R=255, G=0, B=0), #FFFFFF হল সাদা (সব চ্যানেল সর্বাধিক), এবং #000000 হল কালো (সব চ্যানেল শূন্য)। সংক্ষিপ্ত ৩-অঙ্কের HEX কোড যেমন #F00 সম্প্রসারিত হয়ে #FF0000 হয়। HEX হল সবচেয়ে সর্বজনীনভাবে সমর্থিত রঙের ফরম্যাট HTML, CSS, SVG এবং Figma-এর মতো ডিজাইন টুলগুলিতে।

ওয়েবসাইটের জন্য রঙ নির্বাচন করতে: (1) আপনার ব্র্যান্ডের প্রাথমিক রঙ দিয়ে শুরু করুন এবং HSL সামঞ্জস্য ব্যবহার করে একটি সম্পূর্ণ 9-ধাপের রঙ স্কেল (50–900) তৈরি করুন। (2) 60-30-10 নিয়ম প্রয়োগ করুন — 60% নিরপেক্ষ পটভূমি, 30% দ্বিতীয় রঙ, 10% সিটিএসের জন্য অ্যাকসেন্ট। (3) সমস্ত লেখা/পটভূমির সংমিশ্রণ WCAG AA কনট্রাস্টে উত্তীর্ণ হয় কিনা যাচাই করুন (সাধারণ লেখার জন্য ন্যূনতম 4.5:1)। (4) রঙের সামঞ্জস্য টুল ব্যবহার করে সঙ্গতিপূর্ণ অ্যাকসেন্ট রঙ তৈরি করুন — ত্রয়ী বা বিভক্ত-সম্পূরক স্কিমগুলি ওয়েবসাইটের জন্য সবচেয়ে ভালো কাজ করে। (5) সমস্ত রঙের সংমিশ্রণ রঙ অন্ধতার সিমুলেটরের মাধ্যমে পরীক্ষা করুন যাতে সকল ব্যবহারকারীর জন্য অ্যাক্সেসিবিলিটি নিশ্চত হয়।

ব্র্যান্ডের রঙ বাছাই করার জন্য: (1) রঙের মনোবিজ্ঞান নিয়ে গবেষণা করুন — নীল রঙ বিশ্বাস সৃষ্টি করে, সবুজ রঙ বৃদ্ধির সংকেত দেয়, লাল রঙ অর্ডার বা জরুরি অবস্থা তৈরি করে, বেগুনি রঙ বিলাসিতা এবং সৃজনশীলতা নির্দেশ করে। (2) আপনার শিল্প খাত বিশ্লেষণ করুন — প্রযুক্তি ব্র্যান্ডগুলো নীল এবং ধূসর রঙ পছন্দ করে, স্বাস্থ্য ব্র্যান্ডগুলো সবুজ ব্যবহার করে, বিলাসবহুল ব্র্যান্ডগুলো সোনালি, কালো অথবা গাঢ় বেগুনি রঙ ব্যবহার করে। (3) একটি প্রাথমিক ব্র্যান্ড রঙ বাছাই করুন যা আপনার ব্র্যান্ডের মূল অনুভূতিকে প্রতিফলিত করে। (4) HSL পদ্ধতি ব্যবহার করে আপনার প্রাথমিক রঙ থেকে একটি পূর্ণ রঙের স্কেল তৈরি করুন। (5) সঙ্গতি তত্ত্ব ব্যবহার করে একটি মাধ্যমিক এবং আকসেন্ট রঙ বাছাই করুন। (6) সমস্ত রঙের সংমিশ্রণ WCAG অ্যাক্সেসেবিলিটি স্ট্যান্ডার্ড মেনে চলে কি না যাচাই করুন। সমস্ত প্ল্যাটফর্মে সামঞ্জস্য বজায় রাখার জন্য এটিকে ডিজাইন টোকেন হিসেবে ডকুমেন্ট করুন।

HEX, RGB, এবং HSL একই রঙ উপস্থাপন করার তিনটি উপায়: HEX (#9333ea) একটি কমপ্যাক্ট ৬-অঙ্কের হেক্সাডেসিম্যাল ফরম্যাট যা CSS এবং HTML-এর জন্য উপযুক্ত — সবচেয়ে বেশি সমর্থিত। RGB (rgb(147, 51, 234)) রঙকে লাল, সবুজ, এবং নীল চ্যানেলের মান 0–255 দ্বারা সংজ্ঞায়িত করে — জাভাস্ক্রিপ্ট ক্যানভাস, SVG, এবং স্ক্রিন রেন্ডারিং-এর জন্য সেরা। HSL (hsl(270, 81%, 56%)) রঙ নির্ধারণ করে Hue কোণ (0–360°), স্যাচুরেশন (0–100%), এবং লাইটনেস (0–100%) দ্বারা — ডিজাইনারদের জন্য সবচেয়ে স্বজ্ঞাত কারণ প্রতিটি বৈশিষ্ট্য স্বাধীনভাবে সামঞ্জস্যযোগ্য, যা এটিকে CSS অ্যানিমেশন এবং ডায়নামিক থিমিংয়ের জন্য আদর্শ করে তোলে। তিনটি বৈশিষ্ট্যই একই রঙ বর্ণনা করে কিন্তু ভিন্ন কাজের প্রবাহে ব্যবহার হয়।

RGB এবং CMYK মূলত বিভিন্ন আউটপুট ধরনের জন্য মৌলিকভাবে ভিন্ন রঙের মডেল। RGB (লাল, সবুজ, নীল) হল একটি অ্যাডিটিভ রঙ মডেল যা ডিজিটাল স্ক্রিনের জন্য ব্যবহৃত হয় — রঙ মিলানো মানে আলো যোগ করা, এবং সর্বাধিকে সব চ্যানেল মিশালে এটি সাদা তৈরি করে। CMYK (সিয়ান, ম্যাজেন্টা, হলুদ, কী/কালো) একটি সাবট্র্যাক্টিভ রঙের মডেল যা ভৌত প্রিন্টিং-এ ব্যবহৃত হয় — ইঙ্ক মিশ্রণ আলো শোষণ করে, এবং সব মিলিয়ে কালো তৈরি হয়। ডিজিটাল/স্ক্রিন আউটপুটের জন্য সর্বদা RGB-তে ডিজাইন করুন। বানিজ্যিক প্রিন্টারে ফাইল পাঠানোর আগে CMYK-তে রূপান্তর করুন। রূপান্তর কখনও সম্পূর্ণ নিখুঁত হয় না — কিছু RGB রঙ (বিশেষ করে উজ্জ্বল স্যাটুরেটেড রঙ) CMYK প্রিন্টে পুনরুত্পাদন করা যায় না।

HSB (হু, স্যাচুরেশন, ব্রাইটনেস) এবং HSV (হু, স্যাচুরেশন, ভ্যালু) একই রঙের মডেল যা বিভিন্ন নামে পরিচিত। হু (0°–360°) রঙের পরিবার সনাক্ত করে। স্যাচুরেশন (0–100%) ধূসর থেকে সম্পূর্ণ উজ্জ্বল পর্যন্ত জলবিজ্ঞতা নিয়ন্ত্রণ করে। ব্রাইটনেস/ভ্যালু (0–100%) কন্ট্রোল করে রঙটি কতটা আলো প্রকাশ করে মনে হয়, কালো (0%) থেকে সম্পূর্ণ উজ্জ্বল (100%) পর্যন্ত। HSB হল Adobe Photoshop, Illustrator, এবং Figma-এর কালার পিকার-এ ডিফল্ট মডেল, যা এই টুলগুলি ব্যবহার করা ডিজাইনারদের জন্য এটি অপরিহার্য করে তোলে। এটি HSL থেকে আলাদা কারণ Lightness এবং Brightness কীভাবে হিসাব করা হয় — HSL-এ, 50% লাইটনেস হল বিশুদ্ধ রঙ, যখন HSB-এ 100% ব্রাইটনেস হল বিশুদ্ধ রঙ।

LAB (CIELAB) এবং XYZ (CIEXYZ) হল যন্ত্র-স্বাধীন, মানব দর্শন বিজ্ঞান ভিত্তিক সঙ্গতিপূর্ণ রঙের স্থান। XYZ সব আধুনিক রঙ বিজ্ঞানের ভিত্তি — এটি রঙগুলি মানচিত্র আকারে প্রদর্শন করে যে মানব চোখ কীভাবে সেগুলি উপলব্ধি করে, তিনটি কোণে (X, Y, Z প্রায় লাল, সবুজ, নীল সংবেদনশীলতার সাথে সংশ্লিষ্ট) ব্যবহার করে। LAB XYZ থেকে উদ্ভূত এবং এমনভাবে ডিজাইন করা হয়েছে যাতে সমান সংখ্যাগত দূরত্ব সমানভাবে উপলব্ধ রঙের পার্থক্য প্রকাশ করে, যা রঙের তুলনা, ইমেজ প্রসেসিং, মেশিন লার্নিং এবং মুদ্রণ গুণমান নিয়ন্ত্রণের জন্য এটি উপযুক্ত করে তোলে। উভয়ই পেশাদার রঙ ব্যবস্থাপনা, ICC রঙ প্রোফাইল এবং উন্নত ইমেজ সম্পাদনা ওয়ার্কফ্লোতে ব্যবহৃত হয়। CSS এখন আধুনিক ব্রাউজারগুলিতে color(xyz …) এবং lab(…) সিনট্যাক্সের মাধ্যমে উভয়কেই সমর্থন করে।

কালার পিকার ওয়েবে ইমেজ কালার পিকার আপনাকে যেকোনো ছবি, স্ক্রিনশট, লোগো বা শিল্পকর্ম থেকে সঠিক রঙ বের করতে দেয়। যেকোনো ইমেজ ফাইল আপলোড করুন, তারপর যেকোনো পিক্সেলে ক্লিক করুন এবং তাৎক্ষণিকভাবে তার HEX, RGB, এবং HSL মান বের করুন। এই টুলটি স্বয়ংক্রিয়ভাবে আপনার চিত্রের প্রধান রঙ থেকে একটি সম্পূর্ণ রঙের প্যালেট তৈরি করে। এটি বিদ্যমান উপকরণ থেকে ব্র্যান্ড রঙ মেলানো, মুড বোর্ড থেকে প্যালেট তৈরি করা, পণ্যের ছবিতে থেকে রঙ বের করা এবং প্রতিযোগী ওয়েবসাইট থেকে রঙের স্কিম বিপরীত প্রকৌশল করার জন্য উপকারী। কোনো অ্যাকাউন্ট বা সফ্টওয়্যার ইনস্টলেশনের প্রয়োজন নেই — সম্পূর্ণ ব্রাউজারেই কাজ করে।

কালার পিকার ওয়েব রঙের চাকা তত্ত্বের উপর ভিত্তি করে সকল ছয়টি প্রধান রঙের সাদৃশ্য ধরন সমর্থন করে: পরিপূরক — দুইটি রঙ সরাসরি বিপরীতে (180° দূরে), সর্বাধিক বৈপরীত্য। বিভক্ত-পরিপূরক — একটি মূল রঙ প্লাস দুইটি রঙ যা এর পরিপূরক রঙের সংলগ্ন (150° এবং 210°)। ট্রায়াডিক — তিনটি সমানভাবে বিন্যস্ত রঙ (১২০° আলাদা), সুষম এবং প্রাণবন্ত। সাদৃশ্যপূর্ণ — তিনটি পার্শ্ববর্তী রঙ (৩০° আলাদা), সঙ্গতিপূর্ণ এবং প্রাকৃতিক। মনোক্রোম্যাটিক — বিভিন্ন স্যাচুরেশন এবং লাইটনেস স্তরে একটি নির্দিষ্ট রঙের ভিন্নতা। টেট্রাডিক — চারটি রঙ সমভাবে বিভক্ত (৯০° দূরত্বে), জটিল এবং সমৃদ্ধ। আপনি রঙ নির্বাচন করার সাথে সাথে সমস্ত সুর mathematically বাস্তব-সময়ে হিসাব করা হয়।

হ্যাঁ, কালার পিকার ওয়েব সম্পূর্ণ বিনামূল্যে ব্যবহার করা যায় — প্রতিটি ফিচার সহ কালার পিকার, প্যালেট জেনারেটর, ইমেজ কালার পিকার, WCAG কনট্রাস্ট চেকার, রঙ অন্ধতার সিমুলেটর, রঙের সামঞ্জস্য, টিন্ট এবং শেড জেনারেটর, এবং সব ২০টিরও বেশি রঙের ফরম্যাট রূপান্তর বিনামূল্যে ব্যবহার করা যায়। কোনো অ্যাকাউন্ট, ইমেল ঠিকানা বা রেজিস্ট্রেশন প্রয়োজন নেই। কোনো বিজ্ঞাপন নেই, কোনো ব্যবহার সীমা নেই, এবং কোনো প্রিমিয়াম স্তর নেই — সমস্ত ফিচার স্থায়ীভাবে বিনামূল্যে। টুলটি ১৮টি ভাষায় উপলব্ধ: ইংরেজি, হিন্দি, স্প্যানিশ, রাশিয়ান, ফরাসি, জার্মান, ইতালিয়ান, পর্তুগিজ, বাংলা, জাপানি, কোরিয়ান, মালয়, পোলিশ, ইন্দোনেশিয়ান, আরবি, বুলগেরিয়ান, তুর্কি এবং সুইডিশ।

WCAG (ওয়েব কন্টেন্ট এক্সেসিবিলিটি গাইডলাইন) রঙের বৈপরীত্যের প্রয়োজনীয়তা নিশ্চিত করে যে কম দৃষ্টিশক্তিযুক্ত ব্যবহারকারী, রঙন্ধব্ধ বা বয়সজনিত চোখের মানুষও পাঠ্য পড়তে সক্ষম। বৈপরীত্যের অনুপাত মাপে টেক্সটের রঙ এবং এর পটভূমির আলো-প্রকাশের পার্থক্য — যা 1:1 (কোনো বৈপরীত্য নেই) থেকে 21:1 (সর্বাধিক, সাদা পটভূমিতে কালো) পর্যন্ত হতে পারে। WCAG 2.2 লেভেল AA স্বাভাবিক টেক্সটির জন্য ন্যূনতম 4.5:1 অনুপাত এবং বড় টেক্সটির জন্য 3:1 প্রয়োজন। লেভেল AAA স্বাভাবিক টেক্সটির জন্য 7:1 প্রয়োজন। অ-অনুপালন USA-র ADA, ইউরোপের EAA এবং সেকশন 508-এর অধীনে আইনগত দায়ের মুখোমুখি করতে পারে। ২০২৩ সালে শুধু যুক্তরাষ্ট্রেই ৪,৬০০-এর বেশি অ্যাক্সেসিবিলিটি মামলাও দায়ের হয়েছে, যেখানে বৈপরীত্যের ব্যর্থতা সবচেয়ে সাধারণভাবে উল্লেখিত সমস্যাগুলোর মধ্যে ছিল।

কালার পিকার ওয়েব ৮ ধরনের রঙ দৃষ্টিশক্তি ত্রুটির অনুকরণ করে: প্রোটানোপিয়া — লাল অন্ধত্ব (পুরুষদের ১.৩%)। প্রোটানোমালি — কমিয়ে দেওয়া লাল সংবেদনশীলতা (পুরুষদের ১.৩%)। ডিউটেরানোপিয়া — সবুজ অন্ধত্ব (পুরুষদের ১.২%)। ডিউটেরানোমালি — সবুজ সংবেদনশীলতা কমানো (পুরুষদের ৫%, সবচেয়ে সাধারণ ধরন)। ট্রাইটানোপিয়া — নীল অন্ধত্ব (জনসংখ্যার 0.001%)। ট্রাইটানোমালি — হ্রাসপ্রাপ্ত নীল সংবেদনশীলতা (দুর্লভ)। অ্যাক্রোম্যাটোপসিয়া — সম্পূর্ণ রঙের অন্ধত্ব, শুধুমাত্র ধূসরপট দেখে (জনসংখ্যার 0.003%)। অ্যাক্রোম্যাটোমালি — সমস্ত চ্যানেলে রঙের উপলব্ধি হ্রাস (খুবই বিরল)। প্রতিটি সিমুলেশন একটি ক্লিনিকাল রঙ পরিবর্তন ম্যাট্রিক্স ব্যবহার করে যা আপনার নির্বাচিত রঙের উপর বাস্তবে প্রয়োগ করা হয়।

UI ডিজাইনে রঙের মনোবিজ্ঞান অধ্যয়ন করে কিভাবে রঙ ব্যবহারকারীর অনুভূতি, ধারণা এবং আচরণকে প্রভাবিত করে। প্রধান সম্পর্কগুলো: নীল — বিশ্বাস, নির্ভরযোগ্যতা, শান্তি (ফেসবুক, টুইটার, পেপাল, লিঙ্কডইন দ্বারা ব্যবহৃত)। সবুজ — বৃদ্ধি, স্বাস্থ্য, প্রকৃতি, সাফল্য (Spotify, WhatsApp, পূর্ণ-খাদ্য ব্র্যান্ডগুলির দ্বারা ব্যবহৃত)। লাল — জরুরি, উদ্দীপনা, শক্তি, ক্ষুধা (বিক্রয় ব্যানার, খাদ্য ব্র্যান্ড, CTA-র জন্য ব্যবহৃত)। নীলবেগুনি — বৈভব, সৃজনশীলতা, জ্ঞান (ক্যাডবেরি, হালমার্ক, বিউটি ব্র্যান্ড দ্বারা ব্যবহৃত)। হলুদ — আশাবাদ, উষ্ণতা, মনোযোগ (সতর্কবার্তা, বিক্রয় হাইলাইটের জন্য ব্যবহৃত) কমলা — উদ্দীপনা, বন্ধুত্বপরায়ণতা (অ্যামাজন, ফ্যান্টা, হার্লে-ডেভিডসনের দ্বারা ব্যবহৃত)। রঙের মনোবিজ্ঞান রূপান্তর হার, ব্র্যান্ডের ধারণা, এবং ব্যবহারকারীর ধরে রাখার ক্ষমতাকে প্রভাবিত করে।

একটি ডিজাইন সিস্টেমের রঙের প্যালেট তৈরি করতে ৫টি ধাপ রয়েছে: (১) আপনার প্রাথমিক ব্র্যান্ড রঙ নির্ধারণ করুন এবং এটি HSL-এ রূপান্তর করুন। (২) আলো কম-বেশি করে সিস্টেম্যাটিকভাবে ৯-ধাপের রঙের স্কেল (৫০–৯০০) তৈরি করুন — হালকা ধাপগুলি (৫০–৩০০) ব্যাকগ্রাউন্ড এবং টিন্টের জন্য, গাঢ় ধাপগুলি (৬০০–৯০০) টেক্সট এবং ডার্ক মোডের জন্য। (৩) সেকেন্ডারি, আকসেন্ট, সাকসেস, ওয়ার্নিং, এরর, এবং নিউট্রাল রঙের জন্য পুনরায় করুন। (৪) আপনার স্কেল ধাপগুলিকে রেফারেন্স করা সিমান্টিক টোকেন তৈরি করুন (--color-primary, --color-primary-hover, --color-surface)। (৫) প্রতিটি টেক্সট/ব্যাকগ্রাউন্ড সংমিশ্রণ WCAG AA পরীক্ষায় উত্তীর্ণ হয়েছে কি না যাচাই করুন। আপনার স্কেলগুলি তৈরি করতে, কনট্রাস্ট যাচাই করতে এবং HEX/HSL মান ডিজাইন টোকেন হিসেবে Figma বা CSS-এর জন্য এক্সপোর্ট করতে Color Picker Web ব্যবহার করুন।

৬০-৩০-১০ নীতি একটি ক্লাসিক ডিজাইন নীতি যা সমতুল্য, দৃষ্টিনন্দন রঙের স্কিম তৈরি করার জন্য ব্যবহৃত হয়। 60% — প্রধান/নিরপেক্ষ রঙ (পটভূমি, দেওয়াল, বড় পৃষ্ঠভূমি) — সাধারণত একটি হালকা নিরপেক্ষ রঙ যা সামগ্রিক সুর নির্ধারণ করে। 30% — দ্বিতীয় রঙ (ফার্নিচার, হেডার, সাইডবার) — প্রধান রঙকে সম্পূরক করে এবং গভীরতা যোগ করে। 10% — হাইলাইট রঙ (কলো টু অ্যাকশন, বোতাম, হাইলাইট, গুরুত্বপূর্ণ লিঙ্ক) — ভিজ্যুয়াল আগ্রহ সৃষ্টি করে এবং মূল ক্রিয়াকলাপের দিকে মনোযোগ আকর্ষণ করে। ওয়েব ডিজাইনে এটি অনুবাদিত হয় এভাবে: ৬০% ব্যাকগ্রাউন্ড এবং বেস পৃষ্ঠতল, ৩০% কনটেন্ট এলাকা এবং সেকেন্ডারি ইউআই উপাদান, ১০% প্রাথমিক বোতাম, সক্রিয় অবস্থা, এবং গুরুত্বপূর্ণ হাইলাইট। এই অনুপাত ভিজ্যুয়াল অতিরিক্ততা প্রতিরোধ করে এবং একই সাথে স্তরবিন্যাস বজায় রাখে।

আপেক্ষিক উজ্জ্বলতা একটি রঙের উপলব্ধ উজ্জ্বলতা 0 (কালো) থেকে 1 (সাদা) এর স্কেলে পরিমাপ করে। হিসাবের ধাপগুলি: (1) প্রতিটি RGB চ্যানেল (0–255) কে 255 দ্বারা ভাগ করে দশমিক (0–1) এ রূপান্তর করুন। (2) গামা সংশোধন সরান: যদি মান ≤ 0.04045, তবে 12.92 দ্বারা ভাগ করুন; অন্যথায় (মান + 0.055) / 1.055 কে 2.4 ঘাতpower হিসেবে প্রয়োগ করুন। (3) ওজনযুক্ত সূত্র প্রয়োগ করুন: L = 0.2126 × R + 0.7152 × G + 0.0722 × B। ওজনগুলি মানুষের চোখের সংবেদনশীলতা প্রতিফলিত করে — সবথেকে সংবেদনশীল সবুজের দিকে, কম সংবেদনশীল লালের দিকে, সবচেয়ে কম নীলের দিকে। (4) কনট্রাস্ট অনুপাত = (L_lighter + 0.05) / (L_darker + 0.05)। 0.05 অফসেটটি একটি সাধারণ ডিসপ্লেতে পারিপার্শ্বিক আলোকে প্রতিনিধিত্ব করে। কালার পিকার ওয়েব এই হিসাবটি তৎক্ষণাত সম্পন্ন করে।

HSL (হিউ, স্যাচুরেশন, লাইটনেস) এবং HSB/HSV (হিউ, স্যাচুরেশন, ব্রাইটনেস/ভ্যালু) উভয়ই হিউ এবং স্যাচুরেশন ব্যবহার করে তবে তৃতীয় চ্যানেলে ভিন্ন। HSL, ৫০% হালকাতা হলো খাঁটি, সম্পূর্ণ স্যাচুরেটেড রঙ; ০% হলো কালো এবং ১০০% হলো সাদা। এটি সমমিত। HSB/HSV100% উজ্জ্বলতা/মান হল খাঁটি রঙ; 0% সবসময় কালো হয় অন্য মান যাই হয় না। HSB রঙ নির্বাচন করার জন্য আরও স্বজ্ঞাত কারণ আপনি প্রথমে 100% উজ্জ্বলতায় তীব্র রঙ নির্বাচন করতে পারেন এবং তারপর তা আঁধার করতে পারেন — এই কারণে এটি Photoshop, Figma, এবং Illustrator-এ ডিফল্ট। HSL CSS-এ আরও স্বজ্ঞাত কারণ আপনি একই হিউ-এর অন্ধকার এবং হালকা সংস্করণের মধ্যে মসৃণভাবে অন্তর্বর্তী করতে পারেন।

অ্যাডিটিভ কালার মিক্সিং (RGB) এবং সাবট্রেকটিভ কালার মিক্সিং (CMYK) এই দুটি মৌলিক রঙের মডেল। যোগফল (আরজিবি) — লাইট-উৎসারকারী ডিভাইসগুলির দ্বারা ব্যবহৃত (স্ক্রিন, প্রজেক্টর, এলইডি)। রঙ তৈরি হয় আলো যোগ করার মাধ্যমে। সমস্ত তিনটি চ্যানেলকে সর্বাধিক স্তরে একত্রিত করলে (R=255, G=255, B=255) সাদা তৈরি হয়। কোন আলো না থাকলে (R=0, G=0, B=0) কালো তৈরি হয়। ঘটনামূলক (CMYK) — মুদ্রণে ব্যবহৃত হয়। কালি বাতার তরঙ্গদৈর্ঘ্য শোষণ (যোগসূত্র থেকে বিয়োগ) করে। সমস্ত কালি সর্বাধিক মিলিয়ে মিলে সমস্ত আলো শোষণ করে, ফলে কালো তৈরি হয় (তাত্ত্বিকভাবে — বাস্তবে, একটি কী/কালো কলম যোগ করা হয় কারণ কালি মিশ্রণ নিখুঁত নয়)। ব্যবহারিক প্রয়োগ: ডিজিটাল কাজ ডিজাইন করতে RGB-তে ডিজাইন করুন, তারপর মুদ্রণের জন্য CMYK-তে রূপান্তর করুন — লক্ষ্য করুন যে কিছু উজ্জ্বল RGB রঙ CMYK-তে পুনরায় তৈরি করা যায় না।

রঙের তাপমাত্রা একটি রঙের উষ্ণতা বা ঠাণ্ডা অনুভূতি বর্ণনা করে, যা আলোর উৎসের জন্য কেলভিন (K) এ পরিমাপ করা হয় এবং ডিজাইন রঙের জন্য ধারণাগতভাবে অনুভূত হয়। উষ্ণ রঙ (লাল, কমলা, হলুদ — রঙের শেড 0°–60° এবং 300°–360°) শক্তিশালী, জরুরি এবং আকর্ষণীয় মনে হয়। এরা দৃষ্টিমাধ্যমে এগিয়ে আসে — উষ্ণ রঙের উপাদানগুলো আরও কাছে মনে হয়। ঠাণ্ডা রঙ (নীল, সবুজ, বেগুনি — রঙের স্বর ১২০°–২৪০°) শান্ত, বিশ্বাসযোগ্য এবং পেশাদার মনে হয়। এগুলি ভিজ্যুয়ালি দূরে সরে যায় — ঠান্ডা রঙের উপাদানগুলো আরও দূরে দেখা যায়। নিরপেক্ষ (সাদা, ধূসর, বেইজ, ৯০°–১২০°-এর কাছাকাছি টিল) সমন্বিত এবং বহুমুখী। ইউআই ডিজাইনে, উষ্ণ রঙগুলো কর্ম প্ররোচিত করে (CTA), শীতল রঙগুলো বিশ্বাস তৈরি করে (শিরোনাম, পটভূমি), এবং নিরপেক্ষ রঙগুলো কাঠামো প্রদান করে। কালার পিকার ওয়েবের অ্যাবাউট কালার সেকশন যেকোনো নির্বাচিত রঙের অনুমানিত তাপমাত্রা দেখায়।