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