এই কনভার্টার প্রতিটি CSS hex ফরম্যাট গ্রহণ করে: 6-অঙ্কের #3366cc, 3-অঙ্কের শর্টহ্যান্ড #36c, এবং alpha চ্যানেলসহ 4- ও 8-অঙ্কের ফরম্যাট, # সহ বা ছাড়া। এটি hsl() বা hsla() স্ট্রিং, সরাসরি ভ্যালু এবং প্রতি-উপাদান ব্রেকডাউন দেখায় - আর উল্টো দিকে যেতে হলে একটি HSL to HEX সারিও থাকে। সবকিছু আপনার ব্রাউজারেই চলে - কোনো আপলোড নেই, অ্যাকাউন্ট নেই, কোনো সীমা নেই।
HEX to HSL কনভার্টার
পুরোটাই আপনার ব্রাউজারে চলে - কিছু আপলোড নেই, সাইন-আপ নেই।
CSS
hsl(220, 60%, 50%)এটি যেভাবে রূপান্তরিত হয়
Hue220
Saturation60%
Lightness50%
উল্টো দিক চান? HSL to HEX
#3366ccHEX থেকে HSL এ কীভাবে রূপান্তর করবেন?
প্রথমে hex কোডকে red, green ও blue (0-255) হিসেবে পড়ুন, তারপর সেই রঙকে hue, saturation এবং lightness হিসেবে নতুন করে প্রকাশ করুন। Hue হলো কালার হুইলের উপর একটি কোণ (0-360), saturation বোঝায় রঙ কতটা উজ্জ্বল (0-100%) এবং lightness বোঝায় এটি কতটা হালকা (0-100%)। #3366cc হয়ে যায় hsl(220, 60%, 50%). আপনি টাইপ করার সাথে সাথেই এই টুল এটি করে দেয়।
যেভাবে ব্যবহার করবেন
- 1Hex কোড লিখুন. #3366cc (বা #36c) এর মতো hex কালার টাইপ বা পেস্ট করুন, অথবা কালার সোয়াচ দিয়ে বেছে নিন। # ঐচ্ছিক।
- 2HSL ভ্যালু পড়ুন. hsl() স্ট্রিং, সরাসরি ভ্যালু এবং লাইভ কালার প্রিভিউ আপনি টাইপ করার সাথে সাথেই আপডেট হয়, সাথে hue, saturation ও lightness এর প্রতি-উপাদান ব্রেকডাউন দেখায়।
- 3প্রয়োজনীয় ফরম্যাট কপি করুন. hsl() স্ট্রিং বা কাঁচা ভ্যালুর পাশে Copy তে ক্লিক করুন। উল্টো দিক চান? নিচে hue, saturation ও lightness দিয়ে আবার hex কোড পান।
কাদের জন্য
- ফ্রন্ট-এন্ড ডেভেলপাররা hex কোডকে hsl() এ রূপান্তর করে হোভার ও ফোকাস স্টেটের জন্য lightness পরিবর্তন করেন, একদম নতুন রঙ বেছে না নিয়েই।
- প্যালেট তৈরি করা ডিজাইনাররা hue স্থির রেখে saturation ও lightness ধাপে ধাপে বদলে একটি ব্র্যান্ড রঙ থেকে বিভিন্ন টিন্ট ও শেড তৈরি করেন।
- থিম ও ডিজাইন-টোকেন লেখকরা রঙ HSL হিসেবে সংরক্ষণ করেন, কারণ এটি hex স্ট্রিংয়ের চেয়ে হাতে পড়া ও অ্যাডজাস্ট করা অনেক সহজ।
- যেকেউ যারা রঙ মেলান এমন টুলের মধ্যে যেখানে একটি hex চায় (Figma, বেশিরভাগ CSS) আর অন্যটি HSL চায় (SCSS হেল্পার, কিছু কালার সিস্টেম)।
সাধারণ প্রশ্ন
এই HEX to HSL কনভার্টার কি ফ্রি?
হ্যাঁ - এটি কোনো সাইন-আপ ও সীমা ছাড়াই 100% ফ্রি। এটি সম্পূর্ণভাবে আপনার ব্রাউজারে চলে।
আমার রঙ কি কোথাও আপলোড হয়?
না। এই রূপান্তর শুধু সাধারণ JavaScript, যা আপনার ডিভাইসে চলে - সার্ভারে কিছুই পাঠানো হয় না, আর পেজ লোড হওয়ার পর এটি অফলাইনেও কাজ করতে থাকে।
HSL কী?
HSL মানে hue, saturation এবং lightness। Hue হলো কালার হুইলের উপর 0 থেকে 360 ডিগ্রি পর্যন্ত একটি কোণ, saturation বোঝায় রঙ 0 থেকে 100 শতাংশের মধ্যে কতটা উজ্জ্বল, এবং lightness 0 শতাংশ (কালো) থেকে শুরু করে 50 শতাংশে খাঁটি রঙ হয়ে 100 শতাংশ (সাদা) পর্যন্ত যায়।
হাতে hex থেকে HSL কীভাবে রূপান্তর করবেন?
Hex কে red, green ও blue এ রূপান্তর করে প্রতিটিকে 255 দিয়ে ভাগ করুন। তিনটির মধ্যে সর্বোচ্চ ও সর্বনিম্ন মান নিন: lightness হলো তাদের গড়, saturation হলো (সর্বোচ্চ - সর্বনিম্ন) ভাগ (1 - |2L - 1|) দিয়ে, এবং hue আসে কোন চ্যানেল সর্বোচ্চ তার উপর ভিত্তি করে, যা 0-360 ডিগ্রিতে স্কেল করা হয়।
এটি কি #36c এর মতো 3-অঙ্কের শর্টহ্যান্ড সাপোর্ট করে?
হ্যাঁ। CSS শর্টহ্যান্ডে প্রতিটি অঙ্ক দ্বিগুণ হয়ে যায়, তাই #36c প্রসারিত হয়ে #3366cc হয় এবং hsl(220, 60%, 50%) এ রূপান্তরিত হয়। 4-অঙ্কের ফরম্যাটও একইভাবে কাজ করে, যেখানে শেষ অঙ্কটি alpha।
এটি স্বচ্ছতা (HSLA) কীভাবে সামলায়?
8-অঙ্কের hex কোডের শেষ জোড়ায় alpha থাকে। সেই বাইট (0-255) কে 255 দিয়ে ভাগ করে hsla() এর প্রয়োজনীয় 0-1 alpha পাওয়া যায়, যা তিন দশমিক স্থান পর্যন্ত রাউন্ড হয় - তাই #3366cc80 হয়ে যায় hsla(220, 60%, 50%, 0.502).
এটি কি HSL কে আবার HEX এ রূপান্তর করতে পারে?
হ্যাঁ। ফলাফলের নিচে HSL to HEX সারি ব্যবহার করুন: hue (0-360) এর পাশাপাশি saturation ও lightness (0-100%) দিন এবং এটি সঙ্গে সঙ্গে hex কোড ফিরিয়ে দেবে। রেঞ্জের বাইরের ভ্যালু সীমার মধ্যে আটকে দেওয়া হয়।
hex এর বদলে HSL কেন কাজে লাগে?
HSL মানুষের জন্য সহজে পড়ার মতো: L বাড়িয়ে রঙ হালকা করতে পারেন, S কমিয়ে এটিকে ম্লান করতে পারেন, অথবা H পরিবর্তন করে এর পরিবার বদলাতে পারেন - hex অঙ্ক অনুমান না করেই। এটি ধারাবাহিক প্যালেট, হোভার স্টেট ও ডিজাইন টোকেন তৈরির জন্য দারুণ উপযোগী।