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