HSL ते HEX रूपांतरणक

HSL मधील कोणताही रंग HEX मध्ये रूपांतरित करा — तत्काळ व मोफत

#3398DB

कोणतेही रंग मूल्य पेस्ट करा — आम्ही स्वरूप ओळखून देऊ.

H
S
L
HEX निकाल

हा रंग सर्व स्वरूपात

CMYK प्रोफाइल: Coated FOGRA39 (युरोपसाठी Photoshop ची डीफॉल्ट सेटिंग)

HSL मध्ये रंग निवडणे आरामदायक आहे, पण stylesheets, design handoffs आणि ब्रँड दस्तऐवज अजूनही HEX वर चालतात. हा कन्व्हर्टर त्या अंतराला बंद करतो आणि कोणत्याही hue, saturation आणि lightness संयोजनासाठी सहा-अंकी कोड देतो.

HSL ते HEX रूपांतरण कसे कार्य करते

  1. saturation आणि lightness ला भाग म्हणून रूपांतर करा: 60% -> 0.6.
  2. chroma C = (1 − |2L − 1|) × S गणना करा — हेच दर्शवते रंग ग्रेपासून कितपत दूर आहे.
  3. ह्यू वापरून तो chroma लाल, हिरवा आणि निळ्या चॅनेल्सवर स्थान द्या, नंतर सर्व तीन चॅनेलना L − C/2 ने shift करा.
  4. प्रत्येक चॅनेल 255 ने गुणा करा, गोल करा, आणि दोन hexadecimal अंक म्हणून लिहा.

उदाहरण

HSL hsl(204, 70%, 53%)=HEX #3398DB

गोल करणे शेवटच्या टप्प्यात होते, जेव्हा प्रत्येक चॅनेल 0–255 मधल्या पूर्णांकावर सेट होते. परिणामी तुम्हाच्या HSL इनपुटशी सर्वात जवळचा HEX कोड मिळतो आणि सामान्यतः design tool मध्ये दिसणाऱ्या परिणामाशी सारखा असतो.

HSL आणि HEX समजावणी

HSL म्हणजे काय?

HSL रंगाला तीन भागात विभागते: hue (रंगसंचारावर 0–360°), saturation (किती रंगीच, 0–100%) आणि lightness (किती उजळ, 0–100%). लोक रंग वर्णन करताना प्रत्येक भाग जसा वापरतात तसा असल्यामुळे HSL टिंट्स, शेड्स आणि सुसंगत पॅलेट्स हाताने किंवा कोडमध्ये तयार करण्यासाठी सर्वात सोपी फॉरमॅट आहे.

सिंटॅक्स:
hsl(H, S%, L%)
श्रेणी:
0–360°, 0–100%, 0–100%
उपयुक्त:
पॅलेट्स, टिंट्स आणि शेड्स, थीमिंग

HEX म्हणजे काय?

HEX कोड हा एक सहा-अंकी हेक्साडेसिमल संख्या आहे जो रंगाच्या लाल, हिरवा आणि निळा चॅनेलला अग्रभागी # सोबत साठवतो. प्रत्येक दोन अंक एका चॅनेलचे प्रतिनिधित्व करतात, 00 (नाही) पासून FF (पूर्ण) पर्यंत, ज्यामुळे RGB प्रमाणेच सुमारे 16.7 दशलक्ष रंग कमी नोंदीत मिळतात. CSS, डिझाइन टूल्स आणि ब्रँड गाइडलाइन्समध्ये HEX हा डीफॉल्ट आहे.

सिंटॅक्स:
#RRGGBB
श्रेणी:
प्रत्येक चॅनेलसाठी 00–FF
उपयुक्त:
CSS, डिझाइन हस्तांतरण, ब्रँड गाइडलाइन्स

HSL ते HEX संदर्भ तक्ता

सर्वसाधारण CSS रंग, HSL मधून HEX मध्ये रूपांतरित केलेले.

रंगHSLHEX
blackhsl(0, 0%, 0%)#000000
whitehsl(0, 0%, 100%)#FFFFFF
redhsl(0, 100%, 50%)#FF0000
limehsl(120, 100%, 50%)#00FF00
bluehsl(240, 100%, 50%)#0000FF
yellowhsl(60, 100%, 50%)#FFFF00
orangehsl(39, 100%, 50%)#FFA600
tealhsl(180, 100%, 25%)#007F80
purplehsl(300, 100%, 25%)#80007F
grayhsl(0, 0%, 50%)#808080

वारंवार विचारले जाणारे प्रश्न

saturation आणि lightness ला भाग म्हणून रूपांतर करा: 60% -> 0.6. chroma C = (1 − |2L − 1|) × S गणना करा — हेच दर्शवते रंग ग्रेपासून कितपत दूर आहे. ह्यू वापरून तो chroma लाल, हिरवा आणि निळ्या चॅनेल्सवर स्थान द्या, नंतर सर्व तीन चॅनेलना L − C/2 ने shift करा. प्रत्येक चॅनेल 255 ने गुणा करा, गोल करा, आणि दोन hexadecimal अंक म्हणून लिहा.

गोल करणे शेवटच्या टप्प्यात होते, जेव्हा प्रत्येक चॅनेल 0–255 मधल्या पूर्णांकावर सेट होते. परिणामी तुम्हाच्या HSL इनपुटशी सर्वात जवळचा HEX कोड मिळतो आणि सामान्यतः design tool मध्ये दिसणाऱ्या परिणामाशी सारखा असतो.

HEX कोड हा एक सहा-अंकी हेक्साडेसिमल संख्या आहे जो रंगाच्या लाल, हिरवा आणि निळा चॅनेलला अग्रभागी # सोबत साठवतो. प्रत्येक दोन अंक एका चॅनेलचे प्रतिनिधित्व करतात, 00 (नाही) पासून FF (पूर्ण) पर्यंत, ज्यामुळे RGB प्रमाणेच सुमारे 16.7 दशलक्ष रंग कमी नोंदीत मिळतात. CSS, डिझाइन टूल्स आणि ब्रँड गाइडलाइन्समध्ये HEX हा डीफॉल्ट आहे.

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

पॅलेट HSL मध्ये तयार करा, नंतर HEX म्हणून एक्सपोर्ट करा. पॅलेटची लॉजिक—समान hue, वेगवेगळ्या lightness—जपली जाते आणि दिलेला कोड विकसकांना अपेक्षित फॉरमॅटमध्ये राहतो.