रंग परिवर्तक

रंग परिवर्तक क्या है?#

एक रंग परिवर्तक किसी रंग के एक विवरण को उन अन्य विवरणों में अनुवाद करता है जिनकी आपके स्टैक को वास्तव में आवश्यकता है। डिज़ाइनर आपको किसी मॉकअप से एक HEX मान देते हैं; CSS आपको rgb() या hsl() लिखने देता है; एक डिज़ाइन-टोकन पाइपलाइन एक CSS चर चाहती है; एक चार्टिंग लाइब्रेरी alpha चैनल के साथ एक RGBA tuple माँगती है। वही रंग लगातार अलग-अलग पोशाक पहनता है, और आप हाथ से या कैलकुलेटर पर अनुमान लगाते हुए उनके बीच रूपांतरण में वास्तविक समय बिताते हैं।

यह पेज एक साथ सभी चार रूपांतरण करता है। एक रंग टाइप करें या चुनें और आप तत्काल इसका HEX, RGB, HSL, और एक पेस्ट-के-लिए-तैयार CSS चर घोषणा पाते हैं, साथ ही एक लाइव पूर्वावलोकन स्वॉच और उसी रंग से व्युत्पन्न पाँच-चरण का हल्का/गहरा पैलेट — सब कुछ आपके ब्राउज़र में स्थानीय रूप से गणना।

HEX, RGB और HSL के सह-अस्तित्व का कारण यह है कि प्रत्येक एक अलग काम के लिए अच्छा है। HEX (#4f46e5) सघन है और CSS, Figma निर्यात तथा ब्रांड दिशानिर्देशों पर हावी है। RGB (rgb(79, 70, 229)) लाल/हरा/नीला चैनलों को स्पष्ट बनाता है, जो वही है जो छवि कोड और canvas पिक्सेल हेरफेर अपेक्षा करते हैं। HSL (hsl(243, 75%, 59%)), आसव, संतृप्ति और हल्केपन में विभाजित, वही है जिस पर एक मनुष्य तर्क कर सके — “इसे 10% हल्का बनाएँ” HSL में एकल संख्या परिवर्तन है और RGB में एक गन्दा तीन-संख्या नृत्य।

इसका उपयोग कैसे करें#

1. दो तरीकों में से एक में इनपुट रंग सेट करें:
   • दृश्य रूप से चुनने के लिए बाईं ओर रंग वर्ग क्लिक करके मूल OS रंग पिकर खोलें।
   • या इसके बगल के टेक्स्ट फ़ील्ड में एक मान टाइप करें। HEX (#4f46e5, #abc, या 8-अंक #4f46e5ff alpha के साथ), rgb() / rgba(), और hsl() / hsla() सभी स्वीकृत हैं।
2. दाईं-हाथ की सूची में परिणाम पढ़ें — HEX, RGB, HSL, और CSS चर। प्रत्येक फ़ील्ड केवल-पठनीय है; इसमें क्लिक करें और कॉपी करें, या काम करते समय फ़ील्ड को संदर्भ के रूप में उपयोग करें।
3. दाईं ओर बड़े पूर्वावलोकन ब्लॉक को देखें; यह वर्तमान रंग से भर जाता है ताकि आप इसे अपनी डिज़ाइन के विरुद्ध जाँच सकें।
4. पूर्वावलोकन के नीचे 5-स्वॉच पैलेट का उपयोग करें। यह HSL हल्केपन को 10-बिंदु चरणों में खिसकाकर darker, dark, base, light, और lighter विविधताएँ उत्पन्न करता है — hover/active स्थितियों के लिए या एकल ब्रांड रंग से टोनल पैमाना बनाने के लिए सुविधाजनक।
5. स्थिति पंक्ति रूपांतरण की पुष्टि करती है या एक अमान्य रंग संदेश रिपोर्ट करती है यदि आपका इनपुट पार्स नहीं हुआ।

मुख्य विशेषताएँ#

• तीन प्रारूप स्वीकृत, चार वापस। HEX, rgb(), या hsl() चिपकाएँ और एक ही बार में HEX, RGB, HSL, और CSS-चर घोषणा वापस पाएँ।
• Alpha-जागरूक। 8-अंक HEX (#rrggbbaa) और rgba()/hsla() इनपुट अपने alpha चैनल को आउटपुट तक लेकर जाते हैं, इसलिए पारभासी रंग सही ढंग से राउंड-ट्रिप होते हैं।
• टोनल पैलेट जनरेटर। पाँच-चरण हल्का/गहरा पंक्ति आपके रंग के अपने HSL से व्युत्पन्न होती है, किसी डिब्बाबंद रैंप से नहीं — यह हमेशा एक ही परिवार जैसी दिखती है।
• कॉपी-तैयार CSS चर। --color-brand: #4f46e5; पंक्ति सीधे एक :root ब्लॉक में गिरती है, जिसे आप बाद में अपने टोकन नाम पर नामकरण कर सकते हैं।
• 100% क्लाइंट-साइड। कोई बैकएंड नहीं, कोई नेटवर्क अनुरोध नहीं। आपके ब्रांड रंग कभी पेज नहीं छोड़ते।

विस्तृत उदाहरण#

पेज इंडिगो #4f46e5 के साथ लोड होता है। उस इनपुट के साथ, चार फ़ील्ड भरते हैं:

HEX:        #4f46e5
RGB:        rgb(79, 70, 229)
HSL:        hsl(243, 75%, 59%)
CSS var:    --color-brand: #4f46e5;

ध्यान दें कि कैसे HSL रूप hsl(243, 75%, 59%) एक वाक्य की तरह पढ़ता है: आसव 243 (रंग पहिया पर एक नीला-बैंगनी कोण), 75% संतृप्ति (काफ़ी जीवंत), 59% हल्कापन (मध्य-टोन, मध्य ग्रे से थोड़ा अधिक चमकीला)। यदि किसी डिज़ाइनर ने आपको “hover स्थिति के लिए थोड़ा गहरा बनाने” को कहा, तो आप उस 59 को 49 तक गिरा दें और hsl(243, 75%, 49%) पाते — और वास्तव में यही dark स्वॉच है जो पैलेट जनरेटर पूर्वावलोकन के नीचे उत्पन्न करता है, 69% पर light और 39% व 79% पर चरम के साथ।

यदि आप इसके बजाय किसी CSS चर से शुरू करते हैं जो पहले से आपका है, तो उसका मान टेक्स्ट फ़ील्ड में चिपकाएँ। rgba(79, 70, 229, 0.5) को उसी इंडिगो 50% अस्पष्टता पर पार्स किया जाता है, और HEX आउटपुट #4f46e580 (8-अंक, alpha 0x80 ≈ 0.5) बन जाता है, जो ऐसी स्टाइलशीट में गिराने के लिए तैयार है जो HEX पसंद करती है।

अक्सर पूछे जाने वाले प्रश्न#

मेरे डिज़ाइनर ने मुझे #4f46e5 दिया किंतु dev tools rgb(79, 70, 229) दिखाते हैं। क्या वे एक ही रंग हैं?#

हाँ, बिलकुल। HEX और RGB उन्हीं sRGB मानों के दो क्रमानुसार हैं। #4f46e5 बाइट युग्मों 4f, 46, e5 में विभाजित होता है, जो 79, 70 और 229 का हेक्स हैं। जो भी आपका संदर्भ पसंद करता है उसका उपयोग करें — CSS इन्हें समान मानता है।

मुझे HEX के बजाय HSL कब उपयोग करना चाहिए?#

जब भी आप किसी रंग को अनुभव द्वारा सुनिश्चित रूप से बदलना चाहते हैं। गहरा करना, हल्का करना, असंतृप्त करना, या एक ब्रांड रंग से 5-छाया पैलेट बनाना HSL में एक संख्या है और RGB में एक कष्टप्रद त्रि-मार्गी संतुलन। HEX भंडारण और कॉपी-पेस्ट के लिए सर्वोत्तम है; HSL संपादन के लिए सर्वोत्तम है।

पैलेट कभी-कभी बहुत गहरे या हल्के रंगों पर असमान क्यों दिखता है?#

जनरेटर हल्केपन को नियत 10-बिंदु चरणों से खिसकाता है और 0% तथा 100% पर क्लैंप करता है। इन सीमाओं के पास चरण सिकुड़ जाते हैं क्योंकि खिसकने की जगह नहीं बचती — 95% हल्कापन वाला रंग शुद्ध सफ़ेद से पहले केवल 5 बिंदु “हल्का” रखता है। यह HSL स्पेस की ही एक विशेषता है, कोई बग नहीं।

क्या यह टूल P3 या वाइड-गैमट रंगों का समर्थन करता है?#

नहीं। यह sRGB स्पेस में काम करता है जिसका CSS HEX/RGB/HSL वर्णन करते हैं, जो अधिकांश वेब काम को कवर करता है। Display-P3 और color() संकेतन एक अलग पाइपलाइन हैं और यहाँ पार्स नहीं होते।