कलर पिकर ऑनलाइन
चक्र पर एक रंग चुनें, संतृप्ति और चमक वाली प्लेट पर उसे फ़ाइन-ट्यून करें, और उसे अपने प्रोजेक्ट में इस्तेमाल होने वाले हर फ़ॉर्मेट में पढ़ें, #RRGGBB से लेकर oklch() तक। यह टूल वे चीज़ें भी करता है जो बाकी कलर पिकर छोड़ देते हैं: तीन तरह के रंग चक्र जिनमें पारंपरिक चित्रकार वाला RYB भी शामिल है, हार्मनी नियम जो खुद पैलेट बना देते हैं, पारदर्शिता (अल्फा) और पूरी पैलेट को एक क्लिक में CSS वेरिएबल, SCSS या JSON के रूप में एक्सपोर्ट करने की सुविधा। सब कुछ आपके ब्राउज़र में ही कैलकुलेट होता है।
RYB या RGB? एक नहीं, तीन रंग चक्र
व्हील मोड स्विच चक्र पर रंगों के बंटवारे को बदल देता है:
- HSV और HSL डिजिटल चक्र हैं। रंग वैसे ही बँटे हैं जैसे स्क्रीन पर रोशनी उन्हें मिलाती है। ये स्क्वेयर प्लेट के व्यवहार में अलग हैं: HSV में सबसे चमकीला कोना शुद्ध रंग होता है, जबकि HSL शुद्ध रंगों को बीच की चमक पर रखता है और उनके ऊपर सफ़ेद।
- RYB (चित्रकार वाला) रंगों को उसी क्रम में रखता है जैसे चित्रकार सीखते हैं: लाल, पीला और नीला प्राथमिक रंग, और बीच में नारंगी, हरा और बैंगनी (देखें RYB रंग मॉडल, अंग्रेज़ी में)। फ़र्क़ सबसे ज़्यादा हार्मनी में दिखता है। RYB चक्र पर लाल का पूरक रंग हरा है और नीले का पूरक नारंगी, यानी वही क्लासिक जोड़े जो चित्रकला में सिखाए जाते हैं। डिजिटल चक्र लाल को सायन के साथ जोड़ता है। अगर सामान्य कलर पिकर की “पूरक” पैलेट कभी आपको गलत लगी हो, तो वजह यही है।
रंग हार्मनी: पैलेट जो खुद बन जाती है
रंग सामंजस्य फ़ील्ड में कोई नियम चुनें। चक्र साथी रंगों को चिह्नित करता है और नीचे तैयार पैलेट दिखती है:
- पूरक: एक विपरीत रंग। सबसे तेज़ कंट्रास्ट, मुख्य ब्रांड रंग के साथ एक अकेले एक्सेंट के लिए ठीक।
- स्प्लिट-पूरक: पूरक रंग के दोनों पड़ोसी। कंट्रास्ट लगभग उतना ही तेज़, पर बैलेंस करना आसान।
- त्रिकोणीय: चक्र पर बराबर दूरी के तीन रंग। जीवंत और फिर भी स्थिर, जब एक रंग हावी रहे और बाकी दो को संयम से इस्तेमाल करें।
- चतुष्कोणीय (वर्ग): चार रंग। इलस्ट्रेशन और चार्ट के लिए भरपूर स्कीम, ऐप के इंटरफ़ेस में बैलेंस करना मुश्किल।
- सदृश: सबसे नज़दीकी पड़ोसी रंग। बैकग्राउंड और ग्रेडिएंट के लिए शांत मिश्रण।
- एकवर्णी: अलग-अलग चमक में एक ही रंग। बटन की स्थितियों (होवर, एक्टिव, डिसेबल्ड) के लिए सबसे सुरक्षित विकल्प।
पूरी पैलेट को अपने चुने फ़ॉर्मेट में एक क्लिक में कॉपी करें: सादा HEX, RGB, HSL, OKLCH, पेस्ट के लिए तैयार CSS वेरिएबल (--color-1: …), SCSS वेरिएबल या कोड के लिए JSON। पैलेट के रंग उन लोगों के लिए भी कंट्रास्ट बनाए रखते हैं या नहीं जिन्हें रंग पहचानने में दिक्कत होती है, यह स्क्रीनशॉट लेकर ग्रेस्केल में बदलने के बाद झट से पता चल जाता है।
HEX, RGB, HSL, OKLCH और CMYK का रूपांतरण: कुछ भी डालें, सब कुछ पाएं
इनपुट फ़ील्ड लगभग हर रंग लिखावट स्वीकार करते हैं: #f80, #ff8800, पारदर्शिता वाला आठ अंकों का हेक्स, rgb() और rgba(), hsl(), hwb(), lch(), oklch(), oklab(), cmyk(), 0xFF8800 और rebeccapurple जैसे नामी CSS रंग। जो भी डालें, सात मेल खाते आउटपुट मिलते हैं: HEX, RGB, HSL, HSV, LCH, OKLCH और CMYK, हर एक के साथ अपना कॉपी बटन।
प्रिव्यू के नीचे अपारदर्शिता (अल्फा) स्लाइडर आउटपुट को पारदर्शी रूपों में बदल देता है: #RRGGBBAA, rgba() और hsla()। प्रिव्यू चेकरबोर्ड पर बनता है, इसलिए पारदर्शिता तुरंत नज़र आ जाती है।
किसी भी रंग का सबसे नज़दीकी Tailwind CSS टोकन
प्रिव्यू के नीचे दो लेबल रंग का नाम बताते हैं: सबसे नज़दीकी नामी CSS रंग (तेज़ प्रोटोटाइप के लिए काम का) और सबसे नज़दीकी Tailwind टोकन, जैसे orange-500। इस तरह आप अपने डिज़ाइन सिस्टम में ही रहते हैं और अलग से वैल्यू बनाने की ज़रूरत नहीं पड़ती। लेबल पर क्लिक करके उसे कॉपी करें।
यह उस सवाल का जवाब देता है जो हर डिज़ाइन हैंडऑफ़ में आता है: डिज़ाइनर ने हेक्स कोड भेजा, कौन-सी Tailwind क्लास इससे सबसे मेल खाती है? मैच Tailwind CSS 4 की डिफ़ॉल्ट पैलेट के मुकाबले निकाला जाता है (देखें Tailwind की डॉक्यूमेंटेशन, अंग्रेज़ी में), इसलिए टोकन को सीधे क्लास नाम में इस्तेमाल किया जा सकता है।
कौन सा रंग फ़ॉर्मेट इस्तेमाल करें?
| फ़ॉर्मेट | पूरा नाम | कब इस्तेमाल करें |
|---|---|---|
| HEX | Hexadecimal | वेब के लिए डिफ़ॉल्ट। छोटा, हर जगह सपोर्टेड, कॉपी करना आसान। आठ अंक पारदर्शिता जोड़ते हैं। |
| RGB | Red, Green, Blue | स्क्रीन ऐसे ही सोचती हैं। तीन लाइट चैनल, 0 से 255 तक। ज़्यादातर API और कैनवस कोड इसी की उम्मीद रखते हैं। |
| HSL | Hue, Saturation, Lightness | आंख से बदलाव के लिए। “थोड़ा हल्का” या “कम गहरा” यानी बस एक नंबर बदलना। |
| HSV | Hue, Saturation, Value | ग्राफ़िक सॉफ़्टवेयर। Photoshop और GIMP के कलर पिकर का आधार यही मॉडल है। |
| LCH | Lightness, Chroma, Hue | नज़र में एक जैसी दूरी। नंबर में बराबर कदम आंख को भी बराबर कदम जैसे दिखते हैं, जबकि HSL में यह सिर्फ़ दिखावा है। |
| OKLCH | OK Lightness, Chroma, Hue | CSS की आधुनिक पसंद। LCH में नीले रंगों में आने वाली गड़बड़ी ठीक करता है। सभी मौजूदा ब्राउज़र सपोर्ट करते हैं और डिज़ाइन टोकन के लिए ठीक है। |
| CMYK | Cyan, Magenta, Yellow, Key | प्रिंट के लिए दिशा। प्रिंटर से बात करने के लिए अनुमानित रूपांतरण, आख़िरी वैल्यू उसकी कलर प्रोफ़ाइल तय करती है। |
OKLCH पुराने मॉडल से ज़्यादा नज़र में एक जैसा क्यों है, यह Oklab स्पेस बनाने वाले Björn Ottosson अपने मूल लेख में बताते हैं (अंग्रेज़ी में)। सिंटैक्स और ब्राउज़र सपोर्ट MDN पर मिलता है (अंग्रेज़ी में)। प्रिंट मॉडल कैसे काम करता है, यह विकिपीडिया के CMYK लेख में समझाया गया है।
समय बचाने वाली छोटी चीज़ें
- इतिहास खुद सेव हो जाता है। आख़िरी 24 रंग पेज रीफ़्रेश के बाद भी रहते हैं। ये सिर्फ़ आपके ब्राउज़र के स्टोरेज में रहते हैं, कहीं भेजे नहीं जाते।
- आईड्रॉपर। जिन ब्राउज़र में EyeDropper API मिलता है (Chrome और Edge), वहां स्क्रीन पर कहीं से भी, यहां तक कि ब्राउज़र विंडो के बाहर से भी रंग चुना जा सकता है। फोटो या लोगो फ़ाइल से रंग चाहिए तो इमेज कलर पिकर इस्तेमाल करें।
- कीबोर्ड कंट्रोल। चक्र और संतृप्ति वाली प्लेट, दोनों ऐरो-की पर प्रतिक्रिया देते हैं, इसलिए रंग को छोटे-छोटे कदमों में ठीक किया जा सकता है।
- प्रीसेट आम बेस रंग देते हैं, जब बस एक तेज़ शुरुआत चाहिए।
अक्सर पूछे जाने वाले सवाल
OKLCH को HEX में कैसे बदलें?
oklch() वैल्यू को OKLCH फ़ील्ड में डालें, बाकी सभी आउटपुट, HEX सहित, तुरंत अपडेट हो जाते हैं। यह उल्टा भी चलता है: HEX डालें और उसके बराबर oklch() पढ़ें। एक बात ध्यान रखें: OKLCH sRGB के दायरे से बाहर के रंग भी बता सकता है, और वे रंग sRGB जितना दिखा सकता है उतने में सीमित कर दिए जाते हैं। इसलिए बहुत गहरा oklch() वाइड-गैमट डिस्प्ले पर अपने HEX रूप जैसा नहीं दिखेगा।
क्या प्रोडक्शन CSS में oklch() इस्तेमाल करना सुरक्षित है?
हां। Chrome, Edge, Firefox और Safari के सभी मौजूदा वर्शनoklch() को सपोर्ट करते हैं, और यह डिज़ाइन टोकन के लिए लोकप्रिय लिखावट बन चुका है (Tailwind CSS 4 अपनी पूरी पैलेट इसी में तय करता है)। बहुत पुराने ब्राउज़र के लिए, उससे पहले वाली लाइन में HEX फ़ॉलबैक रखें। यह टूल आपको दोनों वैल्यू देता है।