एचएसएल ते हेक्स रूपांतरण पृष्ठ
हे पृष्ठ तुम्ही एक एचएसएल रंग (ह्यू अंशात, सॅच्युरेशन टक्केवारीत, लाइटनेस टक्केवारीत) टाकल्यास लगेच समतुल्य हेक्साडेसिमल (HEX) रंग कोड दाखवते. हेक्स कोड हा सहा अंकी (किंवा तीन अंकी शॉर्टहँड) नोटेशन आहे जो CSS आणि डिझाइन साधनांमध्ये सर्वत्र वापरला जातो, उदा. #1E90FF. तुम्ही टाइप करता किंवा रंग निवडता तसा HEX व्हॅल्यू त्वरित अपडेट होतो.
हे पृष्ठ इतरांपेक्षा वेगळे का?
हे पृष्ठ विशेषतः HSL‑to‑HEX रूपांतरणासाठी समर्पित आहे. HSL हा एक रंग मॉडेल आहे जो मानवी विचारसरणीनुसार डिझाइन केला गेला आहे – फक्त लाइटनेस बदलल्यास ह्यू अबाधित राहतो, म्हणूनच तो पॅलेट आणि थीम निर्मितीसाठी वापरला जातो. HEX, दुसरीकडे, सहा अंकी (किंवा तीन अंकी शॉर्टहँड) RGB नोटेशन आहे; जोपर्यंत आठ अंकी फॉर्म वापरला जात नाही तोपर्यंत त्यात अल्फा नसतो. हे रूपांतरण sRGB गॅमटमध्ये थेट आणि अपूर्वनीय आहे, LAB किंवा CMYK सारख्या रूपांतरणांप्रमाणे नाही जे गॅमटबाहेरील रंग समायोजित करू शकतात.
निविष्टी आणि निर्गम
निविष्टी: वापरकर्ता 0 ते 360 दरम्यान एक ह्यू व्हॅल्यू, 0–100% दरम्यान सॅच्युरेशन टक्केवारी, आणि 0–100% दरम्यान लाइटनेस टक्केवारी पुरवतो. उदाहरण: 243, 75%, 59%.
निर्गम: प्राथमिक निर्गम एक HEX रंग कोड आहे (उदा. #4f46e5). जर रंगाचे RGB चॅनेल प्रत्येकी एका हेक्स डिजिटने दर्शवता येत असतील, तर साधन तीन अंकी शॉर्टहँड फॉर्म (उदा. #abc) देखील दाखवू शकते. तसेच सर्व इतर रंग फील्ड (RGB, HSV, CMYK, LAB) एकाच वेळी अपडेट होतात.
| इनपुट फील्ड | वैध श्रेणी | उदाहरण |
|---|---|---|
| ह्यू (H) | 0–360 | 243 |
| सॅच्युरेशन (S) | 0–100% | 75% |
| लाइटनेस (L) | 0–100% | 59% |
हेक्स आउटपुट मध्ये # नंतर सहा हेक्साडेसिमल अंक असतात (0–9, A–F). शॉर्टहँड फॉर्म फक्त तेव्हाच दाखवला जातो जेव्हा प्रत्येक RGB चॅनेलचे दोन अंक सारखे असतात (जसे #aabbcc → #abc). हे केस‑इन्सेन्सिटिव्ह असते – #4f46e5 आणि #4F46E5 समान मानले जातात.
नियम आणि कडा प्रकरणे
- कोणतेही फील्ड संपादित केल्यास लगेच इतर सर्व फील्ड अपडेट होतात.
- जर HSL व्हॅल्यू वैध श्रेणीबाहेर असतील (ह्यू 0–360, सॅच्युरेशन 0–100%, लाइटनेस 0–100%) किंवा योग्य स्वरूपात नसतील, तर साधन खालील त्रुटी संदेश दाखवते:
“Enter HSL as hue 0–360 with two percentages, like 243, 75%, 59%.” (हा संदेश इंग्रजीतच आहे कारण तो साधनाचा भाग आहे.) - HSL‑to‑HEX रूपांतरण नेहमी दृश्य RGB श्रेणीतच राहते; या रूपांतरणासाठी गॅमटबाहेरील समायोजन होत नाही.
- सोबत दाखवलेले CMYK आउटपुट हे स्क्रीनवरील अंदाज आहे आणि ते व्यावसायिक मुद्रण मूल्यांपेक्षा वेगळे असू शकते.
- सर्व प्रक्रिया थेट तुमच्या ब्राउझरमध्ये होते; तुम्ही टाकलेली कोणतीही माहिती अपलोड होत नाही.
सामान्य चुका:
%चिन्ह न लावता केवळ संख्या टाकणे (उदा.50ऐवजी50%).- ह्यू 360 पेक्षा जास्त किंवा 0 पेक्षा कमी टाकणे.
- स्वल्पविराम ऐवजी कोलन किंवा अन्य विभाजक वापरणे.
याची कोणाला गरज आहे?
- डिझाइनर जे HSL मध्ये रंग पॅलेट तयार करतात आणि कोड किंवा डिझाइन साधनांमध्ये अंमलबजावणीसाठी HEX कोडची आवश्यकता असते.
- फ्रंट‑एंड डेव्हलपर ज्यांना डिझाइन फाईल्स (उदा. Figma, Sketch) मधून HSL व्हॅल्यू मिळतात आणि त्यांना CSS HEX गुणधर्मात रूपांतरित करावे लागते.
- कोणीही थीम समायोजित करत असेल किंवा HSL मध्ये लाइटनेस बदलून प्रवेशयोग्यता कॉन्ट्रास्ट गुणोत्तर लागू करत असेल, नंतर परिणामी रंग उत्पादनासाठी HEX मध्ये रूपांतरित करत असेल.
उदाहरणार्थ, WCAG 2.1 नुसार सामान्य मजकुरासाठी किमान 4.5:1 कॉन्ट्रास्ट गुणोत्तर आवश्यक आहे. HSL मध्ये लाइटनेस बदलून तुम्ही ह्यू न बदलता कॉन्ट्रास्ट साध्य करू शकता, आणि नंतर हे पृष्ठ तुम्हाला लगेच HEX कोड देते.
HSL मॉडेल, HEX रचना आणि मॅन्युअल रूपांतरण
एचएसएल मॉडेल समजून घेणे
HSL म्हणजे Hue (ह्यू – रंगाचा प्रकार), Saturation (सॅच्युरेशन – रंगाची शुद्धता), Lightness (लाइटनेस – रंगाची चमक). हे मानवी डोळ्याला कसे समजते याच्या जवळचे आहे. ह्यू 0° (लाल) पासून 360° (पुन्हा लाल) पर्यंत असतो. सॅच्युरेशन 0% (राखाडी) ते 100% (पूर्ण रंग) पर्यंत असते. लाइटनेस 0% (काळा) ते 100% (पांढरा) पर्यंत असते; 50% हा "शुद्ध" रंग असतो.
HEX कोडची रचना
HEX रंग कोड हा # ने सुरू होतो आणि त्यात सहा हेक्साडेसिमल अंक असतात: प्रथम दोन लाल (R), पुढचे दोन हिरवे (G), शेवटचे दोन निळे (B). प्रत्येक जोडी 00 (0) ते FF (255) पर्यंत मूल्य दर्शवते. तीन अंकी शॉर्टहँड (जसे #abc) हा #aabbcc साठी संक्षिप्त फॉर्म आहे, जिथे प्रत्येक चॅनेलचे दोन अंक सारखे असतात.
मॅन्युअल रूपांतरण गणित
HSL‑to‑HEX रूपांतरणासाठी प्रथम HSL चे RGB मध्ये रूपांतरण करावे लागते, नंतर RGB चे HEX मध्ये. येथे एक सरलीकृत प्रक्रिया आहे:
- H → R, G, B: जर S = 0 असेल तर रंग राखाडी आहे: R = G = B = L (टक्केवारी). अन्यथा:
- C = (1 – |2L – 1|) × S (टक्के म्हणून)
- X = C × (1 – |(H/60) mod 2 – 1|)
- m = L – C/2
- ह्यू H नुसार R, G, B साठी C, X, 0 योग्य क्रमाने निवडा.
- R' = (R + m), G' = (G + m), B' = (B + m) → 0–1 श्रेणीत.
- RGB → HEX: प्रत्येक R', G', B' ला 0–255 श्रेणीत रूपांतरित करा (255 ने गुणा, गोल करा). नंतर प्रत्येकास दोन हेक्स अंकात रूपांतरित करा (उदा. 79 →
4F). तीन जोड्या एकत्र करून#जोडा.
हे पृष्ठ हे सर्व गणित पार्श्वभूमीवर करते, परंतु शैक्षणिक हेतूंसाठी हे समजून घेणे उपयुक्त आहे.
सामान्य अडचणी
- टक्केवारी चिन्ह: S आणि L नेहमी
%सह लिहा.243, 75, 59असे लिहिल्यास त्रुटी येईल. - ह्यू श्रेणी: ह्यू 0–360 च्या बाहेर असल्यास (उदा. 400) साधन त्रुटी दाखवते.
- दशांश स्थाने: HSL मध्ये दशांश वापरता येतो (उदा.
243.5, 75%, 59%), पण HEX नेहमी पूर्णांक RGB वर आधारित असल्याने ते गोल होते.
वारंवार विचारले जाणारे प्रश्न
प्रश्न १: मी कोणतेही तीन अंकी HEX कधी पाहू शकतो?
उत्तर: तेव्हाच जेव्हा तुमच्या रंगाचे प्रत्येक RGB चॅनेल समान जोडीचे अंक असते, म्हणजे #ff00ff → #f0f होते. तुमचे HSL व्हॅल्यू या स्थितीला पूर्ण करत असल्यासच शॉर्टहँड दाखवले जाईल.
प्रश्न २: हे रूपांतरण CMYK प्रमाणे गॅमट क्लिपिंग करते का? उत्तर: नाही. HSL‑to‑HEX रूपांतरण sRGB गॅमटमध्ये कार्य करते, आणि कोणतेही क्लिपिंग किंवा बाहेरील रंग समायोजन होत नाही. सर्व HSL व्हॅल्यू थेट RGB मध्ये मॅप होतात.
प्रश्न ३: मी ह्यू, सॅच्युरेशन किंवा लाइटनेससाठी % चिन्ह वापरले नाही तर काय होईल?
उत्तर: साधन त्रुटी संदेश दाखवेल: “Enter HSL as hue 0–360 with two percentages, like 243, 75%, 59%.” तुम्ही % तंतोतंत लिहावेत.
प्रश्न ४: हे पृष्ठ माझे इनपुट सर्व्हरवर पाठवते का? उत्तर: नाही. सर्व गणना तुमच्या ब्राउझरमध्येच होते. कोणतीही माहिती इंटरनेटवर पाठवली जात नाही.
प्रश्न ५: मला ८ अंकी HEX (जसे #4f46e580) हवे आहे, पण पृष्ठ फक्त ६ अंकी दाखवते. का?
उत्तर: हे पृष्ठ फक्त HSL‑to‑HEX रूपांतरण करते, जे सहा अंकी HEX देते. HEX मध्ये अल्फा (पारदर्शकता) समाविष्ट करण्यासाठी आठ अंकी फॉर्म आवश्यक आहे, पण HSL मध्ये अल्फा नसतो. तुम्हाला आठ अंकी HEX हवे असल्यास, तुम्हाला स्वतंत्र अल्फा व्हॅल्यू जोडावा लागेल.
प्रश्न ६: मी 243, 75%, 59% टाकले आणि HEX #4f46e5 मिळाले. हे बरोबर आहे का?
उत्तर: होय. हे एक वैध एचएसएल रूपांतरण आहे. तुम्ही ते इतर रंग साधनांशी तुलना करून पडताळू शकता. हे पृष्ठ इतर फील्ड (RGB, HSV, CMYK, LAB) देखील अपडेट करेल जेणेकरून तुम्ही सर्व परस्पर संबंध पाहू शकाल.