कलर पिकर ऑनलाइन
रंग चक्र पर एक रंग चुनें, संतृप्ति कैनवास पर उसे फ़ाइन-ट्यून करें, और उसे अपनी प्रोजेक्ट की हर ज़बान में वापस पढ़ें — #RRGGBB से लेकर oklch() तक। यह पिकर वे हिस्से भी करता है जो बाकी टूल छोड़ देते हैं: तीन व्हील ज्योमेट्री जिनमें पेंटर वाला RYB व्हील भी शामिल है, हार्मनी ओवरले जो आपके लिए पैलेट बना देते हैं, एक अल्फा चैनल, और पूरे पैलेट को CSS वेरिएबल, SCSS या JSON के रूप में एक क्लिक में एक्सपोर्ट करने की सुविधा। यह सब आपके ब्राउज़र में ही लोकल रूप से कैलकुलेट होता है।
एक नहीं, तीन व्हील
व्हील मोड सिलेक्टर व्हील की पूरी ज्योमेट्री बदल देता है:
- HSV और HSL डिजिटल व्हील हैं — रंग उसी तरह बँटे हैं जैसे RGB स्क्रीन लाइट मिलाती हैं। ये इस बात में अलग हैं कि स्क्वेयर कैनवास कैसे बर्ताव करता है: HSV में सबसे चमकीला कोना शुद्ध रंग होता है, HSL शुद्ध रंगों को 50% लाइटनेस पर रखता है और ऊपर सफ़ेद होता है।
- RYB (चित्रकार) रंगों को वैसे ही सजाता है जैसे कलाकार सीखते हैं: लाल, पीला और नीला प्राइमरी रंग, और बीच में नारंगी, हरा और बैंगनी। इसकी असली अहमियत हार्मनी में दिखती है — RYB व्हील पर लाल का पूरक हरा है और नीले का पूरक नारंगी है, वही क्लासिक पिगमेंट जोड़े, जबकि डिजिटल व्हील लाल को सायन के साथ जोड़ता है। अगर किसी सामान्य पिकर का “पूरक” पैलेट कभी आपकी आँखों को गलत लगा हो, तो वजह यही है।
हार्मनी जो आपके लिए पैलेट बना देती हैं
रंग सामंजस्य के नीचे कोई नियम चुनें और व्हील साथी रंगों को चिह्नित कर देता है, जो तुरंत तैयार पैलेट के रूप में दिखते हैं:
- पूरक — एक विपरीत रंग। सबसे तेज़ कंट्रास्ट; किसी डॉमिनेंट ब्रांड रंग के साथ एक अकेले एक्सेंट के लिए इस्तेमाल करें।
- स्प्लिट-पूरक — पूरक रंग के दोनों पड़ोसी। लगभग उतना ही कंट्रास्ट, लेकिन बैलेंस करना काफ़ी आसान।
- त्रिकोणीय — बराबर दूरी पर तीन रंग। जीवंत मगर स्थिर; एक रंग को हावी रहने दें और बाकी दो को संयम से इस्तेमाल करें।
- चतुष्कोणीय (वर्ग) — चार रंग। इलस्ट्रेशन और डेटा विज़ुअलाइज़ेशन के लिए भरपूर स्कीम; UI काम में बैलेंस करना मुश्किल।
- सदृश — तुरंत पड़ोसी रंग। कम तनाव, बैकग्राउंड और ग्रेडिएंट के लिए अच्छा।
- एकवर्णी — अलग-अलग लाइटनेस में एक ही रंग। इंटरफ़ेस स्टेट्स (होवर, एक्टिव, डिसेबल्ड) के लिए सबसे सुरक्षित विकल्प।
पैलेट पैनल पूरे सेट को एक क्लिक में, आपके चुने फ़ॉर्मेट में कॉपी कर देता है: सादा HEX, RGB, HSL, OKLCH, तुरंत पेस्ट करने लायक CSS कस्टम प्रॉपर्टीज़ (--color-1: …), SCSS वेरिएबल या कोड को सौंपने के लिए JSON।
कुछ भी पेस्ट करें, सब कुछ पढ़ें
इनपुट फ़ील्ड लगभग हर रंग नोटेशन स्वीकार करते हैं: #f80, #ff8800, अल्फा वाला 8-अंकों का हेक्स, rgb() / rgba(), hsl(), hwb(), lch(), oklch(), oklab(), cmyk(), 0xFF8800, या rebeccapurple जैसे CSS रंग नाम। जो भी आए, सात सिंक किए हुए आउटपुट वापस मिलते हैं: HEX, RGB, HSL, HSV, LCH, OKLCH और CMYK, हर एक के साथ अपना कॉपी बटन।
प्रिव्यू के नीचे दो हेल्पर चिप्स रंग का नाम बता देते हैं: निकटतम CSS नाम वाला रंग (क्विक प्रोटोटाइप और रंगों के बारे में बात करने के लिए उपयोगी) और निकटतम Tailwind टोकन (जैसे orange-500), ताकि आप अपना कोई अलग वैल्यू बनाने की बजाय अपने डिज़ाइन सिस्टम के भीतर ही बने रहें।
प्रिव्यू के नीचे अपारदर्शिता (अल्फा) स्लाइडर खींचें और आउटपुट अपने पारदर्शी रूपों में बदल जाते हैं — #RRGGBBAA, rgba(), hsla() — प्रिव्यू एक चेकरबोर्ड के ऊपर दिखता है ताकि आप पारदर्शिता को आँख से जज कर सकें।
आपको कौन सा फ़ॉर्मेट इस्तेमाल करना चाहिए?
| फ़ॉर्मेट | पूरा नाम | कब उपयोग करें? |
|---|---|---|
| HEX | हेक्साडेसिमल | वेब का डिफ़ॉल्ट। कॉम्पैक्ट, हर जगह सपोर्टेड, कॉपी करना आसान। 8 अंक अल्फा जोड़ देते हैं। |
| RGB | रेड, ग्रीन, ब्लू | स्क्रीन जैसे सोचती हैं। तीन लाइट चैनल, 0–255। ज़्यादातर API और कैनवास कोड इसी फ़ॉर्मेट की उम्मीद रखते हैं। |
| HSL | ह्यू, सैचुरेशन, लाइटनेस | हाथ से एडिट करने वाले इंसानों के लिए। “थोड़ा हल्का” या “कम संतृप्त” — सिर्फ़ एक नंबर बदलना काफ़ी है। |
| HSV | ह्यू, सैचुरेशन, वैल्यू | ग्राफ़िक सॉफ़्टवेयर। Photoshop और GIMP के पिकर के पीछे यही मॉडल है। |
| LCH | लाइटनेस, क्रोमा, ह्यू | परसेप्चुअली यूनिफ़ॉर्म। बराबर न्यूमेरिक कदम बराबर विज़ुअल कदम जैसे दिखते हैं — जो HSL सिर्फ़ दिखावा करता है। |
| OKLCH | OK लाइटनेस, क्रोमा, ह्यू | आधुनिक CSS की पसंद। LCH की नीले रंगों वाली ह्यू शिफ़्ट की गड़बड़ी ठीक करता है; सभी मौजूदा ब्राउज़र सपोर्ट करते हैं और डिज़ाइन-टोकन सिस्टम के लिए आदर्श है। |
| CMYK | सायन, मैजेंटा, यलो, की | प्रिंट ओरिएंटेशन। प्रिंट डिज़ाइनरों से बात करने के लिए एक अनुमानित रूपांतरण — असली वैल्यू हमेशा प्रिंटर की कलर प्रोफ़ाइल से आती हैं। |
छोटी चीज़ें जो समय बचाती हैं
- इतिहास ख़ुद संभल जाता है। आपने जिन आख़िरी 24 रंगों पर काम किया, वे पेज रीफ़्रेश के बाद भी बने रहते हैं — सिर्फ़ आपके ब्राउज़र के लोकल स्टोरेज में सेव, कहीं अपलोड नहीं होते।
- आईड्रॉपर। जिन ब्राउज़र में EyeDropper API है (Chrome और Edge) वहाँ आप स्क्रीन पर कहीं से भी, यहाँ तक कि ब्राउज़र विंडो के बाहर से भी, रंग उठा सकते हैं।
- कीबोर्ड कंट्रोल। व्हील और संतृप्ति कैनवास दोनों ऐरो-की से पिक्सेल-दर-पिक्सेल एडजस्टमेंट के लिए रिस्पॉन्ड करते हैं।
- प्रीसेट आम बेस रंगों को कवर करते हैं जब आपको बस एक जल्दी शुरुआती बिंदु चाहिए।
अक्सर पूछे जाने वाले प्रश्न (FAQ)
क्या प्रोडक्शन CSS में oklch() इस्तेमाल करना सुरक्षित है?
हाँ। Chrome, Edge, Firefox और Safari के सभी मौजूदा वर्ज़नoklch() को सपोर्ट करते हैं, और यह डिज़ाइन टोकन के लिए पसंदीदा नोटेशन बन चुका है (Tailwind CSS 4 अपना पूरा पैलेट इसी में डिफ़ाइन करता है)। बहुत पुराने ब्राउज़र के लिए, पिछली लाइन में HEX फ़ॉलबैक दें — यह टूल आपको दोनों वैल्यू देता है।