कलर पैलेट निकालने वाला

कलर पैलेट निकालने वाला क्या है?#

हर चित्र कुछ रंगों का एक छोटा समूह लिए होता है जो अधिकांश काम करते हैं — किसी लोगो का ब्रांड नीला, किसी उत्पाद शॉट के गर्म तटस्थ रंग, किसी चित्रकला का द्वि-टोन पैलेट। एक पैलेट निकालने वाला उन प्रतिनिधि रंगों को स्वतः बाहर निकालता है ताकि आप उन्हें पुनः उपयोग कर सकें: मिलता-जुलता UI थीम बनाएँ, ऐसा बटन रंग चुनें जो टकराता न हो, CSS चर उत्पन्न करें, या बस समझें कि कौन-से स्वॉच वास्तव में किसी छवि पर हावी हैं बनाम जिन्हें आपकी आँख महत्वपूर्ण मानती है।

यह पृष्ठ मध्यिका-कट कलर परिमाणीकरण पूरी तरह आपके ब्राउज़र में चलाता है। आप एक छवि लोड करते हैं, इसे कार्य करने योग्य नमूना आकार तक डाउनस्केल किया जाता है, हर पिक्सेल पढ़ा जाता है, और एल्गोरिदम बार-बार रंग स्थान को उसके सबसे चौड़े चैनल के साथ तब तक विभाजित करता है जब तक आपके माँगे Top-N स्वॉच (2–16) न मिल जाएँ। आपको हर रंग अपनी छवि में हिस्से सहित एक स्वॉच के रूप में मिलता है, साथ ही सीधा औसत रंग, HEX सूची, CSS-चर फ़ाइल, या संरचित JSON के रूप में निर्यात योग्य।

इसका उपयोग कैसे करें#

1. कोई छवि डैश वाले छोड़ें क्षेत्र पर खींचें (या फ़ाइल चुनने हेतु उस पर क्लिक करें)। PNG, JPEG, और WebP सभी काम करते हैं; पारदर्शी PNG सही ढंग से संभाली जाती हैं क्योंकि पारदर्शी पिक्सेल गिनने से पहले छोड़ दिए जाते हैं।
2. रंगों की संख्या स्लाइडर (2–16) खींचें ताकि कितने प्रतिनिधि रंग निकालने हैं चुनें। संतुलित पैलेट हेतु छह एक अच्छा डिफ़ॉल्ट है; दो या तीन प्रमुख युग्म को अलग करते हैं।
3. दाईं ओर स्वॉच सूची पढ़ें: हर पंक्ति रंग, उसके HEX/RGB/HSL मान, और नमूना पिक्सेल का प्रतिशत जो उस बाल्टी में आया दिखाती है, सबसे-प्रमुख पहले क्रमबद्ध। कॉपी करने हेतु किसी भी मान पर क्लिक करें।
4. साइडबार में औसत रंग कार्ड देखें हर पिक्सेल का सीधा माध्य हेतु — उपयोगी जब आपको क्रमबद्ध पैलेट से अधिक एक समग्र पृष्ठभूमि टोन चाहिए।
5. एक डाउनलोड प्रारूप चुनें:
   • HEX सूची (.txt) — प्रति पंक्ति एक #RRGGBB, प्रमुख पहले। सीधे डिज़ाइन टूल में चिपकाएँ।
   • CSS चर (.css) — एक :root { --palette-1: …; …; --palette-avg: …; } ब्लॉक जिसे आप स्टाइलशीट में डाल सकते हैं।
   • JSON (.json) — hex, rgb, count, और share सहित संरचित स्वॉच, साथ ही औसत और नमूना मेटाडेटा।
6. फ़ाइल सहेजने हेतु पैलेट डाउनलोड करें क्लिक करें।

मुख्य विशेषताएँ#

• मध्यिका-कट परिमाणीकरण, स्वयं लिखित। वही एल्गोरिदम परिवार जो पेशेवर छवि टूल उपयोग करते हैं, आपके टैब में चलता है: सबसे चौड़े चैनल के साथ मध्यिका पर विभाजित करें, माँगे गए गणन तक नहीं पहुँचता वर्तमान-सबसे-चौड़े बॉक्स पर दोहराएँ।
• ईमानदार हिस्सा संख्या। हर स्वॉच वास्तविक भिन्न लिए होता है जो वह नमूना पिक्सेल का प्रतिनिधि है, इसलिए “प्रमुख” का अर्थ क्षेत्रफल से प्रमुख है, अनुमान से नहीं।
• औसत प्रमुख से अलग रखा। सीधा पिक्सेल माध्य क्रमबद्ध पैलेट के साथ रिपोर्ट किया जाता है — दो भिन्न प्रश्न एक ही पास में उत्तर।
• पारदर्शी पिक्सेल छोड़े गए। एक छोटे थ्रेशोल्ड से नीचे का alpha बाहर रखा जाता है, इसलिए पारदर्शी PNG वह रंग रिपोर्ट करती है जो वास्तव में बनाए गए हैं, पारदर्शिता के साथ कोई कीचड़-जैसा मिश्रण नहीं।
• तीन निर्यात आकार। डिज़ाइन टूल हेतु HEX सूची, स्टाइलशीट हेतु CSS चर, प्रोग्राम हेतु JSON — सभी उसी स्वॉच से उत्पन्न जो आप देखते हैं।
• 100% स्थानीय। छवि ब्राउज़र द्वारा डिकोड और नमूना की जाती है। कोई अपलोड नहीं।

विस्तृत उदाहरण#

एक ब्रांड लोगो छोड़ें जो सफ़ेद पृष्ठभूमि पर गहरा कॉर्पोरेट नीला है जिसमें एक छोटा एक्सेंट है — मान लीजिए नीला canvas का लगभग 60% भरता है। रंगों की संख्या 4 पर सेट करने पर, एक सामान्य निष्कर्षण कुछ ऐसा दिखता है:

#1D4ED8   58.4%   rgb(29, 78, 216)    hsl(224, 76%, 48%)
#FFFFFF   31.2%   rgb(255, 255, 255)  hsl(0, 0%, 100%)
#172554   7.1%    rgb(23, 37, 84)     hsl(224, 57%, 21%)
#93C5FD   3.3%    rgb(147, 197, 253)  hsl(217, 95%, 78%)

प्रमुख स्वॉच लगभग 58% पर ब्रांड नीला है, सफ़ेद दूसरे। दो अतिरिक्त नीले ध्यान दें — एक गहरा शेड और एक हल्का टिंट — जो एल्गोरिदम इसलिए पाया क्योंकि वे किसी मध्यिका सीमा को पार करते हैं; ये बिल्कुल वही रंग हैं जिन्हें आप होवर स्थिति और छाया हेतु पुनः उपयोग करेंगे। CSS चर रूप में निर्यात करें और आपको एक ड्रॉप-इन थीम मिलता है:

:root {
  --palette-1: #1D4ED8;
  --palette-2: #FFFFFF;
  --palette-3: #172554;
  --palette-4: #93C5FD;
  --palette-avg: #5A7BCB;
}

--palette-avg हर पिक्सेल का सीधा माध्य है — एक मद्धम मध्य-नीला जो ब्रांड की ओर झुके पृष्ठभूमि टिंट के रूप में अच्छा काम करता है।

अक्सर पूछे जाने वाले प्रश्न#

प्रतिशत ठीक 100% तक नहीं जोड़ते।#

इन्हें प्रदर्शन हेतु पूर्णांकित किया जाता है (अंतर्निहित मान JSON निर्यात में चार दशमलव स्थानों तक सटीक हैं)। एक छोटा अवशिष्ट पारदर्शी पिक्सेल के गिनने से पहले छोड़े जाने से भी आता है, इसलिए कुल केवल उन अपारदर्शी पिक्सेल को दर्शाता है जो वास्तव में नमूना किए गए।

मुझे माँगे से कम स्वॉच मिलते हैं।#

मध्यिका-कट जल्दी रुक जाता है जब हर शेष रंग बॉक्स ठोस हो (सभी चैनलों पर परास शून्य) — वास्तव में विभाजित करने हेतु कुछ बचा ही नहीं। 3-रंग छवि पर 8 रंग माँगने पर 3 मिलते हैं, 8 गढ़े हुए नहीं।

औसत रंग प्रमुख से इतना भिन्न क्यों है?#

वे भिन्न प्रश्नों का उत्तर देते हैं। प्रमुख रंग सबसे अधिक बार आने वाली बाल्टी है; औसत हर पिक्सेल का अंकगणितीय माध्य है, जिसे कुछ बड़े लेकिन भिन्न-रंग के क्षेत्र सबसे अधिक बार मान से दूर खींच सकते हैं। आधा-लाल, आधा-हरा छवि का औसत भूरा होता है लेकिन प्रमुख भूरा नहीं — दोनों संख्याएँ सही हैं।

क्या यह फ़ोटो पर काम करता है, या केवल समतल ग्राफ़िक्स पर?#

दोनों पर। समतल ग्राफ़िक्स साफ़, अच्छी तरह अलग स्वॉच देते हैं; फ़ोटो अधिक ग्रेडेड समूह देते हैं क्योंकि वास्तविक टोन कई निकटवर्ती रंगों में फैलते हैं। किसी फ़ोटो हेतु, समृद्ध परास पकड़ने हेतु रंगों की संख्या 8–12 तक बढ़ाएँ।