HEX, RGB, HSL: ওয়েব কালার কোড বোঝা

আপনি একটি ওয়েবসাইট এডিট করছেন এবং CSS-এ #FF5733 দেখছেন। বা একজন ডিজাইনার আপনাকে rgb(255, 87, 51) পাঠিয়েছে। বা কোনো ডিজাইন টুল রঙ দেখাচ্ছে hsl(11, 100%, 60%) হিসেবে। এগুলো সব ঠিক একই রঙ বর্ণনা করে — একটি উজ্জ্বল লাল-কমলা — কিন্তু তিনটি ভিন্ন ফরম্যাটে।

আপনি যদি কখনো ওয়েব কালার কোড নিয়ে বিভ্রান্ত হয়ে থাকেন, এই গাইড পাঁচ মিনিটে সবকিছু পরিষ্কার করবে।

ডিজিটাল রঙ কীভাবে কাজ করে

আপনার স্ক্রিনে প্রতিটি রঙ তিনটি আলোর প্রাথমিক রঙ মিশিয়ে তৈরি হয়: লাল, সবুজ এবং নীল। এটি RGB কালার মডেল। প্রতিটি চ্যানেলের তীব্রতা শূন্য (বন্ধ) থেকে সর্বোচ্চ (পূর্ণ উজ্জ্বলতা) পর্যন্ত পরিবর্তন করে, আপনি প্রায় ১৬.৭ মিলিয়ন রঙের যেকোনোটি তৈরি করতে পারেন যা একটি মানক ডিসপ্লে দেখাতে পারে।

• Red 255, Green 0, Blue 0 = বিশুদ্ধ লাল
• Red 0, Green 255, Blue 0 = বিশুদ্ধ সবুজ
• Red 0, Green 0, Blue 255 = বিশুদ্ধ নীল
• Red 255, Green 255, Blue 255 = সাদা (সব চ্যানেল পূর্ণ)
• Red 0, Green 0, Blue 0 = কালো (সব চ্যানেল বন্ধ)
• Red 255, Green 255, Blue 0 = হলুদ (লাল + সবুজ)

ওয়েবে ব্যবহৃত প্রতিটি কালার ফরম্যাট এই চ্যানেল মানগুলো প্রকাশ করার ভিন্ন উপায় মাত্র।

HEX কালার

দেখতে কেমন

#FF5733
#3498DB
#2ECC71
#000000
#FFFFFF

কীভাবে কাজ করে

HEX কালার কোড হলো হ্যাশ চিহ্নের পরে ছয়-অক্ষরের স্ট্রিং। ছয়টি অক্ষর তিনটি জোড়ায় বিভক্ত, প্রতিটি হেক্সাডেসিমাল (বেস ১৬)-এ একটি কালার চ্যানেল উপস্থাপন করে:

হেক্সাডেসিমাল 0-9 সংখ্যা এবং A-F অক্ষর ব্যবহার করে, যেখানে A=10, B=11, C=12, D=13, E=14, F=15। তাই হেক্সাডেসিমালে FF সমান দশমিকে 255 (15 × 16 + 15 = 255)।

#FF5733 বিশ্লেষণ:

• FF = লাল 255-এ (সর্বোচ্চ)
• 57 = সবুজ 87-এ
• 33 = নীল 51-এ

এটি একটি উজ্জ্বল লাল-কমলা তৈরি করে।

সংক্ষিপ্ত রূপ

যখন প্রতিটি জোড়ায় দুটি অভিন্ন অক্ষর থাকে, আপনি তিন-অক্ষরের সংক্ষিপ্ত রূপ ব্যবহার করতে পারেন:

• #FF0000 লেখা যায় #F00
• #3366FF লেখা যায় #36F
• #000000 লেখা যায় #000

RGB কালার

দেখতে কেমন

rgb(255, 87, 51)
rgb(52, 152, 219)
rgb(46, 204, 113)
rgb(0, 0, 0)
rgb(255, 255, 255)

কীভাবে কাজ করে

RGB নোটেশন সরাসরি 0 থেকে 255 দশমিক সংখ্যায় লাল, সবুজ এবং নীল চ্যানেলের মান বলে। এটি সবচেয়ে স্বজ্ঞাত ফরম্যাট কারণ সংখ্যাগুলো সরাসরি প্রতিটি আলোর চ্যানেলের তীব্রতার সাথে মিলে।

rgb(255, 87, 51) মানে:

• লাল: 255 (সর্বোচ্চ)
• সবুজ: 87 (প্রায় এক-তৃতীয়াংশ)
• নীল: 51 (প্রায় এক-পঞ্চমাংশ)

RGBA: স্বচ্ছতা যোগ

RGBA অস্বচ্ছতার (আলফা) জন্য চতুর্থ মান যোগ করে, 0 (সম্পূর্ণ স্বচ্ছ) থেকে 1 (সম্পূর্ণ অস্বচ্ছ):

rgba(255, 87, 51, 0.5)   /* 50% স্বচ্ছ */
rgba(0, 0, 0, 0.8)        /* 80% অস্বচ্ছ কালো */

ওভারলে, ছায়া এবং পিছনের বিষয়বস্তু দেখাতে হয় এমন ডিজাইন উপাদানের জন্য এটি কার্যকর।

HSL কালার

দেখতে কেমন

hsl(11, 100%, 60%)
hsl(204, 70%, 53%)
hsl(145, 63%, 49%)
hsl(0, 0%, 0%)
hsl(0, 0%, 100%)

কীভাবে কাজ করে

HSL মানে Hue, Saturation, Lightness। লাল/সবুজ/নীল চ্যানেল মিশ্রণে চিন্তা না করে, HSL রঙকে মানুষ স্বাভাবিকভাবে যেভাবে ভাবে সেভাবে বর্ণনা করে।

Hue হলো রঙটি নিজে, কালার হুইলে ডিগ্রি হিসেবে (0-360):

• 0° / 360° = লাল
• 60° = হলুদ
• 120° = সবুজ
• 180° = সায়ান
• 240° = নীল
• 300° = ম্যাজেন্টা

Saturation হলো রঙ কতটা উজ্জ্বল, 0% (ধূসর) থেকে 100% (পূর্ণ স্যাচুরেটেড)।

Lightness হলো রঙ কতটা হালকা বা গাঢ়, 0% (কালো) থেকে 100% (সাদা)। 50% হলো "স্বাভাবিক" হালকাতা।

hsl(11, 100%, 60%) মানে:

• Hue: 11° (সামান্য কমলা লাল)
• Saturation: 100% (পূর্ণ উজ্জ্বল)
• Lightness: 60% (স্বাভাবিকের চেয়ে সামান্য হালকা)

HSLA: স্বচ্ছতা যোগ

RGBA-র মতো, HSLA আলফা চ্যানেল যোগ করে:

hsla(11, 100%, 60%, 0.5)   /* 50% স্বচ্ছ */

কোন ফরম্যাট কখন ব্যবহার করবেন

ওয়েব ডেভেলপমেন্টের জন্য

HEX হলো কার্যত মান। বেশিরভাগ CSS HEX কোড দিয়ে লেখা হয় কারণ এগুলো সংক্ষিপ্ত এবং প্রতিটি ডেভেলপার চেনে।

ডিজাইন সিস্টেমের জন্য

HSL সামঞ্জস্যপূর্ণ কালার প্যালেট তৈরির জন্য আদর্শ। ব্র্যান্ড কালারের হালকা ও গাঢ় ভ্যারিয়েন্ট তৈরি করতে, শুধু লাইটনেস মান সামঞ্জস্য করুন:

• প্রাইমারি: hsl(210, 80%, 50%)
• হালকা ভ্যারিয়েন্ট: hsl(210, 80%, 70%)
• গাঢ় ভ্যারিয়েন্ট: hsl(210, 80%, 30%)

Hue ও Saturation একই থাকে, যা গ্যারান্টি দেয় ভ্যারিয়েন্টগুলো বিভিন্ন উজ্জ্বলতায় একই "রঙ"।

স্বচ্ছতার জন্য

ওভারলে, ছায়া বা গ্লাস ইফেক্টের জন্য সেমি-ট্রান্সপারেন্ট রঙ প্রয়োজন হলে RGBA বা HSLA ব্যবহার করুন।

ফরম্যাটের মধ্যে রূপান্তর

আপনাকে ঘন ঘন ফরম্যাটের মধ্যে রূপান্তর করতে হবে। একজন ডিজাইনার HSL মান পাঠিয়েছে কিন্তু আপনার কোডবেস HEX ব্যবহার করে। একটি ব্র্যান্ড গাইড RGB নির্দিষ্ট করে কিন্তু আপনার ভ্যারিয়েন্ট তৈরির জন্য HSL দরকার।

গণিত সরল কিন্তু হাতে করা ক্লান্তিকর। কনভার্টার টুল তাৎক্ষণিকভাবে করে দেয়।

রঙ নিয়ে কাজ শুরু করুন:

• কালার কোড রূপান্তর করুন
• কালার কনভার্টার টুল
• কালার প্যালেট জেনারেটর

সব টুল বিনামূল্যে এবং সরাসরি আপনার ব্রাউজারে কাজ করে।