HSL में रंग चुनना आरामदायक है, लेकिन stylesheets, design handoffs और ब्रांड डॉक्यूमेंट अभी भी HEX पर चलते हैं। यह कन्वर्टर वह गैप बंद कर देता है और किसी भी hue, saturation और lightness कॉम्बिनेशन के लिए छह-अंकीय कोड देता है।
HSL से HEX कन्वर्ज़न कैसे काम करता है
- saturation और lightness को भिन्नांश में बदलो: 60% बनता है 0.6।
- chroma निकालो C = (1 − |2L − 1|) × S — यही बताता है रंग ग्रे से कितना दूर है।
- ह्यू का उपयोग करके उस chroma को लाल, हरे और नीले चैनलों पर रखें, फिर सभी तीनों को 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 कोड एक छह अंकों वाली hexadecimal संख्या होती है जो # से शुरू होकर रंग के red, green और blue चैनल को स्टोर करती है। हर दो अंकों का जोड़ा एक चैनल को बताता है, 00 (किसी का नहीं) से FF (पूरा) तक, जो कि RGB के 16.7 मिलियन रंगों को छोटी नॉटेशन में देता है। HEX CSS, डिजाइन टूल और ब्रांड गाइडलाइंस में डिफ़ॉल्ट है।
- सिंटैक्स:
- #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 |