यह कलर पिकर क्या कर सकता है
- इमेज* से कलर सैंपल करें या सटीक कलर व्हील या HEX/RGB इनपुट से शुरू करें
- समृद्ध कन्वर्ज़न: HEX, HEX8, RGB/A, HSL/A, HSV, CMYK, XYZ, LAB, LCH
- #000000 और #FFFFFF के विरुद्ध रिलेटिव ल्यूमिनेंस का उपयोग करते हुए अंतर्निर्मित WCAG कॉन्ट्रास्ट चेकर
- वेब-सुरक्षित और शॉर्टहैंड HEX सुझाव जब लागू हो
- कलर हार्मनी: कॉम्प्लीमेंट, ट्रायडिक, टेट्राडिक, एनालॉगस, मोनोक्रोम (ह्यू रोटेशन के माध्यम से गणना)
- कॉन्ट्रास्ट समस्याओं का अनुमान लगाने के लिए ल्यूमिनेंस और प्रतीत होने वाली चमक का पूर्वावलोकन
- निकटतम RGB दूरी के आधार पर अनुमानित पैंटोन-जैसा मिलान (कैश्ड डेटासेट के साथ)
- विश्लेषण क्लाइंट-साइड चलता है; केवल न्यूनतम डेटा का उपयोग होता है जब वैकल्पिक पैंटोन लुकअप सक्षम हो
🔧 कलर पिकर का उपयोग कैसे करें for color-picker
1. एक बेस कलर चुनें या पिक करें
HEX मान पेस्ट करें, RGB/HSL टाइप करें, या इमेज या व्हील से कलर लेने के लिए पिकर का उपयोग करें। टूल इसे आंतरिक रूप से सुरक्षित HEX मान में सामान्य करता है।
2. ह्यू और लाइटनेस को ठीक करें
ह्यू, सैचुरेशन और लाइटनेस को तब तक समायोजित करें जब तक स्वैच सही न दिखे। एक बड़ा पूर्वावलोकन संदर्भ के लिए हल्की और गहरी सतहों पर कलर दिखाता है।
3. आवश्यक फॉर्मेट पढ़ें और कॉपी करें
HEX, HEX8, RGB, RGBA, HSL, HSLA, HSV, CMYK, XYZ, LAB और LCH को एक क्लिक में कॉपी करें। उन्हें CSS वेरिएबल्स, डिज़ाइन टोकन या हैंडऑफ नोट्स के लिए उपयोग करें।
4. WCAG कॉन्ट्रास्ट जाँचें
sRGB ल्यूमिनेंस के आधार पर #000000 और #FFFFFF के विरुद्ध कॉन्ट्रास्ट रेशियो देखें। परिणामों का उपयोग त्वरित निर्णय लेने के लिए करें कि कोई कलर बॉडी टेक्स्ट, बड़े टाइटल या UI एलिमेंट्स के लिए काम करता है या नहीं।
5. हार्मनी जेनरेट करें और पैलेट बनाएं
ह्यू रोटेशन के माध्यम से जेनरेट किए गए कॉम्प्लीमेंटरी, ट्रायडिक, टेट्राडिक, एनालॉगस और मोनोक्रोम कलर एक्सप्लोर करें। अपने पसंदीदा को पैलेट/इतिहास में जोड़ें और उन्हें टोकन के रूप में एक्सपोर्ट करें।
तकनीकी विवरण
इनपुट हैंडलिंग और सामान्यीकरण
टूल हेक्साडेसिमल कलर कोड स्वीकार करता है और उन्हें आंतरिक संदर्भ के रूप में सामान्यीकृत 6-अंकीय HEX में कन्वर्ट करता है।
| पहलू | व्यवहार | टिप्पणियाँ |
|---|---|---|
| HEX सामान्यीकरण | 3-अंकीय और 6-अंकीय HEX, वैकल्पिक अग्रणी # | लघु HEX (जैसे #0f8) को #00ff88 में विस्तारित किया जाता है; गैर-हेक्स वर्ण हटा दिए जाते हैं। |
| HEX8 समर्थन | RGBA #RRGGBBAA के माध्यम से | अल्फा चैनल को 0–255 में परिवर्तित करके चौथे बाइट के रूप में जोड़ा जाता है। |
| वेब-सुरक्षित सुझाव | प्रति चैनल निकटतम 51-चरण पर स्नैप करें | मानों को 51 (0, 51, 102, 153, 204, 255) के निकटतम गुणज में पूर्णांकित किया जाता है। |
| संक्षिप्त HEX सुझाव | केवल जब संपीड़ित किया जा सके | तब दिखाया जाता है जब HEX अंकों के प्रत्येक जोड़े की पुनरावृत्ति होती है (जैसे #112233 → #123)। |
रंग स्थान और रूपांतरण
सभी गणनाएँ D65 संदर्भ श्वेत के साथ sRGB पर आधारित हैं।
| स्थान | गणना | उपयोग |
|---|---|---|
| RGB | सामान्यीकृत HEX से (0–255 प्रति चैनल) | रूपांतरणों के लिए आधार प्रतिनिधित्व। |
| HSL / HSV | sRGB से मानक बेलनाकार रूपांतरण | सहज संपादन और सामंजस्य गणनाओं के लिए उपयोग किया जाता है। |
| CMYK | डिवाइस-स्वतंत्र अनुमान | 1−max(R,G,B) के रूप में गणना, 0–100% घटकों के साथ; ICC प्रोफाइलों से संबद्ध नहीं। |
| XYZ | D65 मैट्रिक्स का उपयोग करके रैखिक sRGB → XYZ | LAB/LCH और गहन विश्लेषण के लिए मध्यवर्ती स्थान। |
| LAB | XYZ से CIE L*a*b* | अवधारणात्मक रूप से अधिक समान मीट्रिक स्थान। |
| LCH | LAB से CIE L*C*h° | ह्यू/क्रोमा/लाइटनेस समायोजन और अवधारणात्मक पैलेट डिजाइन के लिए उपयोगी। |
ल्यूमिनेंस और WCAG कंट्रास्ट
कंट्रास्ट की गणना मानक WCAG सापेक्ष ल्यूमिनेंस सूत्र का उपयोग करके की जाती है।
| पहलू | विवरण | टिप्पणियाँ |
|---|---|---|
| सापेक्ष चमक | रैखिक sRGB (Y घटक) से गणना की गई | 0.2126R + 0.7152G + 0.0722B गुणांकों का उपयोग करता है। |
| कंट्रास्ट अनुपात | (L1 + 0.05) / (L2 + 0.05) | टूल #000000 और #FFFFFF के विरुद्ध कंट्रास्ट रिपोर्ट करता है। |
| WCAG सीमाएँ | सामान्य और बड़े पाठ के लिए AA/AAA | सामान्य सीमाएँ: 4.5:1 (AA सामान्य), 3:1 (AA बड़ा), 7:1 (AAA सामान्य), 4.5:1 (AAA बड़ा)। |
सामंजस्य और व्युत्पन्न रंग
सामंजस्य HSL में सरल ह्यू रोटेशन के रूप में उत्पन्न होते हैं, जो संतृप्ति और हल्कापन बनाए रखते हैं।
| सामंजस्य | नियम | उदाहरण |
|---|---|---|
| पूरक | +180° ह्यू | रंग पहिया पर विपरीत बिंदु। |
| त्रिगुण | ±120° ह्यू | तीन समान रूप से फैले रंग। |
| चतुर्गुण | +90°, +180°, +270° ह्यू | पहिया पर एक आयत बनाने वाले चार रंग। |
| समरूप | −30° / +30° ह्यू | आधार रंग के आसपास के पड़ोसी। |
| मोनोक्रोम | L में हल्का/गहरा करें | एक ही ह्यू के उज्जवल और गहरे संस्करण। |
पैंटोन-जैसा मिलान (अनुमानित)
जब पैंटोन डेटासेट उपलब्ध होता है, तो टूल RGB स्पेस में निकटतम मिलान की गणना करता है।
| पहलू | व्यवहार | टिप्पणियाँ |
|---|---|---|
| डेटासेट लोडिंग | कैश्ड + एसिंक लोडिंग getPantoneColors / getPantoneColorsCached के माध्यम से | कैश गर्म होने पर UI तुरंत मिलान दिखा सकता है, या छोटे एसिंक लोड के बाद। |
| मिलान मीट्रिक | RGB (0–255) पर वर्गित यूक्लिडियन दूरी | तेज़, सरल अनुमान; यह एक अवधारणात्मक ΔE* मीट्रिक नहीं है। |
| आउटपुट | पैंटोन-जैसा आईडी और नाम | केवल मार्गदर्शन के लिए प्रदर्शित; कोई आधिकारिक पैंटोन मैपिंग नहीं है। |
प्रदर्शन और गोपनीयता
रूपांतरण, ल्यूमिनेंस, कंट्रास्ट और हार्मोनियाँ पूरी तरह से क्लाइंट-साइड पर गणना की जाती हैं। पैंटोन लुकअप कॉन्फ़िगरेशन के आधार पर स्थानीय या दूरस्थ डेटासेट से परामर्श कर सकता है, लेकिन कच्चे रंग साधारण HEX स्ट्रिंग्स ही रहते हैं जब तक कि आप उन्हें स्पष्ट रूप से साझा या निर्यात नहीं करते।
लोकप्रिय उपयोग के मामले
UI/UX और फ्रंट-एंड
- बटन, लिंक और टेक्स्ट के लिए सुलभ फोरग्राउंड/बैकग्राउंड जोड़े बनाएं।
- चुने गए रंगों से सीधे CSS वेरिएबल्स और डिज़ाइन टोकन निर्यात करें।
- थीम स्विचर लागू करने से पहले लाइट/डार्क मोड के लिए कंट्रास्ट जांचें।
/* CSS रंग टोकन */
:root {
--brand: #4caf50;
--brand-rgb: 76, 175, 80;
--on-brand: #0b0b0b;
}
.button-primary {
background-color: var(--brand);
color: var(--on-brand);
}ब्रांडिंग और विजुअल आइडेंटिटी
- एक ही हीरो रंग से प्राथमिक/द्वितीयक/एक्सेंट पैलेट प्राप्त करें।
- लोगो या उत्पाद लाइन के लिए पूरक या त्रिगुणी विकल्पों का अन्वेषण करें।
- ब्रांड गाइडलाइन तैयार करने से पहले अनुमानित पैंटोन-जैसा नामकरण प्राप्त करें।
डेटा विज़ुअलाइज़ेशन और डैशबोर्ड
- ऐसी श्रृंखला रंग परिभाषित करें जो लाइट और डार्क दोनों बैकग्राउंड पर अलग-अलग दिखाई दें।
- नियंत्रित अवधारणात्मक चरणों के साथ पैलेट डिज़ाइन करने के लिए LAB/LCH का उपयोग करें।
- जल्दी से जांचें कि चार्ट रंग लीजेंड और लेबल में कंट्रास्ट अपेक्षाओं को पूरा करते हैं या नहीं।
❓ Frequently Asked Questions
HEX, RGB, HSL और HSV में क्या अंतर है?
CMYK मान अनुमानित क्यों दिखते हैं?
LAB और LCH किस लिए उपयोगी हैं?
कंट्रास्ट की गणना कैसे की जाती है?
क्या पैंटोन नाम सटीक हैं?
क्या आप मेरी छवियों या रंगों को संग्रहीत करते हैं?
Pro Tips
हमेशा हल्की और गहरी सतहों पर रंगों का पूर्वावलोकन करें; संदर्भ के साथ अनुभूत संतृप्ति और कंट्रास्ट नाटकीय रूप से बदल सकते हैं।
टिंट और शेड उत्पन्न करते समय एलएबी या एलसीएच का उपयोग करें ताकि चमक परिवर्तन मानव आँखों को अधिक समान लगे।
केवल डिफ़ॉल्ट बटन रंग के लिए ही नहीं, बल्कि सभी इंटरैक्टिव अवस्थाओं (होवर, सक्रिय, अक्षम) के लिए एए/एएएए कंट्रास्ट जांचें।
अपने घटकों में रंगों को सुसंगत रखने के लिए सीएसएस वेरिएबल या डिज़ाइन टोकन फॉर्मेट टैब से निर्यात करें।
छवियों से नमूना लेते समय, संपीड़न और एंटी-एलियासिंग से शोर कम करने के लिए एकल पिक्सेल के बजाय एक छोटे क्षेत्र पर औसत निकालें।
Additional Resources
Other Tools
- सीएसएस सुंदरीकरण
- एचटीएमएल सुंदरीकरण
- जावास्क्रिप्ट सुंदरीकरण
- पीएचपी सुंदरीकरण
- स्प्राइट एक्सट्रैक्टर
- बेस64 डिकोडर
- बेस64 एनकोडर
- सीशार्प फॉर्मेटर
- सीएसवी फॉर्मेटर
- Dockerfile Formatter
- एल्म फॉर्मेटर
- ईएनवी फॉर्मेटर
- गो फॉर्मेटर
- ग्राफक्यूएल फॉर्मेटर
- एचसीएल फॉर्मेटर
- आईएनआई फॉर्मेटर
- जेएसओएन फॉर्मेटर
- लेटेक्स फॉर्मेटर
- मार्कडाउन फॉर्मेटर
- ऑब्जेक्टिवसी फॉर्मेटर
- Php Formatter
- प्रोटो फॉर्मेटर
- पायथन फॉर्मेटर
- रूबी फॉर्मेटर
- रस्ट फॉर्मेटर
- स्काला फॉर्मेटर
- शेल स्क्रिप्ट फॉर्मेटर
- एसक्यूएल फॉर्मेटर
- SVG फॉर्मेटर
- Swift फॉर्मेटर
- TOML फॉर्मेटर
- Typescript Formatter
- XML फॉर्मेटर
- YAML फॉर्मेटर
- Yarn फॉर्मेटर
- सीएसएस मिनीफायर
- Html Minifier
- Javascript Minifier
- जेएसओएन मिनीफायर
- XML मिनिफायर
- एचटीटीपी हेडर्स दर्शक
- पीडीएफ से टेक्स्ट
- रेगेक्स परीक्षक
- एसईआरपी रैंक जांचकर्ता
- Whois लुकअप