HSL মানুষের কথায়ভাবে রঙ বর্ণনা করে: কোন হিউ, কতটা রংতেজ, কতটা উজ্জ্বল। HEX কোডকে HSL‑এ কনভার্ট করা হলো দ্রুততম উপায় যাতে রঙকে সত্যিই টুইক করা যায় — হালকা করা, মিউট করা, বা পুরো স্কেল বানানো।
HEX থেকে HSL রূপান্তর কিভাবে কাজ করে
- HEX কোডকে RGB তে রূপান্তর করো এবং প্রতিটি চ্যানেলকে 255 দিয়ে ভাগ করো, যাতে সব তিনটি মান 0 ও 1 এর মধ্যে পড়ে।
- তিনটির মধ্যে সর্ববৃহৎ এবং সর্বনিম্ন মানগুলো খুঁজে বের করে নাও। তাদের গড়ই lightness L।
- তাদের মধ্যে বিস্তারের ওপরই saturation S নির্ভর করে: হালকা রঙের জন্য এটিকে (2 − max − min) দ্বারা ভাগ করো, আর অন্ধকার রঙের জন্য (max + min) দ্বারা ভাগ করো।
- যে চ্যানেলটিই সর্বোচ্চ সেটাই hue H ঠিক করে — লাল 0°, সবুজ 120°, নীল 240° — এবং বাকী দুই চ্যানেল সেই সেগমেন্টের ভেতর হিউকেই অবস্থান নির্ধারণ করে।
কাজের উদাহরণ
গণিতগতভাবে সঠিক, কিন্তু HSL মান সাধারণত ডিগ্রি ও শতাংশে রাউন্ড করা হয়। ফলে ব্যাক‑কনভার্ট করলে মূল RGB থেকে এক বা দুই ধাপ দূরে গিয়ে পড়তে পারে — বাস্তবে অদৃশ্য, কিন্তু বারবার রাউন্ড‑ট্রিপ করলে জানা ভালো।
HEX এবং HSL ব্যাখ্যা
HEX কী?
একটা HEX কোড হল ছয়-অঙ্কের হেক্সাডেসিমাল সংখ্যা যা একটি রঙের লাল, সবুজ এবং নীল চ্যানেলকে একটি আগত # এর পিছনে সংরক্ষণ করে। প্রতিটি জোড়া ডিজিট একটি চ্যানেলকে কভার করে, 00 (কোনও নেই) থেকে FF (সম্পূর্ণ) পর্যন্ত, যা RGB-এর মতো 16.7 মিলিয়ন রঙই কম অক্ষরে দেয়। CSS, ডিজাইন টুল ও ব্র্যান্ড গাইডলাইনে HEX ডিফল্ট।
- সিনট্যাক্স:
- #RRGGBB
- রেঞ্জ:
- প্রতি চ্যানেল 00–FF
- উপযোগী:
- CSS, ডিজাইন হ্যান্ডঅফ, ব্র্যান্ড গাইডলাইন
HSL কী?
HSL একটি রঙকে তিন ভাগে ভাগ করে: hue (রঙ চক্রে 0–360°), saturation (রঙের তীব্রতা, 0–100%) এবং lightness (উজ্জ্বলতা, 0–100%)। যেহেতু প্রতিটি অংশ মানুষ কীভাবে রঙ বর্ণনা করে তার সাথে মিলে, HSL হাত বা কোডে টিন্ট, শেড এবং সঙ্গতিপূর্ণ প্যালেট তৈরি করার জন্য সবচেয়ে সহজ ফরম্যাট।
- সিনট্যাক্স:
- hsl(H, S%, L%)
- রেঞ্জ:
- 0–360°, 0–100%, 0–100%
- উপযোগী:
- প্যালেট, টিন্ট ও শেড, থিমিং
HEX থেকে HSL রেফারেন্স টেবিল
সবচেয়ে সাধারণ CSS রঙগুলো, HEX থেকে HSL তে রূপান্তর করা।
| রঙ | HEX | HSL |
|---|---|---|
| black | #000000 | hsl(0, 0%, 0%) |
| white | #FFFFFF | hsl(0, 0%, 100%) |
| red | #FF0000 | hsl(0, 100%, 50%) |
| lime | #00FF00 | hsl(120, 100%, 50%) |
| blue | #0000FF | hsl(240, 100%, 50%) |
| yellow | #FFFF00 | hsl(60, 100%, 50%) |
| orange | #FFA500 | hsl(39, 100%, 50%) |
| teal | #008080 | hsl(180, 100%, 25%) |
| purple | #800080 | hsl(300, 100%, 25%) |
| gray | #808080 | hsl(0, 0%, 50%) |