इमेज कलर पिकर और पैलेट
इमेज कलर पिकर और पैलेट
इमेज से रंग चुनने के लिए क्लिक करें, डॉमिनेंट कलर और पैलेट ऑटो-एक्सट्रैक्ट करें, HEX/RGB कॉपी और CSS वेरिएबल एक्सपोर्ट करें। PNG, JPG/JPEG, WebP, AVIF, HEIC/HEIF सपोर्टेड।
इमेज यहां ड्रैग एंड ड्रॉप करें या क्लिक करके सेलेक्ट करें
PNG / JPG / JPEG / WebP / AVIF / HEIC / HEIF सपोर्टेड
🚀 क्विक स्टार्ट
- इमेज इम्पोर्ट करें: ड्रैग एंड ड्रॉप या क्लिक करके सेलेक्ट करें
- पैनल स्विच: डेस्कटॉप साइड पैनल दिखाता है; मोबाइल नीचे बटन टैप करें
- क्लिक करके चुनें: इमेज पर कहीं भी क्लिक करके उस पिक्सल का रंग पाएं
- रंग कॉपी करें: चुनने के बाद HEX/RGB/CSS फॉर्मेट कॉपी करें
- रंग संख्या सेट करें: स्लाइडर ड्रैग करें या प्रीसेट क्लिक करें (4/6/8/12/16/24/32)
- पैलेट एक्सट्रैक्ट करें: डॉमिनेंट कलर लिस्ट पाने के लिए एक्सट्रैक्ट बटन क्लिक करें
- CSS एक्सपोर्ट करें: एक्सट्रैक्शन के बाद CSS वेरिएबल फाइल एक्सपोर्ट करें
- JSON एक्सपोर्ट करें: एक्सट्रैक्शन के बाद JSON डेटा फाइल एक्सपोर्ट करें
- रीसेट: वर्तमान इमेज और परिणाम साफ़ करें
📌 सामान्य उपयोग के मामले
- डिज़ाइन/पोस्टर कलर पिकिंग: कलर स्कीम के लिए प्राइमरी और एक्सेंट कलर एक्सट्रैक्ट करें
- थीम/डिज़ाइन सिस्टम: प्रोजेक्ट के लिए CSS वेरिएबल या JSON एक्सपोर्ट करें
- कंपोनेंट स्टाइलिंग: बटन, टैग, चार्ट के लिए मैचिंग कलर एक्सट्रैक्ट करें
- ब्रांड कंसिस्टेंसी: ब्रांड एसेट्स से स्टैंडर्ड कलर पैलेट एक्सट्रैक्ट करें
🎛️ कलर पिकर और पैलेट विकल्प
- रंग संख्या: 2–32, आमतौर पर 8/12; फोटो/ग्रेडिएंट्स 16–32 सुझाव
- प्रीसेट बटन: 4/6/8/12/16/24/32 वन-क्लिक स्विच
- सॉर्टिंग: प्रतिशत द्वारा उच्च से निम्न, सबसे आम रंग पहले
- रंग के बगल में संख्या: इमेज में पिक्सल प्रतिशत दिखाता है
🧭 उपयोग टिप्स
- समग्र प्रभाव देखने के लिए 8/12 से शुरू करें, फिर आवश्यकतानुसार 16/24/32 तक बढ़ाएं
- प्रोजेक्ट में उपयोग करते समय --color-1 को सिमेंटिक नामों में बदलें (जैसे, --color-primary)
- बड़ी इमेज एक्सट्रैक्ट करते समय पेज फोरग्राउंड में रखें ताकि ब्राउज़र थ्रॉटलिंग से बचें
⚠️ सीमाएं और संगतता
- सिंगल फाइल लिमिट 128MB, बहुत बड़ी इमेज स्लोडाउन का कारण बन सकती हैं
- पैलेट एक्सट्रैक्शन परफॉर्मेंस के लिए ऑटो-डाउनसैंपल करता है, परिणाम रिप्रेजेंटेटिव कलर हैं
- HEIC/HEIF डीकोडिंग ब्राउज़र सपोर्ट पर निर्भर, फेल होने पर JPG/PNG में कन्वर्ट करें
- ट्रांसपेरेंट पिक्सल को नजरअंदाज किया जाता है या वास्तविक RGBA के रूप में प्रोसेस किया जाता है
🔒 गोपनीयता और सुरक्षा
- सारी प्रोसेसिंग ब्राउज़र में होती है; डेटा कभी डिवाइस नहीं छोड़ता
❓ अक्सर पूछे जाने वाले प्रश्न
एक्सपोर्टेड CSS फाइल कैसे इस्तेमाल करें?
एक्सपोर्टेड :root { --color-1: ... } को ग्लोबल CSS में डालें, फिर var(--color-1) से रेफर करें।
एक्सपोर्टेड JSON किसके लिए है?
स्क्रिप्ट/डिज़ाइन सिस्टम रीयूज के लिए, जैसे, Design Tokens या थीम कॉन्फिग जेनरेट करना। हर कलर में hex/css/rgb और count शामिल।
रंग संख्या कितनी अनुशंसित है?
जनरल UI: 8 या 12; मिनिमल आइकन: 4–6; फोटो/ग्रेडिएंट्स: 16–32। जल्दी तुलना के लिए प्रीसेट इस्तेमाल करें।
क्लिक-पिक्ड और पैलेट कलर अलग क्यों हैं?
क्लिक पिकिंग सिंगल पिक्सल पाता है; पैलेट पूरी इमेज को क्वांटाइज करता है जो ओवरऑल ट्रेंड पर जोर देता है।
एक्सपोर्ट बटन ग्रे क्यों है?
पहले 'पैलेट एक्सट्रैक्ट करें' बटन क्लिक करना होगा, एक्सट्रैक्शन पूरा होने के बाद एक्सपोर्ट उपलब्ध होगा।
एक्सपोर्टेड फाइलनेम कैसे जेनरेट होता है?
डिफ़ॉल्ट ओरिजिनल फाइलनेम (बिना एक्सटेंशन) + .palette-काउंट + .css/.json इस्तेमाल करता है, गैर-कानूनी कैरेक्टर ऑटो-क्लीन होते हैं।