HSL হলো রঙ বাছাই করার বন্ধুতোষণ উপায়, আর RGB হলো সেই ফরম্যাট যা স্ক্রিন, canvas API এবং ইমেজ কোড প্রকৃতপক্ষে ব্যবহার করে। এই কনভার্টার যেকোনো hue, saturation এবং lightness ট্রিপলকে সঠিক 0–255 চ্যানেলে পরিণত করে।
HSL থেকে RGB রূপান্তর কিভাবে কাজ করে
- S এবং L কে ভগ্নাংশে রূপান্তর কর এবং chroma C = (1 − |2L − 1|) × S গণনা কর।
- হিউকে 60 দিয়ে ভাগ করে রঙ চাকার কোন সেগমেন্টে আছে খুঁজে বের কর এবং মধ্যবর্তী মান X = C × (1 − |(H/60 mod 2) − 1|) গণনা কর।
- সেই সেগমেন্ট অনুযায়ী R, G ও B স্লটগুলিতে C, X এবং 0 বরাদ্দ কর।
- সব তিনটি চ্যানেলে lightness অফসেট L − C/2 যোগ কর এবং 255 দ্বারা গুণ কর।
কাজের উদাহরণ
ফাইনাল রাউন্ডিং ছাড়া ফলাফলটি নির্ভুল। ভগ্নাংশীয় hue বা saturation মানও সমর্থিত এবং তারা নিকটস্থ RGB ট্রিপলে নেমে আসে।
HSL এবং RGB ব্যাখ্যা
HSL কী?
HSL একটি রঙকে তিন ভাগে ভাগ করে: hue (রঙ চক্রে 0–360°), saturation (রঙের তীব্রতা, 0–100%) এবং lightness (উজ্জ্বলতা, 0–100%)। যেহেতু প্রতিটি অংশ মানুষ কীভাবে রঙ বর্ণনা করে তার সাথে মিলে, HSL হাত বা কোডে টিন্ট, শেড এবং সঙ্গতিপূর্ণ প্যালেট তৈরি করার জন্য সবচেয়ে সহজ ফরম্যাট।
- সিনট্যাক্স:
- hsl(H, S%, L%)
- রেঞ্জ:
- 0–360°, 0–100%, 0–100%
- উপযোগী:
- প্যালেট, টিন্ট ও শেড, থিমিং
RGB কী?
RGB একটি রঙকে তিনটি আলোর চ্যানেল হিসেবে বর্ণনা করে — লাল, সবুজ এবং নীল — প্রতিটি 0 থেকে 255 পর্যন্ত। এটি স্ক্রিন কিভাবে কাজ করে তারই প্রতিফলন: সবগুলো 255 হলে সাদা, সবগুলো 0 হলে কালো। যখনই তোমাকে কোনো রঙ নিয়ে গণনা করতে হবে, RGB সঠিক পছন্দ, এবং rgba() ওই সঙ্গে ট্রান্সপারেন্সিও যোগ করে।
- সিনট্যাক্স:
- rgb(R, G, B)
- রেঞ্জ:
- প্রতি চ্যানেল 0–255
- উপযোগী:
- কোড, ক্যানভাস, rgba() দিয়ে ট্রান্সপারেন্সি
HSL থেকে RGB রেফারেন্স টেবিল
সবচেয়ে সাধারণ CSS রঙগুলো, HSL থেকে RGB তে রূপান্তর করা।
| রঙ | HSL | RGB |
|---|---|---|
| black | hsl(0, 0%, 0%) | rgb(0, 0, 0) |
| white | hsl(0, 0%, 100%) | rgb(255, 255, 255) |
| red | hsl(0, 100%, 50%) | rgb(255, 0, 0) |
| lime | hsl(120, 100%, 50%) | rgb(0, 255, 0) |
| blue | hsl(240, 100%, 50%) | rgb(0, 0, 255) |
| yellow | hsl(60, 100%, 50%) | rgb(255, 255, 0) |
| orange | hsl(39, 100%, 50%) | rgb(255, 166, 0) |
| teal | hsl(180, 100%, 25%) | rgb(0, 127, 128) |
| purple | hsl(300, 100%, 25%) | rgb(128, 0, 127) |
| gray | hsl(0, 0%, 50%) | rgb(128, 128, 128) |