यह कनवर्टर हर 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() में बदलते हैं ताकि पूरी तरह नया रंग चुने बिना hover और focus स्टेट के लिए 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 अंकों का अंदाज़ा लगाए। यही वजह है कि यह एक जैसी दिखने वाली पैलेट, hover स्टेट और डिज़ाइन टोकन बनाने के लिए बेहतरीन है।