ToolDeck के रंग टूल आपको रंग प्रारूपों के बीच कनवर्ट करने, एक्सेसिबिलिटी कंट्रास्ट अनुपात जाँचने, रंग पट्टियाँ बनाने, CSS ग्रेडिएंट तैयार करने, और रंग के नाम या Tailwind क्लास सीधे अपने ब्राउज़र में खोजने की सुविधा देते हैं। Color Converter HEX, RGB, HSL और HSV को दोनों दिशाओं में संभालता है। Contrast Checker WCAG 2.1 AA और AAA मानकों को पूरा करता है या नहीं यह जाँचता है। Palette Generator किसी भी आधार रंग से पूरक, अनुरूप, त्रिकोणीय और चतुष्कोणीय योजनाएँ बनाता है। CSS Gradient Generator कॉपी के लिए तैयार रेखीय और रेडियल ग्रेडिएंट कोड आउटपुट करता है। Color Name Finder किसी भी मान को निकटतम CSS नामित रंग से मिलाता है, और Tailwind Color Finder किसी भी रंग को Tailwind उपयोगिता क्लास से मैप करता है। सभी टूल क्लाइंट-साइड चलते हैं और कोई डेटा किसी सर्वर को नहीं भेजा जाता।
रंग टूल क्या हैं?
रंग टूल ऐसी उपयोगिताएँ हैं जो डेवलपर्स और डिज़ाइनरों को डिजिटल रंग मानों के साथ काम करने में सहायता करती हैं। स्क्रीन पर प्रत्येक रंग संख्याओं के रूप में संग्रहीत होता है: RGB के लिए तीन चैनल (लाल, हरा, नीला), CSS शॉर्टहैंड के लिए एक हेक्स त्रिक, या HSL के लिए कोणीय रंगत के साथ संतृप्ति और चमक। इन प्रस्तुतियों के बीच हाथ से परिवर्तन करना धीमा और त्रुटिपूर्ण है, विशेष रूप से जब आपको अल्फा पारदर्शिता या OKLCH जैसे नए मॉडलों का भी ध्यान रखना हो।
प्रारूप रूपांतरण से परे, रंग कार्य में एक्सेसिबिलिटी टेस्टिंग, रंग पट्टी निर्माण और ग्रेडिएंट लेखन शामिल हैं। WCAG 2.1 न्यूनतम कंट्रास्ट अनुपात परिभाषित करता है (AA स्तर पर सामान्य टेक्स्ट के लिए 4.5:1, AAA के लिए 7:1) जिन्हें आँख से सत्यापित करना कठिन है। सुसंगत रंग योजनाएँ बनाने के लिए HSL रंग चक्र पर सटीक कोण गणना आवश्यक है। CSS ग्रेडिएंट को दिशा, रंग स्टॉप और फ़ॉलबैक मानों के लिए सही वाक्यविन्यास की आवश्यकता होती है। दर्जनों टोकन वाले डिज़ाइन सिस्टम में यह सब मैन्युअल रूप से करना जल्दी ही थकाऊ हो जाता है।
रंग टूल इन कार्यों को स्वचालित करते हैं। वे एक प्रारूप में रंग स्वीकार करते हैं, गणना करते हैं, और आपको आवश्यक परिणाम लौटाते हैं — चाहे वह कनवर्ट किया हुआ मान हो, एक्सेसिबिलिटी का पास/फेल रिज़ल्ट हो, सुसंगत रंग के नमूनों का समूह हो, या CSS कोड स्निपेट हो। जब टूल ब्राउज़र में चलता है, तो आप संवेदनशील डिज़ाइन टोकन थर्ड-पार्टी सेवाओं पर अपलोड करने से भी बचते हैं।
ToolDeck पर रंग टूल क्यों उपयोग करें?
ToolDeck के रंग टूल पूरी तरह आपके ब्राउज़र में चलते हैं। कोई रंग मान आपकी मशीन से बाहर नहीं जाता, किसी खाते की आवश्यकता नहीं है, और प्रत्येक टूल एक्सटेंशन या डेस्कटॉप सॉफ़्टवेयर स्थापित किए बिना तुरंत लोड होता है।
🎨एक चरण में प्रारूप कनवर्ट करें
एक HEX कोड चिपकाएँ और एक साथ RGB, HSL और HSV मान प्राप्त करें। एक के बाद एक कनवर्टर चेन करने या रूपांतरण सूत्र याद रखने की आवश्यकता नहीं।
🔒डिज़ाइन टोकन गोपनीय रखें
सभी प्रसंस्करण क्लाइंट-साइड होता है। आपके ब्रांड के रंग, अप्रकाशित रंग पट्टी के निर्णय और आंतरिक डिज़ाइन सिस्टम के मान आपके डिवाइस पर रहते हैं।
♿तुरंत एक्सेसिबिलिटी चेक करें
किसी भी अग्रभूमि/पृष्ठभूमि जोड़े को WCAG 2.1 AA और AAA सीमाओं के विरुद्ध सामान्य और बड़े टेक्स्ट दोनों के लिए जाँचें। केवल पास/फेल लेबल नहीं, बल्कि सटीक कंट्रास्ट अनुपात प्राप्त करें।
⚡उत्पादन-तैयार आउटपुट कॉपी करें
प्रत्येक टूल ऐसे मान आउटपुट करता है जिन्हें आप CSS, Tailwind कॉन्फ़िगरेशन, या डिज़ाइन टूल के इनपुट फ़ील्ड में सीधे चिपका सकते हैं। पुनः स्वरूपण की आवश्यकता नहीं।
रंग टूल के उपयोग के मामले
यहाँ छह सामान्य परिदृश्य हैं जहाँ ToolDeck के रंग टूल समय बचाते हैं।
डिज़ाइन सिस्टम का रखरखाव
डिज़ाइन सिस्टम अद्यतन करते समय, आपको अक्सर किसी डिज़ाइनर से HEX में रंग मिलते हैं लेकिन CSS कस्टम प्रॉपर्टी के लिए HSL की आवश्यकता होती है।
Color Converter प्रारूपों के बीच अनुवाद करता है ताकि आप मैन्युअल गणना के बिना टोकन फ़ाइलें भर सकें।
एक्सेसिबिलिटी ऑडिट
WCAG अनुपालन ऑडिट के दौरान, प्रत्येक टेक्स्ट/पृष्ठभूमि कॉम्बिनेशन को न्यूनतम कंट्रास्ट अनुपात पूरा करना होता है।
Color Contrast Checker सामान्य और बड़े टेक्स्ट आकारों दोनों के लिए सटीक अनुपात और AA/AAA पास स्टेटस दर्शाता है।
ब्रांड रंग पट्टी की खोज
एकल ब्रांड रंग से आरंभ करते हुए, आपको एक्सेंट और तटस्थ रूपांतरों की आवश्यकता होती है।
Color Palette Generator पूरक, अनुरूप, त्रिकोणीय और चतुष्कोणीय सामंजस्य की गणना करता है ताकि आप रंग पट्टी तय करने से पहले विकल्पों का मूल्यांकन कर सकें।
CSS पृष्ठभूमि स्टाइलिंग
ग्रेडिएंट के साथ हीरो सेक्शन या कार्ड पृष्ठभूमि बनाने के लिए कोण, रंग स्टॉप और वेंडर उपसर्गों के लिए सही CSS वाक्यविन्यास आवश्यक है।
CSS Gradient Generator आपको ग्रेडिएंट दृश्य रूप से बनाने और कोड कॉपी करने देता है।
Tailwind में स्थानांतरण
किसी प्रोजेक्ट को Tailwind CSS में स्थानांतरित करते समय, आपको मौजूदा HEX या RGB मानों को निकटतम Tailwind उपयोगिता क्लास से मैप करना होता है।
Tailwind Color Finder सबसे करीबी मिलान खोजता है और अंतर दर्शाता है ताकि आप तय कर सकें कि अनुमान स्वीकार्य है या नहीं।
कोड समीक्षा और दस्तावेज़ीकरण
कोड समीक्षा के दौरान, #708090 जैसा कच्चा HEX मान पहली नज़र में कुछ नहीं बताता।
Color Name Finder इसे SlateGray के रूप में पहचानता है, जिससे समीक्षाएँ और दस्तावेज़ीकरण अधिक पठनीय बनते हैं।
CSS रंग मॉडल संदर्भ
CSS अनेक रंग मॉडल का समर्थन करता है। नीचे दी गई तालिका छह सबसे सामान्य प्रारूपों, उनके वाक्यविन्यास और सामान्य उपयोग के मामलों का सारांश प्रस्तुत करती है। ये सभी ToolDeck के Color Converter द्वारा समर्थित हैं।
| मॉडल | CSS वाक्यविन्यास | चैनल | मान सीमा | सामान्य उपयोग |
|---|
| HEX | #rrggbb | लाल, हरा, नीला | प्रति चैनल 00–ff | CSS में सर्वाधिक सामान्य, डिज़ाइन हैंडऑफ़, ब्रांड दिशानिर्देश |
| RGB | rgb(r, g, b) | लाल, हरा, नीला | प्रति चैनल 0–255 | JavaScript canvas API, computed styles, छवि प्रसंस्करण |
| HSL | hsl(h, s%, l%) | रंगत, संतृप्ति, चमक | 0–360 / 0–100% / 0–100% | डिज़ाइन टोकन, थीम निर्माण, प्रोग्रामेटिक छाया रूपांतर |
| HSV | N/A (CSS में नहीं) | रंगत, संतृप्ति, मान | 0–360 / 0–100% / 0–100% | रंग चयनकर्ता (Photoshop, Figma), हार्डवेयर रंग अंशांकन |
| OKLCH | oklch(L C H) | चमक, क्रोमा, रंगत | 0–1 / 0–0.4 / 0–360 | अवधारणात्मक रूप से एकसमान रंग पट्टियाँ (CSS Color Level 4 विशिष्टता) |
| Named | जैसे slategray | आंतरिक रूप से RGB से मैप | 148 पूर्वनिर्धारित नाम | प्रोटोटाइपिंग, पठनीय कोड, त्वरित प्रदर्शन |
CSS Color Level 4 (W3C) lab(), lch() और color() फ़ंक्शन भी परिभाषित करता है। HEX और RGB ब्राउज़रों और डिज़ाइन टूल में सर्वाधिक व्यापक रूप से समर्थित बने हुए हैं।
सही रंग टूल कैसे चुनें
प्रत्येक रंग टूल एक अलग समस्या हल करता है। अपने कार्य के लिए सही टूल खोजने के लिए नीचे दी गई मार्गदर्शिका का उपयोग करें।
- 1
यदि आपको आवश्यकता है किसी रंग को HEX, RGB, HSL या HSV प्रारूपों के बीच कनवर्ट करने की → Color Converter - 2
यदि आपको आवश्यकता है यह चेक करने की कि टेक्स्ट/पृष्ठभूमि रंग का जोड़ा WCAG एक्सेसिबिलिटी स्टैंडर्ड्स को पूरा करता है → Color Contrast Checker - 3
यदि आपको आवश्यकता है एकल आधार रंग से सुसंगत रंगों का समूह उत्पन्न करने की → Color Palette Generator - 4
यदि आपको आवश्यकता है रेखीय या रेडियल CSS ग्रेडिएंट बनाने और कोड प्राप्त करने की → CSS Gradient Generator - 5
यदि आपको आवश्यकता है दिए गए रंग मान के निकटतम मानव-पठनीय CSS नाम खोजने की → Color Name Finder - 6
यदि आपको आवश्यकता है किसी भी रंग को निकटतम Tailwind CSS उपयोगिता क्लास से मैप करने की → Tailwind Color Finder
सभी छह टूल अनेक प्रारूपों में इनपुट स्वीकार करते हैं। यदि आप अनिश्चित हैं कि आपका रंग किस प्रारूप में है, तो Color Converter से आरंभ करें, जो HEX, RGB, HSL और HSV संकेतन को स्वतः पहचानता है।
अक्सर पूछे जाने वाले प्रश्न
HEX और RGB रंग प्रारूपों में क्या अंतर है?
HEX और RGB एक ही रंग स्थान को दर्शाते हैं। #ff6600 जैसा HEX कोड तीन RGB चैनलों की हेक्साडेसिमल एन्कोडिंग है: ff = 255 (लाल), 66 = 102 (हरा), 00 = 0 (नीला)। एकमात्र अंतर संकेतन का है। CSS स्टाइलशीट में HEX अधिक संक्षिप्त है, जबकि RGB को प्रोग्रामेटिक रूप से संशोधित करना आसान है क्योंकि प्रत्येक चैनल पहले से ही एक दशमलव पूर्णांक है।
मुझे HEX या RGB की जगह HSL कब उपयोग करना चाहिए?
HSL रंगत (रंग स्वयं) को संतृप्ति और चमक से अलग करता है। इससे छाया रूपांतर बनाना आसान हो जाता है: रंगत स्थिर रखें, गहरी छाया के लिए चमक घटाएँ, हल्की आभा के लिए बढ़ाएँ। जो डिज़ाइन सिस्टम एकल आधार रंग से हल्की/गहरी थीम बनाते हैं, वे अक्सर इसी कारण HSL में टोकन संग्रहीत करते हैं। CSS कस्टम प्रॉपर्टी भी HSL के साथ अच्छी तरह काम करती हैं क्योंकि आप अलग-अलग चैनल ओवरराइड कर सकते हैं।
WCAG 2.1 टेक्स्ट के लिए कितना कंट्रास्ट अनुपात आवश्यक करता है?
WCAG 2.1 लेवल AA के लिए सामान्य टेक्स्ट (18pt या 14pt बोल्ड से कम) के लिए न्यूनतम 4.5:1 और बड़े टेक्स्ट (18pt+ या 14pt+ बोल्ड) के लिए 3:1 कंट्रास्ट अनुपात जरूरी है। लेवल AAA इन सीमाओं को क्रमशः 7:1 और 4.5:1 तक बढ़ाता है। ये अनुपात WCAG 2.1 success criterion 1.4.3 में परिभाषित फॉर्मूले से foreground और background रंगों की relative luminance के आधार पर कैलकुलेट होते हैं।
CSS कितने नामित रंगों का समर्थन करता है?
CSS 148 नामित रंग परिभाषित करता है, जो SVG 1.1 और CSS3 रंग विशिष्टताओं से विरासत में मिले हैं। ये लाल, नीला और सफेद जैसे सामान्य नामों से लेकर MediumSlateBlue, PapayaWhip और LavenderBlush जैसे विशिष्ट नामों तक हैं। नामित रंग निश्चित RGB मानों से मैप होते हैं। CSS Color Level 4 विशिष्टता उन्हीं 148 नामों को बनाए रखती है और नए नाम नहीं जोड़ती। ब्राउज़र transparent कीवर्ड (rgba(0,0,0,0) के समतुल्य) को भी पहचानते हैं।
क्या आज CSS में OKLCH रंगों का उपयोग किया जा सकता है?
हाँ। oklch() फ़ंक्शन Chrome 111+, Firefox 113+ और Safari 15.4+ में समर्थित है। OKLCH, W3C द्वारा प्रकाशित CSS Color Level 4 विशिष्टता का भाग है। HSL की तुलना में इसका मुख्य लाभ अवधारणात्मक एकरूपता है: OKLCH में समान चमक मान वाले दो रंग वास्तव में मानव आँख को समान रूप से चमकदार दिखते हैं, जो HSL के लिए सत्य नहीं है। यह OKLCH को सुसंगत अनुभूत चमक के साथ सुलभ रंग पट्टियाँ बनाने के लिए बेहतर विकल्प बनाता है।
HSL और HSV में क्या अंतर है?
HSL और HSV दोनों रंगत को कोण के रूप में उपयोग करके बेलनाकार प्रस्तुति का उपयोग करते हैं, लेकिन वे चमक को अलग-अलग परिभाषित करते हैं। HSL में, 50% चमक शुद्ध रंग है; 0% काला है, 100% सफेद है। HSV में, 100% मान शुद्ध रंग है; 0% काला है। HSV में संतृप्ति घटाए बिना सफेद रंग प्राप्त करने का कोई अंतर्निर्मित तरीका नहीं है। डिज़ाइनर और रंग चयनकर्ता (Photoshop, Figma) आमतौर पर HSV उपयोग करते हैं, जबकि CSS मूल रूप से HSL का उपयोग करता है।
किसी भी HEX रंग के लिए Tailwind क्लास कैसे खोजें?
Tailwind CSS लगभग 220 रंग क्लास (22 रंगत गुणा 10 छाया प्रत्येक, साथ ही काला, सफेद और पारदर्शी) की एक निश्चित रंग पट्टी के साथ आता है। किसी दिए गए HEX मान के लिए निकटतम क्लास खोजने के लिए, आप एक अवधारणात्मक रंग स्थान (जैसे CIELAB या OKLCH) में अपने रंग और प्रत्येक Tailwind नमूने के बीच यूक्लिडीय दूरी की गणना करते हैं। ToolDeck का Tailwind Color Finder यह स्वचालित रूप से करता है और रंग अंतर के साथ सबसे करीबी मिलान दर्शाता है ताकि आप निर्णय कर सकें कि अनुमान पर्याप्त है या नहीं।
क्या किसी ऑनलाइन टूल में गोपनीय ब्रांड रंग चिपकाना सुरक्षित है?
यह टूल पर निर्भर करता है। जो भी टूल आपका इनपुट किसी सर्वर को भेजता है, वह उन मानों को नेटवर्क ट्रैफ़िक और सर्वर लॉग में उजागर करता है। ToolDeck के रंग टूल पूरी तरह आपके ब्राउज़र में क्लाइंट-साइड JavaScript का उपयोग करके चलते हैं। कोई HTTP अनुरोध आपके रंग डेटा को किसी बैकएंड तक नहीं ले जाता। आप टूल उपयोग करते समय अपने ब्राउज़र के Network टैब को खोलकर इसे सत्यापित कर सकते हैं। अधिकतम सावधानी के लिए, प्रारंभिक पेज लोड के बाद टूल को ऑफ़लाइन भी उपयोग किया जा सकता है।