पृष्ठाचा उद्देश आणि कार्य
हे पृष्ठ तुम्हाला RGB रंग मॉडेलमध्ये दिलेला रंग—लाल, हिरवा आणि निळा प्रत्येकी ० ते २५५ पर्यंतची तीन संख्या—तत्काळ HSL मॉडेलमध्ये रूपांतरित करून दाखवते. HSL म्हणजे ह्यू (अंशात ०–३६०), सॅच्युरेशन (टक्केवारी) आणि लाइटनेस (टक्केवारी). उदाहरणार्थ, RGB मूल्य ७९, ७०, २२९ टाकल्यास HSL मध्ये २४३°, ७५%, ५९% असे मूल्य मिळते.
या निकालासोबतच तेच रंग इतर सामान्य स्वरूपांतही दाखवले जातात: HEX, HSV, CMYK (स्क्रीन अंदाज) आणि LAB. तुम्ही कोणतेही फील्ड बदलल्यास सर्व इतर फील्ड लगेच अपडेट होतात. सर्व रूपांतरणे तुमच्या ब्राउझरमध्येच होतात; तुम्ही टाकलेली कोणतीही माहिती सर्व्हरवर अपलोड होत नाही. त्यामुळे गोपनीयता राखली जाते.
हे पृष्ठ विशेषतः अशा विकासकांसाठी आणि डिझाइनर्ससाठी उपयुक्त आहे ज्यांना डिस्प्ले-नेटिव्ह RGB मॉडेलपासून मानवी दृष्टिकोनातून रंग समजून घेण्यासाठी तयार केलेल्या HSL मॉडेलकडे जायचे असते.
RGB आणि HSL मधील फरक – हे पृष्ठ का वेगळे आहे
RGB हे डिस्प्ले-नेटिव्ह मॉडेल आहे. स्क्रीनवर लाल, हिरवा आणि निळा प्रकाश योग्य प्रमाणात मिसळून रंग तयार होतो. प्रत्येक घटक ० (पूर्ण अंधकार) ते २५५ (पूर्ण तीव्रता) पर्यंत असतो. हे मॉडेल मॉनिटर, टीव्ही आणि मोबाइल स्क्रीनसाठी थेट उपयुक्त आहे. पण मानवी मेंदू रंगांचा विचार तीन रंगांच्या मिश्रणात करत नाही; आपण रंगाला ह्यू (मूळ रंग), सॅच्युरेशन (शुद्धता किंवा रंगाची तीव्रता) आणि लाइटनेस (प्रकाशमानता) या संदर्भात ओळखतो.
HSL हे मॉडेल या तीन गुणधर्मांवर आधारित आहे. ह्यू ०° ते ३६०° पर्यंतच्या वर्तुळात मोजला जातो (लाल = ०°, हिरवा = १२०°, निळा = २४०°). सॅच्युरेशन आणि लाइटनेस ०% ते १००% पर्यंत असतात. HSL चे सर्वात मोठे वैशिष्ट्य म्हणजे लाइटनेस स्वतंत्रपणे बदलल्यास ह्यू बदलत नाही. RGB मध्ये एक चॅनेल बदलल्यास रंगाची छटा तर बदलतेच, पण उर्वरित चॅनेल देखील प्रभावित होतात. उदाहरणार्थ, RGB मध्ये फक्त लाल वाढवल्यास रंग लाल बनतो, पण त्याची प्रकाशमानता आणि छटा दोन्ही बदलतात.
हेच कारण आहे की हे पृष्ठ रंग पॅलेट्स, थीम्स आणि सुलभतेसाठी कॉन्ट्रास्ट व्हेरियंट तयार करण्यासाठी HSL ला आवश्यक मानते. तुम्ही एकदाच ह्यू निश्चित केला की सॅच्युरेशन किंवा लाइटनेस बदलून अनेक शेड्स (गडद), टिंट्स (हलके) आणि टोन्स (राखाडी मिसळून) मिळवता येतात. CSS मध्ये hsl() फंक्शन वापरून हे थेट स्टाइलशीटमध्ये लागू करता येते. उदाहरणार्थ, hsl(243, 75%, 59%) हा पृष्ठाद्वारे दाखवलेला निळसर जांभळा रंग आहे.
इनपुट आणि आउटपुट: नियम आणि मर्यादा
इनपुट: RGB मूल्ये तीन पूर्णांक ०–२५५ या श्रेणीत असावीत. स्वरूपात स्वल्पविराम किंवा जागा वापरता येते. चुकीचे इनपुट दिल्यास त्रुटी संदेश दिसेल: “Enter RGB as three numbers 0–255, like 79, 70, 229.”
तसेच तुम्ही थेट HSL मूल्ये टाकूनही RGB मध्ये रूपांतर घेऊ शकता. HSL साठी स्वरूप: ह्यू ०–३६० (अंशात) आणि दोन टक्केवारी. उदाहरणार्थ: २४३, ७५%, ५९%. चुकीचे इनपुट दिल्यास दिसेल: “Enter HSL as hue 0–360 with two percentages, like 243, 75%, 59%.”
आउटपुट: पृष्ठ खालील स्वरूपात रंग दाखवते:
- HSL: ह्यू ०–३६०, सॅच्युरेशन (%), लाइटनेस (%)
- HEX: # मार्कसह ६ हेक्साडेसिमल अंक
- HSV: ह्यू, सॅच्युरेशन (%), व्हॅल्यू (%)
- CMYK: स्क्रीनवरून अंदाजे मूल्य (व्यावसायिक मुद्रणासाठी विश्वसनीय नाही)
- LAB: साय-वाय-एल (CIE मानक)
एज केसेस:
- जर तुम्ही LAB किंवा CMYK मध्ये असे मूल्य टाकले जे दृश्य RGB श्रेणीत बसत नसेल, तर पृष्ठ ते सर्वात जवळच्या प्रदर्शित होणाऱ्या रंगात समायोजित करते. अशा वेळी तो रंग परत रूपांतरित केल्यास मूळ मूल्य किंचित बदलू शकते.
- CMYK आउटपुट हे केवळ स्क्रीन अंदाज आहे. अचूक मुद्रणासाठी ते प्रिंट प्रूफशी पडताळून घ्या.
सर्व रूपांतरणे तात्काळ होतात. एकदा इनपुट फील्ड बदलले की इतर सर्व फील्ड रिफ्रेश होतात.
वापरकर्त्यांसाठी उपयोग (कोणाला हे पृष्ठ हवे)
हे पृष्ठ विशेषतः खालील व्यावसायिकांसाठी उपयुक्त आहे:
- UI/UX डिझाइनर्स: ज्यांना सुलभ रंग पॅलेट तयार करायची आहेत जिथे लाइटनेस स्वतंत्रपणे नियंत्रित करता येईल, पण ह्यू बदलू नये. WCAG कॉन्ट्रास्ट गुणोत्तरे साध्य करण्यासाठी HSL आदर्श आहे.
- फ्रंट-एंड डेव्हलपर्स: डिझाइन टूल्समधून RGB मूल्ये घेऊन CSS
hsl()फंक्शनमध्ये वापरण्यासाठी थेट रूपांतर. - थीम बिल्डर्स: कोर ब्रँड कलरचे ह्यू टिकवून ठेवून लाइट आणि डार्क व्हेरियंट तयार करणे सोपे जाते.
- डेटा व्हिज्युअलायझेशन डिझाइनर्स: ज्यांना अनुक्रमिक रंग स्केल हवे आहेत जिथे लाइटनेस हळूहळू वाढवून क्रम दाखवता येतो.
RGB मध्ये काम करताना तीन व्हॅल्यूज समांतर बदलाव्या लागतात; HSL मध्ये एकच पॅरामीटर (लाइटनेस) बदलून संपूर्ण स्पेक्ट्रम मिळवता येतो.
RGB ते HSL रूपांतरणाची गणिते
हे रूपांतरण समजून घेण्यासाठी थोडी गणिते आवश्यक आहेत. प्रथम RGB मूल्ये (R, G, B) ०–२५५ वरून ० ते १ च्या श्रेणीत सामान्य केली जातात (प्रत्येकाला २५५ ने भागून). नंतर त्यापैकी कमाल (max) आणि किमान (min) मूल्ये शोधली जातात. उदाहरणार्थ, R=79, G=70, B=229 साठी:
- सामान्य: r=0.3098, g=0.2745, b=0.8980
- max = 0.8980 (निळा), min = 0.2745 (हिरवा)
- फरक (delta) = max - min = 0.6235
लाइटनेस (L): L = (max + min) / 2 = (0.8980 + 0.2745) / 2 = 0.5863 → ५८.६%
सॅच्युरेशन (S): जर delta = 0 असेल तर S = 0. नसल्यास, एक सूत्र वापरले जाते. L 0.5 पेक्षा कमी असल्यास S = delta / (max + min); पेक्षा जास्त असल्यास S = delta / (2 - max - min). येथे L=0.5863>0.5, म्हणून S = 0.6235 / (2 - 0.8980 - 0.2745) = 0.6235 / 0.8275 = 0.7534 → ७५.३%.
ह्यू (H): max कोणता रंग आहे त्यावरून ह्यू काढला जातो. येथे max = B (निळा), म्हणून सूत्र: H = 240 + ( (R - G) / (max - min) ) * 60. म्हणजे 240 + ((0.3098 - 0.2745)/0.6235)*60 = 240 + (0.0353/0.6235)*60 = 240 + 3.40 ≈ 243.4°. अशाप्रकारे HSL मिळते.
हे रूपांतरण प्रमाणित गणितीय पद्धत वापरते; बहुतेक सॉफ्टवेअर आणि CSS मध्ये हीच पद्धत अंमलात आणली जाते.
HSL चा वापर वेब डिझाइन आणि सुलभतेसाठी
CSS मध्ये hsl() फंक्शन मूळतः समर्थित आहे. उदाहरणार्थ:
background-color: hsl(243, 75%, 59%);
हे RGB तुल्य rgb(79, 70, 229) सारखेच दिसते. HSL चा एक मोठा फायदा म्हणजे अल्फा चॅनेल hsla() द्वारे वापरता येतो.
सुलभतेसाठी (Accessibility): WCAG कॉन्ट्रास्ट गुणोत्तर साध्य करण्यासाठी लाइटनेस समायोजित करणे खूप सोपे आहे. समजा तुमचा ब्रँड कलर hsl(200, 70%, 40%) आहे (गडद निळा). पांढऱ्या पार्श्वभूमीवर हा रंग पुरेसा कॉन्ट्रास्ट देत नसेल तर तुम्ही फक्त लाइटनेस ४०% वरून ३०% पर्यंत कमी करू शकता. ह्यू आणि सॅच्युरेशन बदलत नाहीत, त्यामुळे ब्रँड ओळख टिकून राहते.
या दृष्टिकोनातून रंग पॅलेट जनरेट करणे सरळ होते. उदाहरणार्थ, ब्रँड कलरची खालील शेड्स तयार करता येतात:
- हलका:
hsl(200, 70%, 60%) - मध्यम:
hsl(200, 70%, 40%) - गडद:
hsl(200, 70%, 20%)
हे सर्व रंग समान ह्यूवर आधारित असल्याने ते चांगले सुसंगत दिसतात.
मर्यादा आणि वैकल्पिक मॉडेल्स
HSL हे अत्यंत उपयुक्त आहे, पण ते पूर्णपणे समान रीतीने नाही. म्हणजे समान लाइटनेस (उदा. ५०%) असलेले पिवळे आणि निळे रंग खूप वेगळे दिसू शकतात. पिवळा तुलनेने उजळ दिसतो तर निळा गडद. याचे कारण म्हणजे HSL हे मानवी दृष्टीच्या प्रतिसाद वक्रांवर आधारित नाही. त्यासाठी LAB (CIE Lab) किंवा LCH सारखी मॉडेल्स अधिक योग्य आहेत. LAB मॉडेल प्रकाशमानता (L) आणि रंग अक्ष (a आणि b) वापरते, जे मानवी डोळ्यांच्या संवेदनशीलतेशी अधिक जुळते. पण हे मॉडेल RGB पेक्षा वेगळी गॅमट (gamut) वापरते, म्हणून काही LAB रंग RGB डिस्प्लेवर दाखवता येत नाहीत. तेव्हाच पृष्ठ ते जवळच्या प्रदर्शित होणाऱ्या रंगात समायोजित करते.
दुसरी महत्त्वाची मर्यादा: CMYK हे फक्त अंदाजे आहे. स्क्रीनवर दिसणारा रंग आणि प्रिंटमध्ये येणारा रंग यात फरक असू शकतो. CMYK मध्ये व्यावसायिक कामासाठी प्रिंट प्रूफ घेणे आवश्यक आहे.
तरीही, वेब डिझाइन आणि थीमिंग सारख्या कामांसाठी HSL हे अतिशय व्यावहारिक आहे. याचे साधे स्वरूप म्हणून संगणकीय पडद्यासाठीच्या कामात ते पुरेसे अचूक आहे.
वारंवार विचारले जाणारे प्रश्न (FAQ)
प्रश्न १: RGB मूल्ये कशी टाकायची?
तीन संख्या ० ते २५५ दरम्यान, स्वल्पविराम किंवा जागा वापरून टाका. उदा. 79, 70, 229 किंवा 79 70 229.
प्रश्न २: HSL मध्ये ह्यू ३६० पेक्षा जास्त किंवा कमी दिला तर काय होते?
पृष्ठ त्रुटी संदेश देते: “Enter HSL as hue 0–360 with two percentages.” फक्त ०–३६० स्वीकारले जाते.
प्रश्न ३: CMYK आउटपुट प्रिंटसाठी वापरता येईल का?
नाही. हा फक्त स्क्रीन अंदाज आहे. अचूक मुद्रणासाठी प्रिंटर प्रोफाइल वापरून रूपांतर करावे.
प्रश्न ४: LAB मध्ये रंग टाकला तर तो RGB मध्ये बसत नसेल तर काय होते?
पृष्ठ ते सर्वात जवळच्या प्रदर्शित होणाऱ्या RGB रंगात समायोजित करते. तो रंग परत LAB मध्ये रूपांतरित केल्यास मूळ मूल्य किंचित बदलू शकते.
प्रश्न ५: हे ऑनलाइन टूल डेटा अपलोड करते का?
नाही. सर्व रूपांतरणे तुमच्या ब्राउझरमध्येच होतात. काहीही सर्व्हरवर पाठवले जात नाही.
प्रश्न ६: HEX मूल्य कसे कॉपी करावे?
पृष्ठावर HEX फील्डमध्ये # सहित व्हॅल्यू दिसते. ती निवडून कॉपी करता येते. कोणतेही फील्ड कॉपी करण्यासाठी ते सेलेक्ट करून Ctrl+C दाबा.