HSL मध्ये रंग निवडणे आरामदायक आहे, पण stylesheets, design handoffs आणि ब्रँड दस्तऐवज अजूनही HEX वर चालतात. हा कन्व्हर्टर त्या अंतराला बंद करतो आणि कोणत्याही hue, saturation आणि lightness संयोजनासाठी सहा-अंकी कोड देतो.
HSL ते HEX रूपांतरण कसे कार्य करते
- saturation आणि lightness ला भाग म्हणून रूपांतर करा: 60% -> 0.6.
- chroma C = (1 − |2L − 1|) × S गणना करा — हेच दर्शवते रंग ग्रेपासून कितपत दूर आहे.
- ह्यू वापरून तो chroma लाल, हिरवा आणि निळ्या चॅनेल्सवर स्थान द्या, नंतर सर्व तीन चॅनेलना L − C/2 ने shift करा.
- प्रत्येक चॅनेल 255 ने गुणा करा, गोल करा, आणि दोन hexadecimal अंक म्हणून लिहा.
उदाहरण
गोल करणे शेवटच्या टप्प्यात होते, जेव्हा प्रत्येक चॅनेल 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 मध्ये रूपांतरित केलेले.
| रंग | HSL | HEX |
|---|---|---|
| black | hsl(0, 0%, 0%) | #000000 |
| white | hsl(0, 0%, 100%) | #FFFFFF |
| red | hsl(0, 100%, 50%) | #FF0000 |
| lime | hsl(120, 100%, 50%) | #00FF00 |
| blue | hsl(240, 100%, 50%) | #0000FF |
| yellow | hsl(60, 100%, 50%) | #FFFF00 |
| orange | hsl(39, 100%, 50%) | #FFA600 |
| teal | hsl(180, 100%, 25%) | #007F80 |
| purple | hsl(300, 100%, 25%) | #80007F |
| gray | hsl(0, 0%, 50%) | #808080 |