HEX चे HSL मध्ये रूपांतर Hexadecimal ↔ Hue Saturation Lightness मोफत ऑनलाइन सुरक्षित

तुम्ही HEX ला HSL मध्ये रूपांतरित का करता

#5A4632 सारखा हेक्स कोड रंग साठवण्याचा चांगला मार्ग आहे आणि रंगाबद्दल विचार करण्याचा वाईट मार्ग. अंकांमधून तुम्हाला कळत नाही की रंग तपकिरी आहे, तो किती तेजस्वी आहे किंवा थोडी फिकट आवृत्ती कशी दिसेल. HSL हे दुरुस्त करण्यासाठी शोधले गेले. ते रंगाचे वर्णन लोक ज्या पद्धतीने त्याबद्दल बोलतात त्याप्रमाणे करते: कोणती छटा आहे, किती ठळक आहे आणि किती हलका आहे. HEX ला HSL मध्ये रूपांतरित करणे म्हणजे डिझाइन साधन तुम्हाला देते त्या रूपातील रंग तुम्ही विचार करू शकता अशा रूपात भाषांतरित करणे: hsl(30, 29%, 28%) हा गडद, मंद नारिंगी-तपकिरी आहे, आणि शेवटचा आकडा वाढवल्यास तो फिकट होईल हे तुम्हाला लगेच दिसते.

डिझायनर आणि फ्रंट-एंड डेव्हलपर रूपांतरण वापरतात यामागचे हेच खरे कारण आहे. त्यांच्याकडे हेक्समध्ये ब्रँड रंग असतो आणि संबंधित रंगांचे कुटुंब हवे असते: होवर स्थितीसाठी हलका, दाबलेल्या बटणासाठी गडद, पार्श्वभूमीच्या छटेसाठी खूप फिकट, निष्क्रिय नियंत्रणासाठी कमी संपृक्त. हेक्समध्ये यापैकी प्रत्येक म्हणजे अंकांच्या तीन जोड्यांचा नवा शोध. HSL मध्ये प्रत्येक म्हणजे एका संख्येतील बदल. रंग तोच आहे, अधिक उपयुक्त भिंगातून पाहिलेला.

हे पान तुमच्या ब्राउझरमध्ये रूपांतरित करते, आणि काहीही अपलोड केले जात नाही. खाली तुम्हाला HSL च्या तीन संख्या हेक्स अंकांवरून कशा काढल्या जातात, रूपांतरण काय जपते आणि कुठे पूर्णांकित करते, छटा, संपृक्तता आणि तेजस्विता प्रत्यक्षात काय सांगतात, डिझायनर पॅलेट आणि स्थिती बनवण्यासाठी HSL कसे वापरतात, आणि पहिल्यांदा HEX ला HSL मध्ये रूपांतरित करणाऱ्यांना अडकवणारे सापळे सापडतील.

HSL काय वर्णन करते

छटा: रंगचक्रावरील स्थान

छटा म्हणजे रंगचक्राभोवतीचा 0 ते 360 अंशांचा कोन. लाल 0 वर आहे, पिवळा 60 वर, हिरवा 120 वर, सायन 180 वर, निळा 240 वर आणि मॅजेंटा 300 वर; 360 वर तुम्ही पुन्हा लालावर येता. 30 ची छटा लाल आणि पिवळ्याच्या मध्ये आहे, जी नारिंगी आहे. संख्या तुम्ही कोणत्या रंग कुटुंबात आहात ते सांगते, आणि तो किती तेजस्वी किंवा फिकट आहे याबद्दल काहीही नाही.

संपृक्तता: किती ठळक

संपृक्तता ही टक्केवारी आहे. 100% वर रंग छटा परवानगी देते तितका शुद्ध असतो; 0% वर त्याचा सर्व रंग गेलेला असतो आणि तो राखाडी असतो. आमच्या उदाहरणातील तपकिरीसारखी 29% संपृक्तता म्हणजे मंद, मातीचा रंग. संपृक्तता कमी करणे हा गोंगाटी रंगाचे स्वरूप न बदलता त्याला शांत करण्याचा सर्वात जलद मार्ग आहे.

तेजस्विता: किती फिकट किंवा गडद

तेजस्विताही टक्केवारी आहे. 0% वर छटा आणि संपृक्तता काहीही असो रंग काळा असतो; 100% वर तो पांढरा असतो; 50% वर तो पूर्ण, नेहमीचा रंग असतो. आमचे तपकिरी 28% वर गडद बाजूला आहे. संख्या वाढवल्यास तोच रंग फिकट मिळतो, आणि कमी केल्यास गडद, जो बदल डिझायनरना सर्वात जास्त वेळा हवा असतो.

हे हेक्सपेक्षा सोपे का आहे

हेक्समध्ये रंग फिकट करणे म्हणजे छटा सरकू नये म्हणून तिन्ही जोड्या वेगवेगळ्या प्रमाणात वाढवणे, जे डोळ्यांनी करणे जवळजवळ अशक्य आहे. HSL मध्ये त्याचा अर्थ एक आकडा बदलणे आणि इतर दोन तसेच ठेवणे.

रूपांतरण कसे चालते

तीन बाइट्सपासून एक कोन आणि दोन टक्केवारीपर्यंत

कन्व्हर्टर आधी हेक्स अंक लाल, हिरवा आणि निळा मूल्ये म्हणून वाचतो, प्रत्येक 0 ते 255, आणि त्यांना 0 आणि 1 दरम्यान मोजतो. तो तिघांपैकी सर्वात मोठे आणि सर्वात लहान शोधतो. तेजस्विता म्हणजे दोघांची सरासरी. संपृक्तता ते एकमेकांपासून किती दूर आहेत यावर, तेजस्वितेच्या सापेक्ष, अवलंबून असते. छटा कोणती वाहिनी सर्वात मोठी आहे आणि इतर दोन कशी तुलना करतात यावर अवलंबून असते. तिन्ही समान असतील, तर रंग राखाडी असतो, संपृक्तता शून्य असते आणि छटेला अर्थ नसतो; कन्व्हर्टर तेव्हा तिच्यासाठी 0 दाखवतो.

उदाहरण

#5A4632 साठी बाइट्स 90, 70 आणि 50 आहेत. लाल सर्वात मोठा आहे 0.353 वर, निळा सर्वात लहान 0.196 वर. तेजस्विता त्यांच्या बेरजेचा अर्धा, 0.275, सुमारे 28%. विस्तार 0.157 आहे, म्हणून संपृक्तता म्हणजे 0.157 भागिले बेरीज 0.549, सुमारे 29%. लाल ही सर्वात मोठी वाहिनी आहे आणि हिरवा मध्ये आहे, ज्यामुळे छटा 30 अंशांवर येते. निकाल आहे hsl(30, 29%, 28%).

पूर्ण संख्या

तीन संख्या लिहिल्या जातात तेव्हा पूर्ण अंश आणि पूर्ण टक्क्यांत पूर्णांकित केल्या जातात. लोक तेच रूप वापरतात आणि CSS ला रोजच्या कामात तेच रूप अपेक्षित असते, पण त्यामुळे शेवटच्या अंकावर काही माहिती गळते, जसे पुढचा विभाग स्पष्ट करतो.

रूपांतरण काय जपते आणि काय जपू शकत नाही

डोळा ज्या प्रकारे रंग लावतो तसा ते जपते

निकाल म्हणजे डोळा ज्या प्रकारे रंग लावतो तसा रंग: चक्रावरची छटा, तो किती संपृक्त आहे, किती हलका. म्हणूनच HSL असणे फायद्याचे आहे. तुम्ही एक संख्या बदलून रंग फिकट किंवा एक छटा गडद करू शकता, जे हेक्समध्ये जवळजवळ अशक्य आहे.

तेच बाइट्स परत मिळण्याची हमी ते देऊ शकत नाही

दोन्ही तेच रंग वर्णन करतात, पण HSL त्यांच्यापर्यंत वेगळ्या भूमितीतून पोहोचते आणि त्याच्या तीन संख्या लिहिल्या जातात तेव्हा पूर्ण अंश आणि पूर्ण टक्क्यांत पूर्णांकित केल्या जातात. म्हणून HSL मध्ये नेऊन परत आणलेला रंग तो जिथून सुरू झाला तिथून एक किंवा दोन पायऱ्या दूर पडू शकतो: दृश्यदृष्ट्या सारखा, बाइट-टू-बाइट सारखा नाही. तुम्हाला अचूक बाइट्स परत हवे असतील, तर हेक्स ठेवा. रंगासोबत काम करण्यासाठी HEX ला HSL मध्ये रूपांतरित करा, आणि हेक्स मूळ म्हणून ठेवा.

राखाडी रंगाला छटा नसते

तीन बाइट्स समान असतात, तेव्हा छटेबद्दल सांगण्यासारखे काही नसते. कन्व्हर्टर 0 ची छटा आणि 0% संपृक्तता देतो, आणि फक्त तेजस्विता राखाडीचे वर्णन करते. त्या 0 मधून काहीही अर्थ काढू नका.

प्रत्यक्षात HSL वापरणे

छटांचे कुटुंब बनवणे

मूळ रंग hsl(30, 29%, 28%) घ्या. होवरसाठी हलकी छटा hsl(30, 29%, 34%) आहे. पार्श्वभूमीसाठी खूप फिकट छटा hsl(30, 29%, 94%) आहे. दाबलेल्या स्थितींसाठी गडद छटा hsl(30, 29%, 22%) आहे. छटा आणि संपृक्तता जागेवर राहतात, म्हणून रंग स्पष्टपणे एकमेकांचे आहेत असे वाटतात. हेक्समध्ये तेच करायला अनेक प्रयत्न लागतील आणि तरीही थोडे वेगळे दिसेल.

थीम आणि डार्क मोड

थीमला अनेकदा तेच पॅलेट हलक्या आणि गडद आवृत्तीत हवे असते. HSL मध्ये तुम्ही छटा ठेवता आणि तेजस्विता व संपृक्तता समायोजित करता: हलक्या थीमसाठी पार्श्वभूमी हलकी आणि मजकूर गडद करा, आणि गडद थीमसाठी उलट. छटा कस्टम प्रॉपर्टी म्हणून परिभाषित करणे आणि फक्त तेजस्विता बदलणे हा हे करण्याचा नेहमीचा आणि नीटनेटका मार्ग आहे.

पॅलेट तयार करणे

पायाभूत रंगासोबत जाणारे रंग शोधायला छटा फिरवा. दोन्ही बाजूंना तीस अंश अनुरूप रंग देतात, 180 पूरक रंग देते, आणि 120 किंवा 240 त्रिकूट देतात. संपृक्तता आणि तेजस्विता स्थिर ठेवा, छटा बदला, आणि रंगांना एकसमान अनुभव येतो. यादृच्छिक न दिसणाऱ्या पॅलेटची सुरुवात करण्याचा हा जलद मार्ग आहे.

सुलभ कॉन्ट्रास्ट

कॉन्ट्रास्टसाठी तेजस्विता हे मुख्य नियंत्रण आहे. रंगीत पार्श्वभूमीवर मजकूर वाचायला कठीण असेल, तर उपाय सहसा त्यांच्यातील तेजस्वितेचा फरक वाढवणे असतो, आणि HSL त्याला प्रत्येक बाजूची एक संख्या समायोजित करण्याची बाब बनवते.

इथे HEX ला HSL मध्ये रूपांतरित कसे करावे

हेक्स कोड टाइप करा किंवा पेस्ट करा

पहिल्या रकान्यात रंग टाका, हॅश चिन्हासह किंवा त्याशिवाय. तीन आणि सहा अंकी रूपे स्वीकारली जातात, आणि पारदर्शकतेसह आठ अंकी रूपही वाचले जाते.

hsl मूल्य वाचा

उत्तर लगेच दिसते, जसे #5A4632 = hsl(30, 29%, 28%). तीन संख्या म्हणजे अंशांतील छटा आणि टक्क्यांतील संपृक्तता व तेजस्विता.

तुमच्या स्टाइलशीटमध्ये कॉपी करा

निकाल जसा आहे तसा वापरा, color: hsl(30, 29%, 28%) सारख्या नियमात. रंग समायोजित करण्यासाठी शेवटचा आकडा बदला. उलट दिशेचे साधन आहे HSL ते HEX.

या नोंदी कुठून आल्या

हेक्स आणि RGB एकाच गोष्टीचे दुहेरी लेखन

पडद्यावरचा रंग म्हणजे तीन संख्या, किती लाल, हिरवा आणि निळा प्रकाश उत्सर्जित करायचा, प्रत्येक 0 ते 255, म्हणजे एक बाइट. हेक्स फक्त ते बाइट्स सोळा-आधारी लिहितो. संख्या पाहण्यासाठी HEX ला RGB मध्ये रूपांतरित करा.

HSL आणि CMYK

HSL ची निर्मिती झाली कारण दोन्हीपैकी कोणतेही माणसाला वाचण्याजोगे नाही: ते रंगचक्राभोवतीच्या कोनाच्या रूपात छटा देते, संपृक्तता आणि तेजस्विता टक्केवारीत, म्हणून डिझायनर तीन आकडे पुन्हा न मोजता काहीतरी फिकट करू शकतो. CMYK पूर्णपणे वेगळ्या जगाचे आहे, प्रकाश नव्हे तर शाई. ते वजाबाकीचे आहे, चार छपाई प्लेट्सपासून बनलेले, आणि पडदा जे प्रत्येक रंग दाखवू शकतो तो ते गाठू शकत नाही, कारण पडदा प्रकाश उत्सर्जित करतो तर कागद फक्त तो परावर्तित करतो.

HEX ला HSL मध्ये रूपांतरित करताना सापळे

परिपूर्ण गोल प्रवासाची अपेक्षा करणे

पूर्णांकनामुळे परत रूपांतरित केल्यावर मूळ कोडपासून एक किंवा दोन पायऱ्या दूर असलेला कोड मिळू शकतो. एका रंगासाठी तो न दिसणारा असतो. अनेक रंग मागेपुढे रूपांतरित होणाऱ्या डिझाइन प्रणालीसाठी तो साचू शकतो. हेक्स स्रोत म्हणून ठेवा.

समान तेजस्विता म्हणजे समान चमक असे गृहीत धरणे

समान HSL तेजस्विता असलेले दोन रंग चमकेत बरेच वेगळे दिसू शकतात: 50% वरचा पिवळा 50% वरच्या निळ्यापेक्षा कितीतरी जास्त तेजस्वी दिसतो. HSL तेजस्विता सोयीची संख्या आहे, जाणवणाऱ्या चमकेचे मापन नाही. कॉन्ट्रास्ट तपासणीसाठी योग्य कॉन्ट्रास्ट साधन वापरा.

टक्का चिन्हे विसरणे

CSS मध्ये hsl() मधील संपृक्तता आणि तेजस्विता यांना टक्का चिन्हे असतात, आणि छटा साधी संख्या किंवा deg सह संख्या असते. चिन्हे वगळणे ही नेहमीची चूक आहे.

राखाडीचा जास्त अर्थ काढणे

राखाडीला छटा नसते. कन्व्हर्टरने तिच्यासाठी 0 दाखवले, तर याचा अर्थ ती लालसर आहे असा होत नाही.

रूपांतरणापूर्वी लोक विचारतात ते प्रश्न

HSL मध्ये #FF0000 काय आहे?

hsl(0, 100%, 50%), शुद्ध लाल.

HSL मध्ये #FFFFFF काय आहे?

hsl(0, 0%, 100%), पांढरा. पांढऱ्यासाठी छटा अर्थहीन आहे, आणि कन्व्हर्टर 0 दाखवतो.

HSL सर्वत्र चालते का?

सर्व सध्याचे ब्राउझर hsl() आणि hsla() समजतात. ते अनेक वर्षांपासून CSS मध्ये आहे.

रूपांतरण अचूक आहे का?

तेच रंग वर्णन करण्याच्या अर्थाने ते अचूक आहे, पण संख्या पूर्ण अंश आणि टक्क्यांत पूर्णांकित केल्या जातात, म्हणून परत जाताना एक पायरी दूर पडू शकते.

माझा रंग अपलोड केला जातो का?

नाही. अंकगणित तुमच्या ब्राउझरमध्ये चालते आणि काहीही कुठे पाठवले जात नाही.

मी परत कसे जाऊ?

HSL ते HEX सह.

HEX ला HSL मध्ये रूपांतरित करताना शहाणपणाने निवड

काम करण्यासाठी HSL वापरा, साठवण्यासाठी हेक्स

मुख्य पॅलेट हेक्समध्ये ठेवा, जिथे ते संदिग्धतेशिवाय आहे, आणि बदल निर्माण करायचे असतील तेव्हा HSL वापरा. गोल प्रवास थोडे गमावतात; मुख्य प्रत गमावत नाही.

नव्या रंग अवकाशांचा विचार करा

CSS आता oklch() आणि तत्सम नोंदी देते ज्यांत समान तेजस्विता खरोखर समान दिसते. नव्या डिझाइन प्रणालींसाठी ते शिकण्यासारखे आहेत. HSL ही अशी नोंद राहते जी जवळजवळ प्रत्येकाला समजते आणि प्रत्येक साधन पाठिंबा देते.

कस्टम प्रॉपर्टी वापरा

--hue, --sat आणि --light परिभाषित करा, आणि त्यांच्यापासून रंग बनवा: hsl(var(--hue) var(--sat) var(--light)). मग काही संख्या संपादित करून थीम बदलते.

आत्मविश्वासाने HSL वाचणे आणि लिहिणे

लक्षात ठेवण्यासाठी काही खुणा

काही संख्या HSL वाचणे सोपे करतात. 60 च्या पटीतील छटा शुद्ध रंग आहेत: 0 लाल, 60 पिवळा, 120 हिरवा, 180 सायन, 240 निळा, 300 मॅजेंटा. 50 तेजस्विता आणि 100 संपृक्तता कोणत्याही छटेची सर्वात शुद्ध आवृत्ती देते, आणि 95 किंवा त्याहून जास्त तेजस्विता इतकी फिकट छटा आहे की ती पार्श्वभूमी म्हणून चालते. तुम्ही HEX ला HSL मध्ये रूपांतरित करता आणि यापैकी एखाद्या खुणेजवळची छटा दिसते, तेव्हा तुम्ही रंग कुटुंबाचे नाव एका नजरेत सांगू शकता.

कुटुंबांमध्ये फिरणे

छटेत 180 जोडल्याने चक्रावरील विरुद्ध रंग मिळतो, जो पूरक असतो आणि सहसा सर्वात मजबूत कॉन्ट्रास्ट देतो. 30 जोडणे किंवा वजा करणे मूळाशेजारी सहज बसणारा शेजारी देते. डिझायनर ब्रँड रंगाशी जुळणारे अ‍ॅक्सेंट अंदाजाशिवाय निवडण्यासाठी या पायऱ्या वापरतात.

रूपांतरित मूल्यांची नोंद ठेवणे

पॅलेटसाठी तुम्ही HEX ला HSL मध्ये रूपांतरित करता तेव्हा निकाल तक्त्यात मूळ हेक्सशेजारी लिहा. तक्ता रंग एकमेकांशी कसे संबंधित आहेत ते दाखवतो, आणि एखादी छटा किंवा तेजस्विता इतरांशी विसंगत असेल, तर ती विचित्रता लगेच दिसते. तो तुमच्या चमूलाही सामायिक संदर्भ देतो.

खऱ्या पडद्यांवर चाचणी

कॅलिब्रेट केलेल्या मॉनिटरवर संतुलित दिसणारे रंग उन्हातल्या फोनवर किंवा स्वस्त लॅपटॉपवर वेगळे दिसू शकतात. तयार पॅलेट किमान दोन उपकरणांवर तपासा, आणि फिकट छटा एखाद्यावर नाहीशा होत असतील तर तेजस्विता थोडी समायोजित करा.

संबंधित कन्व्हर्टर

साधनांचे हेच कुटुंब शेजारची रूपांतरणे हाताळते. परत जाण्यासाठी HSL ते HEX वापरा. कोडमागील संख्यांसाठी HEX ते RGB आणि RGB ते HEX आहेत, आणि छपाईसाठी HEX ते CMYK आणि CMYK ते HEX. त्याच स्टाइलशीटमधील आकारांसाठी px ते rem आणि px ते em लांबीसाठी तेच करतात जे हे पान रंगांसाठी करते.

सोडवलेले उदाहरण

समजा तुमचा ब्रँड रंग #1E7A5C आहे. तुम्ही HEX ला HSL मध्ये रूपांतरित करता आणि hsl(160, 61%, 30%) वाचता. होवर स्थितीसाठी तुम्ही थोडा हलका hsl(160, 61%, 36%) लिहिता. दाबलेल्या स्थितीसाठी hsl(160, 61%, 24%). सूचनेमागील खूप फिकट पार्श्वभूमीसाठी hsl(160, 40%, 95%). निष्क्रिय बटणासाठी hsl(160, 12%, 60%), तीच छटा आणि बहुतेक रंग काढून घेतलेला. पाच रंग, एक छटा, एका मिनिटात लिहिलेले, आणि ते सर्व एकमेकांचे असल्यासारखे दिसतात. ब्रँड रंग बदलला की तुम्ही छटेची संख्या एकदाच बदलता.

छोटी तपासणी यादी

रूपांतरणापूर्वी

रंगाचे तुम्हाला काय करायचे आहे ते ठरवा: त्यात बदल करणे, थीम करणे किंवा फक्त वाचणे.

रूपांतरण करताना

हेक्स पेस्ट करा, hsl वाचा आणि तीन संख्या नोंदवा.

रूपांतरणानंतर

एका वेळी एक संख्या बदलून बदल करा, आणि खऱ्या पार्श्वभूमीवर त्यांना पाहा.

सामान्य चुका

पूर्णांकित संख्या अचूक मानणे

त्या पूर्ण संख्या आहेत. हेक्स मूळ म्हणून ठेवा.

तेजस्विता आणि चमक एकच मानणे

समान तेजस्वितेचे दोन रंग किती चमकदार दिसतात यात खूप वेगळे असू शकतात.

टक्का चिन्हे वगळणे

CSS मध्ये संपृक्तता आणि तेजस्विता यांना ती लागतात.

तुमचे रंग तुमच्या उपकरणावरच राहतात

गणना स्थानिक पातळीवर होते. तुमची मूल्ये तुमचा स्वतःचा ब्राउझर वापरतो आणि काहीही कुठे पाठवले जात नाही. नंतर हटवण्यासारखे काहीच नसते आणि तयार करण्यासाठी खाते नसते. HEX ला HSL मध्ये रूपांतरित करण्याचा हा साधा मार्ग आहे.

सारांश

इथे HEX ला HSL मध्ये रूपांतरित करण्यासाठी हेक्स कोड टाइप करा किंवा पेस्ट करा आणि hsl मूल्य लगेच वाचा. रूपांतरण डोळा ज्या प्रकारे रंग लावतो तसा रंग जपते: चक्रावरची छटा, तो किती संपृक्त आहे, किती हलका. म्हणूनच HSL असणे फायद्याचे आहे, कारण तुम्ही एक संख्या बदलून रंग फिकट किंवा एक छटा गडद करू शकता, जे हेक्समध्ये जवळजवळ अशक्य आहे. दोन्ही तेच रंग वर्णन करतात, पण HSL त्यांच्यापर्यंत वेगळ्या भूमितीतून पोहोचते आणि त्याच्या तीन संख्या पूर्ण अंश आणि पूर्ण टक्क्यांत पूर्णांकित केल्या जातात, म्हणून HSL मध्ये नेऊन परत आणलेला रंग तो जिथून सुरू झाला तिथून एक किंवा दोन पायऱ्या दूर पडू शकतो. तुम्हाला अचूक बाइट्स परत हवे असतील, तर हेक्स ठेवा. काहीही अपलोड केले जात नाही.