कलर कन्वर्टर (HEX / RGB / HSL)

यह कैसे काम करता है

डिज़ाइनर आम तौर पर HEX कोड के साथ काम करते हैं (उदाहरण के लिए Figma या किसी डिज़ाइन सॉफ़्टवेयर से कॉपी किए गए), जबकि आधुनिक CSS अक्सर किसी रंग की ह्यू, सैचुरेशन या लाइटनेस को हाथ से HEX कोड फिर से गणना किए बिना आसानी से समायोजित करने के लिए HSL फ़ॉर्मेट का लाभ उठाता है — hover, disabled स्टेट्स या डार्क थीम के लिए एक ही ब्रांड रंग के हल्के या गहरे वेरिएंट जेनरेट करने के लिए उपयोगी। यह टूल अपने आप पहचान लेता है कि आपने HEX, RGB या HSL कोड पेस्ट किया है और इसे आपकी ज़रूरत वाले फ़ॉर्मेट में बदल देता है।

HEX, RGB और HSL में क्या अंतर है?

HEX ( #rrggbb ) और RGB ( rgb(r, g, b) ) दोनों किसी रंग को उसके लाल, हरे और नीले घटकों से वर्णित करते हैं — HEX बेस 16 में, RGB बेस 10 में — और बिल्कुल वही जानकारी दो अलग-अलग नोटेशन में दर्शाते हैं। HSL (hsl(h, s%, l%)) उसी रंग को अलग तरह से वर्णित करता है: उसकी ह्यू (कलर व्हील पर एक कोण), सैचुरेशन और लाइटनेस से, जो "एक ही रंग रखना लेकिन उसे हल्का करना" या "वही लाइटनेस रखना लेकिन ह्यू बदलना" कहीं ज़्यादा सहज बना देता है।

CSS में HEX की बजाय HSL क्यों इस्तेमाल करें?

क्योंकि केवल लाइटनेस घटक बदलकर किसी रंग के संगत वेरिएंट निकालना आसान है (उदाहरण के लिए hsl(217, 91%, 60%) बेस रंग के लिए और hsl(217, 91%, 40%) गहरे hover स्टेट के लिए), हर बार नया HEX कोड फिर से गणना किए बिना या नज़र से अंदाज़ा लगाए बिना कि ह्यू वही रहा या नहीं।

100% लोकल प्रोसेसिंग: बदलाव सीधे आपके ब्राउज़र में WebAssembly के ज़रिए होता है, बिना किसी बाहरी सर्वर कॉल के।