HSL हे रंग निवडण्याचा सोपा मार्ग आहे, तर RGB हे स्क्रीन, canvas API आणि इमेज कोड नक्की वापरतात. हा कन्व्हर्टर कोणत्याही hue, saturation आणि lightness त्रिकाला अचूक 0–255 चॅनेलमध्ये रूपांतरित करतो.
HSL ते RGB रूपांतरण कसे कार्य करते
- S आणि L ला भागांमध्ये रूपांतर करा आणि chroma C = (1 − |2L − 1|) × S हा गुणाकार शोधा.
- रंग चकतीवर त्याचा विभाग शोधण्यासाठी hue ला 60 ने विभागा आणि मध्यवर्ती किंमत X = C × (1 − |(H/60 mod 2) − 1|) गणना करा.
- त्या विभागानुसार C, X आणि 0 ला R, G आणि B स्लॉटमध्ये नेमून द्या.
- हे सर्व तीन चॅनेल्सवर लाइटनेस ऑफसेट L − C/2 जोडा आणि नंतर 255 ने गुणा करा.
उदाहरण
अंतिम पूर्णांक राउंडिंगपर्यंत परिणाम अचूक आहे. विरघळलेल्या hue किंवा saturation मूल्यांना समर्थन आहे आणि ते नजीकच्या RGB त्रिक्यावर येतील.
HSL आणि RGB समजावणी
HSL म्हणजे काय?
HSL रंगाला तीन भागात विभागते: hue (रंगसंचारावर 0–360°), saturation (किती रंगीच, 0–100%) आणि lightness (किती उजळ, 0–100%). लोक रंग वर्णन करताना प्रत्येक भाग जसा वापरतात तसा असल्यामुळे HSL टिंट्स, शेड्स आणि सुसंगत पॅलेट्स हाताने किंवा कोडमध्ये तयार करण्यासाठी सर्वात सोपी फॉरमॅट आहे.
- सिंटॅक्स:
- hsl(H, S%, L%)
- श्रेणी:
- 0–360°, 0–100%, 0–100%
- उपयुक्त:
- पॅलेट्स, टिंट्स आणि शेड्स, थीमिंग
RGB म्हणजे काय?
RGB एक रंग तीन प्रकाश चॅनेल्सवर — लाल, हिरवा आणि निळा — म्हणून वर्णन करते, प्रत्येकाची किंमत 0 ते 255 दरम्यान असते. हे स्क्रीन कसे कार्य करतात हे प्रतिबिंबित करते: सर्व तीन 255 असतील तर पांढरे, सर्व 0 असतील तर काळा. जेव्हा तुम्हाला रंगांसोबत गणित करायचे असते तेव्हा RGB योग्य पर्याय आहे, आणि rgba() पारदर्शकता जोडते.
- सिंटॅक्स:
- rgb(R, G, B)
- श्रेणी:
- प्रत्येक चॅनेलसाठी 0–255
- उपयुक्त:
- कोड, कॅनव्हास, rgba() सह पारदर्शकता
HSL ते RGB संदर्भ तक्ता
सर्वसाधारण CSS रंग, HSL मधून RGB मध्ये रूपांतरित केलेले.
| रंग | HSL | RGB |
|---|---|---|
| black | hsl(0, 0%, 0%) | rgb(0, 0, 0) |
| white | hsl(0, 0%, 100%) | rgb(255, 255, 255) |
| red | hsl(0, 100%, 50%) | rgb(255, 0, 0) |
| lime | hsl(120, 100%, 50%) | rgb(0, 255, 0) |
| blue | hsl(240, 100%, 50%) | rgb(0, 0, 255) |
| yellow | hsl(60, 100%, 50%) | rgb(255, 255, 0) |
| orange | hsl(39, 100%, 50%) | rgb(255, 166, 0) |
| teal | hsl(180, 100%, 25%) | rgb(0, 127, 128) |
| purple | hsl(300, 100%, 25%) | rgb(128, 0, 127) |
| gray | hsl(0, 0%, 50%) | rgb(128, 128, 128) |