HSL रंगाला लोक जशी बोलतात तशीच व्याख्या करते: कोणता hue, किती रंगीबेरंगी, किती प्रकाशमान. HEX कोड HSL मध्ये रूपांतर करणे म्हणजे रंगाला सहज समायोजण्यायोग्य रुपात आणणे — त्याला हलका करणे, कंटाळवाणा करणे किंवा तितक्याच रंगांनी स्केल तयार करणे.
HEX ते HSL रूपांतरण कसे कार्य करते
- HEX कोडला RGB मध्ये रूपांतर करा आणि प्रत्येक चॅनेल 255 ने भाग करा, म्हणजे ते सर्व 0 ते 1 दरम्यान येतील.
- या तीन मूल्यांमधले सर्वात मोठे आणि सर्वात लहान शोधा. त्यांचा सरासरी हा lightness L आहे.
- त्यांच्यातील फरक saturation S निर्धारीत करतो: उज्जवल रंगांसाठी ते (2 − max − min) ने भाग करा, किंवा गडद रंगांसाठी (max + min) ने भाग करा.
- ज्याच्यामध्ये जास्तीत जास्त मूल्य आहे तो चॅनेल hue H ठरवतो — लाल 0°, हिरवा 120°, निळा 240° — आणि इतर दोन चॅनेल त्या भागात hue ची स्थिती ठरवतात.
उदाहरण
गणित अचूक आहे, परंतु 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 मध्ये रूपांतरित केलेले.
| रंग | HEX | HSL |
|---|---|---|
| black | #000000 | hsl(0, 0%, 0%) |
| white | #FFFFFF | hsl(0, 0%, 100%) |
| red | #FF0000 | hsl(0, 100%, 50%) |
| lime | #00FF00 | hsl(120, 100%, 50%) |
| blue | #0000FF | hsl(240, 100%, 50%) |
| yellow | #FFFF00 | hsl(60, 100%, 50%) |
| orange | #FFA500 | hsl(39, 100%, 50%) |
| teal | #008080 | hsl(180, 100%, 25%) |
| purple | #800080 | hsl(300, 100%, 25%) |
| gray | #808080 | hsl(0, 0%, 50%) |