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

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

#2ECC71

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

HSL निकाल
ह्यू
145°
सॅच्युरेशन
63%
लाइटनेस
49%

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

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

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

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

  1. HEX कोडला RGB मध्ये रूपांतर करा आणि प्रत्येक चॅनेल 255 ने भाग करा, म्हणजे ते सर्व 0 ते 1 दरम्यान येतील.
  2. या तीन मूल्यांमधले सर्वात मोठे आणि सर्वात लहान शोधा. त्यांचा सरासरी हा lightness L आहे.
  3. त्यांच्यातील फरक saturation S निर्धारीत करतो: उज्जवल रंगांसाठी ते (2 − max − min) ने भाग करा, किंवा गडद रंगांसाठी (max + min) ने भाग करा.
  4. ज्याच्यामध्ये जास्तीत जास्त मूल्य आहे तो चॅनेल hue H ठरवतो — लाल 0°, हिरवा 120°, निळा 240° — आणि इतर दोन चॅनेल त्या भागात hue ची स्थिती ठरवतात.

उदाहरण

HEX #2ECC71=HSL hsl(145, 63%, 49%)

गणित अचूक आहे, परंतु HSL मूल्ये सामान्यतः पूर्ण अंश व टक्केवारीत गोल केली जातात. त्यामुळे परत रूपांतर करताना मूळ RGB पेक्षा एक-दोन पावलांची दूररी राहू शकते — प्रत्यक्षात दिसत नाही, परंतु रंगाची सतत round-trip रूपांतरे करत असाल तर हे लक्षात ठेवणे चांगले.

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

HEX म्हणजे काय?

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

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

HSL म्हणजे काय?

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

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

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

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

रंगHEXHSL
black#000000hsl(0, 0%, 0%)
white#FFFFFFhsl(0, 0%, 100%)
red#FF0000hsl(0, 100%, 50%)
lime#00FF00hsl(120, 100%, 50%)
blue#0000FFhsl(240, 100%, 50%)
yellow#FFFF00hsl(60, 100%, 50%)
orange#FFA500hsl(39, 100%, 50%)
teal#008080hsl(180, 100%, 25%)
purple#800080hsl(300, 100%, 25%)
gray#808080hsl(0, 0%, 50%)

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

HEX कोडला RGB मध्ये रूपांतर करा आणि प्रत्येक चॅनेल 255 ने भाग करा, म्हणजे ते सर्व 0 ते 1 दरम्यान येतील. या तीन मूल्यांमधले सर्वात मोठे आणि सर्वात लहान शोधा. त्यांचा सरासरी हा lightness L आहे. त्यांच्यातील फरक saturation S निर्धारीत करतो: उज्जवल रंगांसाठी ते (2 − max − min) ने भाग करा, किंवा गडद रंगांसाठी (max + min) ने भाग करा. ज्याच्यामध्ये जास्तीत जास्त मूल्य आहे तो चॅनेल hue H ठरवतो — लाल 0°, हिरवा 120°, निळा 240° — आणि इतर दोन चॅनेल त्या भागात hue ची स्थिती ठरवतात.

गणित अचूक आहे, परंतु HSL मूल्ये सामान्यतः पूर्ण अंश व टक्केवारीत गोल केली जातात. त्यामुळे परत रूपांतर करताना मूळ RGB पेक्षा एक-दोन पावलांची दूररी राहू शकते — प्रत्यक्षात दिसत नाही, परंतु रंगाची सतत round-trip रूपांतरे करत असाल तर हे लक्षात ठेवणे चांगले.

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

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

जशी लवकरच रंगाचे वेगवेगळे व्हेरिएंट हवे असतील तशी HSL मध्ये बदला. H आणि S फिक्स करून केवळ L हलवल्यास तुम्हाला सातत्यपूर्ण tint आणि shade स्केल मिळतो, जे HEX मध्ये हाताने करणे खूप कठीण आहे.