HEX ते HSL कन्व्हर्टर

हेक्स ते एचएसएल रूपांतरण: का आणि कसे?

हे पेज तुम्हाला कोणतेही वैध हेक्स रंग संकेत – पूर्ण सहा अंकी #1E90FF किंवा तीन अंकी शॉर्टहँड #abc – प्रविष्ट केल्यावर त्वरित समतुल्य एचएसएल मूल्य देते. ह्यू अंशात (0–360), संपृक्तता आणि हलकीपणा टक्केवारीत (0–100%) मोजला जातो. एचएसएल रचना मानवी तर्कासाठी बनवलेली आहे – तुम्ही त्याच ह्यूवर राहून हलकीपणा किंवा संपृक्तता सहज बदलू शकता. त्याच वेळी पेज रंगाचे इतर सर्व समर्थित स्वरूप (HEX, RGB, HSV, CMYK, LAB) देखील प्रदर्शित करते, जेणेकरून तुम्हाला ज्या स्वरूपाची गरज आहे ते कॉपी करू शकता.

हे पेज केवळ एक कन्व्हर्टर नाही तर रंगांची भाषा समजून घेण्यासाठी एक साधन आहे. पुढील विभागांमध्ये आपण हे पेज वेगळे काय करते, त्याचे इनपुट-आउटपुट नियम, आणि मूलभूत गणित याबद्दल तपशीलवार पाहू.

या पेजचे वैशिष्ट्य काय?

बहुतेक कलर कन्व्हर्टर्स फक्त संख्या बदलतात, पण हे पेज HEX आणि HSL यांच्यातील मूलभूत फरकावर भर देते.

• HEX ही एक कच्ची RGB नोटेशन आहे. सहा हेक्साडेसिमल अंक (किंवा तीन अंकी शॉर्टहँड) थेट लाल, हिरवा आणि निळा मूल्ये एन्कोड करतात. CSS आणि डिझाइन टूल्समध्ये हे संक्षिप्त आणि मोठ्या प्रमाणात वापरले जाते, पण मानवी आकलनासाठी ते सहज नाही. उदाहरणार्थ, #4f46e5 पाहून तो निळसर आहे हे समजते पण त्याचा ह्यू किती अंश आहे हे सांगणे कठीण.
• HSL मानवी तर्कासाठी बांधले आहे. ह्यू अंशात मोजला जातो (रंगचक्रावर 0=लाल, 120=हिरवा, 240=निळा). संपृक्तता ही रंगाची तीव्रता दर्शवते (0% = राखाडी, 100% = पूर्ण रंग). हलकीपणा हा काळ्या (0%) पासून पांढऱ्या (100%) पर्यंतची चमक दर्शवतो. फक्त हलकीपणा बदलल्यास ह्यू अपरिवर्तित राहतो, ज्यामुळे रंग पॅलेट्स आणि थीम सिस्टीम तयार करण्यासाठी HSL हे आदर्श स्वरूप आहे.
• अल्फा चॅनेल नाही. मानक HEX (सहा अंकी किंवा तीन अंकी) मध्ये पारदर्शकतेची माहिती नसते. HSL मध्ये देखील अल्फा घटक नसतो. यामुळे रूपांतरण नेहमी पूर्ण अपारदर्शक रंगाशी संबंधित असते.
• ब्राउझरमध्ये सर्व गणित होते. तुम्ही टाइप केलेले काहीही अपलोड किंवा साठवले जात नाही. सर्व आकडेमोड तुमच्याच ब्राउझरमध्ये होते.

हे वैशिष्ट्य या पेजचा उद्देश स्पष्ट करते: HEX ची गणितीय संक्षिप्तता आणि HSL ची मानवी सुलभता यांच्यातील पूल बनणे.

इनपुट, आउटपुट आणि त्रुटी व्यवस्थापन

इनपुट – एक वैध हेक्स रंग संकेत. दोन स्वरूप मान्य:

1. सहा अंकी: #4f46e5 किंवा 4f46e5 (अग्रगण्य # पर्यायी).
2. तीन अंकी शॉर्टहँड: #abc किंवा abc. प्रत्येक अंक दुप्पट केला जातो, म्हणजे #abc हे #aabbcc प्रमाणे काम करते.

आउटपुट – खालील सर्व स्वरूप एकाच वेळी अपडेट होतात:

• HEX (सहा अंकी)
• RGB (r, g, b 0–255)
• HSV (ह्यू 0–360, संपृक्तता 0–100%, मूल्य 0–100%)
• HSL (ह्यू 0–360, संपृक्तता 0–100%, हलकीपणा 0–100%)
• CMYK (सायन, मॅजेंटा, पिवळा, काळा 0–100%)
• LAB (L 0–100, a आणि b चे मूल्य)

त्रुटी नियम – अवैध इनपुट दिल्यास संदेश दिसतो: “Enter a hex color like #4f46e5 or #abc.” फक्त हेच दोन स्वरूप स्वीकारले जातात. उदाहरणार्थ, #GGG, 12345, किंवा #12 हे त्रुटी देतील.

एज केस – जर तुम्ही दुसऱ्या रंगस्पेसमध्ये (उदा. LAB किंवा CMYK) असे मूल्य टाकले जे दृश्य RGB गॅमटच्या बाहेर असेल, तर तो रंग जवळच्या प्रदर्शनीय रंगात समायोजित केला जातो. त्यानंतर तो रंग परत HEX मध्ये रूपांतरित केल्यास किंचित बदल होऊ शकतो. तसेच, CMYK मूल्ये ही स्क्रीन अंदाज आहेत – व्यावसायिक मुद्रणासाठी कॅलिब्रेशनशिवाय वापरू नयेत, असा सल्ला दिला जातो.

हेक्स कलर कोड: बेस-१६ मधील RGB

HEX नोटेशन ही लाल, हिरवा आणि निळा घटक बेस-१६ (हेक्साडेसिमल) मध्ये दर्शवते. प्रत्येक घटक ० ते २५५ पर्यंत असतो, जो हेक्समध्ये ०० ते एफएफ असा लिहिला जातो.

• सहा अंकी स्वरूप: #RRGGBB. उदाहरणार्थ, #FF0000 = लाल (R=255, G=0, B=0). #1E90FF म्हणजे R=30, G=144, B=255 (डॉजर निळा).
• तीन अंकी शॉर्टहँड: #RGB. प्रत्येक अंक दुप्पट केला जातो. #abc = #aabbcc. उदाहरणार्थ, #f00 = #ff0000 = लाल. हे स्वरूप फक्त तेव्हा वापरता येते जेव्हा प्रत्येक घटकाचे दोन्ही अंक सारखे असतात (उदा. #aabbcc ऐवजी #abc). #1E90FF सारखे कोड तीन अंकी लिहिता येत नाही कारण 1E दुप्पट करता येत नाही.

हेक्स कोड थेट RGB मधून मिळवले जातात. म्हणूनच हेक्स आणि RGB मध्ये रूपांतरण सोपे आहे: फक्त प्रत्येक दोन अंक दशांश मध्ये बदला. पण मानवी मेंदूसाठी #4f46e5 (R=79, G=70, B=229) – याचा अर्थ “हलका निळसर जांभळा” हे लगेच कळत नाही. येथेच HSL उपयोगी पडते.

HSL ची रचना आणि मानवी समज

HSL मध्ये तीन परिमाण आहेत:

1. ह्यू (Hue) – 0–360 अंश. 0/360 = लाल, 120 = हिरवा, 240 = निळा. हे रंगचक्रावरील एक विशिष्ट स्थान दर्शवते.
2. संपृक्तता (Saturation) – 0–100%. 0% = राखाडी (रंगहीन), 100% = पूर्ण तीव्र रंग.
3. हलकीपणा (Lightness) – 0–100%. 0% = काळा, 100% = पांढरा, 50% = शुद्ध रंग (जास्त गडद नाही, जास्त फिका नाही).

मानवी डोळा रंगाला ह्यू, संपृक्तता आणि तेजानुसार समजतो. म्हणूनच डिझायनर आणि फ्रंट-एंड डेव्हलपर HSL वापरून पॅलेट तयार करतात. उदाहरणार्थ, एका ब्रँडचा मुख्य रंग #4f46e5 (HSL: ह्यू ~245°, संपृक्तता 78%, हलकीपणा 53%) असेल. त्याच्यापासून हलकी आवृत्ती (होवर स्टेट) तयार करायची असेल तर फक्त हलकीपणा 70% पर्यंत वाढवा – ह्यू आणि संपृक्तता समान ठेवा. हे HEX मध्ये करायला गणितीय तुलना लागते.

HSL विरुद्ध HSV – दोन्हीमध्ये ह्यू सारखा आहे, पण S (सॅच्युरेशन) आणि V (व्हॅल्यू) / L (लाइटनेस) वेगळे आहेत. HSV मध्ये V म्हणजे रंगाची कमाल चमक; HSL मध्ये L म्हणजे काळा-पांढरा मिश्रण. उदाहरणार्थ, पिवळ्या रंगाचा (ह्यू 60°) HSV मध्ये V=100% असतो, पण HSL मध्ये L=50% असतो. त्यामुळे कन्व्हर्ट करताना काळजी घेणे आवश्यक आहे.

गणितीय रूपांतरण: RGB ते HSL

हे पेज दिलेले HEX प्रथम RGB मध्ये रूपांतरित करते. नंतर मानक सूत्र वापरून HSL काढले जाते. हे सूत्र खालीलप्रमाणे आहे (सोप्या शब्दात):

• R, G, B मूल्ये 0–1 मध्ये सामान्य करा (255 ने भागा).
• कमाल (max) आणि किमान (min) शोधा.
• हलकीपणा (L) = (max + min) / 2.
• जर max = min असेल तर रंग राखाडी आहे – संपृक्तता (S) = 0 आणि ह्यू अपरिभाषित.
• नसल्यास:
  • S = (max - min) / (1 - |2L - 1|)
  • H खालीलप्रमाणे काढा:
    • जर max = R: H = (G - B)/(max - min) mod 6
    • जर max = G: H = 2 + (B - R)/(max - min)
    • जर max = B: H = 4 + (R - G)/(max - min)
  • नंतर H 60° ने गुणा करून 0–360 मध्ये आणा.

हे सूत्र वेबवर सर्वत्र वापरले जाते आणि CSS मध्ये hsl() फंक्शन सारखेच आहे. पेज ही गणिते ब्राउझरमध्ये JavaScript वापरून करते.

विविध वापरकर्ते आणि उपयोग

• फ्रंट-एंड डेव्हलपर – डिझाइन मॉकअपमधील HEX रंग HSL मध्ये रूपांतरित करा, जेणेकरून CSS कस्टम प्रॉपर्टीजमध्ये (उदा. --color-primary-h: 245; --color-primary-s: 78%; --color-primary-l: 53%;) होवर, डार्क/लाईट थीम सहज बनवता येईल.
• UI/UX डिझायनर – ह्यू, संपृक्तता, हलकीपणा या संकल्पना वापरतात. दिलेला HEX रंग थेट HSL मध्ये बदलून ते पॅलेट तयार करू शकतात.
• रंग पॅलेट बिल्डर – HSL मध्ये संपूरक, एनालोगस, मोनोक्रोमॅटिक स्कीम सोप्या आहेत. फक्त ह्यूमध्ये 30° किंवा 60° बदल करा.
• वेब ऍक्सेसिबिलिटी ऑडिटर – WCAG कॉन्ट्रास्ट रेशो तपासण्यासाठी HSL वापरणे सोपे आहे. रंगाचे गडद/फिके प्रकार तयार करून आवश्यक कॉन्ट्रास्ट राखता येतो.

सामान्य प्रश्न (FAQ)

प्रश्न १: तीन अंकी हेक्स कसे कार्य करते, उदा. #abc?
उत्तर: #abc म्हणजे #aabbcc. प्रत्येक अंक दुप्पट केला जातो. म्हणून #fff = पांढरा, #000 = काळा. तीन अंकी स्वरूप फक्त तेव्हा वापरले जाते जेव्हा प्रत्येक घटकाचे दोन्ही अंक सारखे असतात.

प्रश्न २: HSL आणि HSV मध्ये काय फरक आहे?
उत्तर: दोन्हीमध्ये ह्यू समान आहे, पण S आणि V/L वेगळे आहेत. HSV मध्ये V (व्हॅल्यू) म्हणजे रंगाची कमाल चमक; HSL मध्ये L (लाइटनेस) म्हणजे काळ्या आणि पांढऱ्याचे मिश्रण. उदा. पिवळ्या रंगाचा HSV: H=60°, S=100%, V=100%; HSL: H=60°, S=100%, L=50%. पेज दोन्ही स्वरूप प्रदर्शित करते.

प्रश्न ३: CMYK मूल्ये प्रिंटिंगसाठी वापरता येतील का?
उत्तर: नाही. पेजवर दर्शवलेली CMYK मूल्ये ही स्क्रीन अंदाज आहेत. व्यावसायिक मुद्रणासाठी योग्य कॅलिब्रेशन आणि प्रोफाइल आवश्यक आहे. ती केवळ संदर्भासाठी आहेत.

प्रश्न ४: हेक्समध्ये अल्फा चॅनेल का नाही?
उत्तर: हे पेज फक्त सहा अंकी किंवा तीन अंकी हेक्स स्वीकारते, ज्यात अल्फा नसतो. आठ अंकी हेक्स (उदा. #RRGGBBAA) साठी स्वतंत्र पेज आहे. HSL देखील अल्फा सपोर्ट करत नाही, म्हणून रूपांतरण नेहमी अपारदर्शक रंगावर होते.

प्रश्न ५: आउट-ऑफ-गॅमट रंग कसे हाताळले जातात?
उत्तर: जर दुसऱ्या रंगस्पेसमध्ये (जसे LAB किंवा CMYK) टाकलेले मूल्य दृश्य CMYK किंवा RGB श्रेणीबाहेर असेल, तर ते जवळच्या प्रदर्शनीय मूल्यात समायोजित केले जाते. यामुळे HEX मध्ये परत आल्यावर किंचित फरक येऊ शकतो. ही एक सामान्य मर्यादा आहे.

प्रश्न ६: रूपांतरण सर्व ब्राउझरमध्ये सारखे असते का?
उत्तर: हो. हे पेज मानक JavaScript अल्गोरिदम वापरते जे सर्व आधुनिक ब्राउझरमध्ये सारखे परिणाम देते. CSS मध्ये hsl() फंक्शन देखील तेच गणित वापरते.

निष्कर्ष

हे पेज HEX आणि HSL यांच्यातील गणितीय आणि मानवी पूल आहे. हे फक्त एक कन्व्हर्टर नसून रंग समजून घेण्याचे साधन आहे – तुमच्यासाठी नेहमीच सर्व स्वरूप एकत्रितपणे उपलब्ध करून देते. तुम्ही कोणतेही वैध हेक्स संकेत प्रविष्ट करून त्याचे HSL मध्ये रूपांतरण ताबडतोब पाहू शकता, आणि त्याद्वारे पॅलेट तयार करणे, थीम बनवणे, किंवा ऍक्सेसिबिलिटी तपासणे सोपे होते.