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 एक रंग तीन प्रकाश चॅनेल्सवर — लाल, हिरवा आणि निळा — म्हणून वर्णन करते, प्रत्येकाची किंमत 0 ते 255 दरम्यान असते. हे स्क्रीन कसे कार्य करतात हे प्रतिबिंबित करते: सर्व तीन 255 असतील तर पांढरे, सर्व 0 असतील तर काळा. जेव्हा तुम्हाला रंगांसोबत गणित करायचे असते तेव्हा RGB योग्य पर्याय आहे, आणि rgba() पारदर्शकता जोडते.
- सिंटॅक्स:
- rgb(R, G, B)
- श्रेणी:
- प्रत्येक चॅनेलसाठी 0–255
- उपयुक्त:
- कोड, कॅनव्हास, 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%) |