RGB स्क्रीन को बताता है कितना प्रकाश भेजना है; HSL बताता है कि रंग असल में कैसा दिखता है। तीनों चैनलों को hue, saturation और lightness में बदलना रंग को हाथ से समायोजित करना आसान बनाता है।
RGB से HSL कन्वर्ज़न कैसे काम करता है
- R, G और B को 255 से भाग करो ताकि हर मान 0 और 1 के बीच आ जाए।
- तीनों में से अधिकतम और न्यूनतम लें — उनका औसत lightness L है।
- अगर अधिकतम और न्यूनतम बराबर हैं, तो रंग ग्रे है: hue और saturation दोनों 0 हैं।
- अन्यथा S को अधिकतम और न्यूनतम के फैलाव से निकाला जाता है, और H को उस चैनल से पढ़ो जो अधिकतम है।
काम करने का उदाहरण
सिद्धांततः सटीक। क्योंकि H, S और L सामान्यतः गोल कर के पूरे नंबर दिखाए जाते हैं, वापस कनवर्ट करने पर किसी चैनल में एक-दो कदम का बदलाव आ सकता है।
RGB और HSL समझाया गया
RGB क्या है?
RGB किसी रंग को तीन लाइट चैनलों — red, green और blue — के रूप में बताता है, हर एक 0 से 255 के बीच। यह स्क्रीन के असली काम करने के तरीके को दर्शाता है: जब सभी तीन 255 पर हों तो सफेद मिलता है, और सभी 0 पर काला। जब तुम्हें किसी रंग के साथ कैलकुलेशन करना हो तो RGB सही चुनाव है, और rgba() पारदर्शिता जोड़ता है।
- सिंटैक्स:
- rgb(R, G, B)
- रेंज:
- 0–255 प्रति चैनल
- उपयुक्त:
- कोड, canvas, rgba() के साथ पारदर्शिता
HSL क्या है?
HSL एक रंग को hue (0–360° रंग पहिये पर), saturation (कितना रंगीन, 0–100%) और lightness (कितना उज्ज्वल, 0–100%) में बाँटता है। चूँकि हर हिस्सा लोगों के रंग वर्णन से मिलता है, HSL तिन्ट्स, शेड्स और स्थिर पैलेट बनाने के लिए सबसे आसान फ़ॉर्मैट है — हाथ से या कोड में।
- सिंटैक्स:
- hsl(H, S%, L%)
- रेंज:
- 0–360°, 0–100%, 0–100%
- उपयुक्त:
- पैलेट, टिंट और शेड, थीमिंग
RGB से HSL संदर्भ तालिका
सबसे सामान्य CSS रंग, RGB से HSL में कन्वर्ट किए गए।
| रंग | RGB | HSL |
|---|---|---|
| black | rgb(0, 0, 0) | hsl(0, 0%, 0%) |
| white | rgb(255, 255, 255) | hsl(0, 0%, 100%) |
| red | rgb(255, 0, 0) | hsl(0, 100%, 50%) |
| lime | rgb(0, 255, 0) | hsl(120, 100%, 50%) |
| blue | rgb(0, 0, 255) | hsl(240, 100%, 50%) |
| yellow | rgb(255, 255, 0) | hsl(60, 100%, 50%) |
| orange | rgb(255, 165, 0) | hsl(39, 100%, 50%) |
| teal | rgb(0, 128, 128) | hsl(180, 100%, 25%) |
| purple | rgb(128, 0, 128) | hsl(300, 100%, 25%) |
| gray | rgb(128, 128, 128) | hsl(0, 0%, 50%) |