मुख्य सामग्री पर जाएँ

Hex को HSL रंग कन्वर्टर ऑनलाइन

`#RGB`, `#RRGGBB` या `#RRGGBBAA` को लाइव स्वैच के साथ CSS `hsl()` / `hsla()` में बदलें। डिज़ाइनर पिकर से hex कॉपी करते हैं लेकिन स्टाइलशीट में hex गणित के बिना लाइटनेस या सैचुरेशन नजाने के लिए HSL चाहते हैं।

HSL ह्यू, सैचुरेशन और लाइटनेस अलग करता है — «थोड़ा गहरा» ट्वीक अक्सर hex निबल संपादित करने से आसान।

अल्फा वाला आठ-अंक hex hsla में मैप होता है; अपारदर्शी रंग hsl आउटपुट करते हैं।

डिज़ाइन ऐप से छोटे अंतर रंग स्थानों में हो सकते हैं — पूर्वावलोकन स्वैच पर भरोसा करें।

कैसे कनवर्ट करें

  1. hex दर्ज करें
  2. HSL आउटपुट और स्वैच जाँचें
  3. CSS में कॉपी करें

HSL किसके लिए उपयोगी

  • CSS वेरिएबल में हल्के/गहरे वेरिएंट बनाएँ।
  • डिज़ाइन हैंडऑफ़ से hex के साथ कोड मिलाएँ।
  • तत्काल पूर्वावलोकन ट्रायल और एरर काटता है।

परिदृश्य

  • ब्रांड hex → hsl कस्टम प्रॉपर्टी
  • लाइटनेस शिफ्ट से बटन होवर
  • 8-अंक hex में अल्फा निरीक्षण

सुझाव

  • इनपुट पर हैश `#` वैकल्पिक।
  • शॉर्ट `#abc` `#aabbcc` में फैलता है।
  • अल्फा ज़रूरत के अनुसार hsl बनाम hsla कॉपी करें।

उदाहरण

इनपुटआउटपुटनोट
#FF5733hsl(...)अपारदर्शी
#FF573380hsla(...)अर्ध-पारदर्शी

Hex → HSL FAQ

RGB कन्वर्टर से संबंध?
साइट पर hex↔RGB भी है। अवधारणात्मक हल्का/गहरा ट्वीक के लिए HSL अक्सर बेहतर।
Figma से बेमेल?
राउंडिंग और गैमट भिन्न — लक्ष्य ब्राउज़र पर आँकें।

संबंधित टूल