इसका इस्तेमाल कैसे करें
- एक फ़ाइल चुनें पर क्लिक करें या छवि को बॉक्स पर छोड़ें। फोटो आपके डिवाइस पर पढ़ी जाती है।
- रंगों की संख्या 5 से 10 के बीच चुनें। भरी-पूरी फोटो को ज्यादा रंग चाहिए।
- हर रंग पढ़ें: उसका हेक्स कोड, RGB और HSL मान, और तस्वीर में उसका हिस्सा। किसी रंग के बगल के कॉपी बटन से उसका हेक्स कोड कॉपी करें।
- पैलेट निकालें में CSS वेरिएबल के रूप में कॉपी करें, सूची के रूप में कॉपी करें या रंग के नमूने डाउनलोड करें (PNG) इस्तेमाल करें।
रंग कैसे मिलते हैं
हर पिक्सल CIE L*a*b* में बदला जाता है, ऐसा रंग-स्थान जिसमें दो रंगों के बीच की दूरी लगभग उतनी होती है जितने वे आँख को अलग लगते हैं। फिर पिक्सल k-means क्लस्टरिंग से आपकी चुनी संख्या के समूहों में बाँटे जाते हैं, जो हर समूह का केंद्र इस तरह रखता है कि पिक्सल अपने केंद्र के जितने पास हो सकें।
शुरुआती केंद्र k-means++ विधि से चुने जाते हैं, एक तय seed के साथ, ताकि एक ही फोटो हमेशा एक ही पैलेट दे। हर रंग उसके समूह के पिक्सलों का औसत है, और उसका हिस्सा उन पिक्सलों की संख्या को सभी पिक्सलों से भाग देने पर।
पिक्सल → (L*, a*, b*)
समूह: हर पिक्सल सबसे नजदीक केंद्र में जुड़ता है; केंद्र उनके पिक्सलों के औसत होते हैं
रंग = समूह का औसत RGB; हिस्सा = समूह के पिक्सल ÷ सभी पिक्सल
- फोटो लगभग 2 मेगापिक्सल तक की प्रति के रूप में विश्लेषित होती है, जिससे बड़ी फोटो भी तेज रहती है।
- बहुत मिलते-जुलते शेड एक ही रंग में आ सकते हैं। 10 रंगों का पैलेट एक रंग को दो में बाँट सकता है, जब फोटो में उसके कई शेड हों।
कोड, हिस्से और उनका मतलब
हेक्स कोड रंग को लाल, हरे और नीले के लिए हेक्साडेसिमल के तीन जोड़ों में लिखता है; RGB मान वही संख्याएँ दशमलव में हैं। HSL रंग-छटा को चक्र पर कोण के रूप में देता है (0 लाल, 120 हरा, 240 नीला), संतृप्ति को उसकी ताकत के रूप में, और हल्केपन को कितना हल्का है।
हिस्सा वह अंश है जो तस्वीर के पिक्सलों में से किसी रंग के हैं, यानी वह कितना क्षेत्र घेरता है। एक छोटा, चमकीला धब्बा छोटे हिस्से वाला रंग हो सकता है, और एक बड़ी नरम पृष्ठभूमि एक बड़ा हिस्सा हो सकती है जो कई मिलते-जुलते शेडों से बनी हो।
- वेब पेज या डिज़ाइन में रंग इस्तेमाल करने के लिए CSS वेरिएबल कॉपी करें: हर रंग --color-1, --color-2 आदि बन जाता है।
- PNG पट्टी मूड बोर्ड या प्रिंट के लिए है: हर रंग का एक नमूना, नीचे उसका हेक्स कोड।
हल किया हुआ उदाहरण: लाल, नीले और हरे के ब्लॉक
50 लाल, 30 नीले और 20 हरे पिक्सलों की एक परीक्षण तस्वीर ठीक तीन रंग देती है, क्योंकि हर ब्लॉक एक सपाट रंग है। छह रंग माँगने पर भी टूल वही तीन लौटाता है, कोई गढ़े हुए रंग नहीं।
सूची सबसे बड़े हिस्से से क्रम में है, और हर कोड अपने ब्लॉक का ठीक रंग है।
| रंग | हेक्स | RGB | HSL | हिस्सा |
|---|---|---|---|---|
| लाल | #FF0000 | rgb(255, 0, 0) | hsl(0, 100%, 50%) | 50.0% |
| नीला | #0000FF | rgb(0, 0, 255) | hsl(240, 100%, 50%) | 30.0% |
| हरा | #00FF00 | rgb(0, 255, 0) | hsl(120, 100%, 50%) | 20.0% |
अक्सर पूछे जाने वाले सवाल
क्या रंग फोटो से बिल्कुल मेल खाते हैं?
सपाट क्षेत्र अपना ठीक रंग देता है। ग्रेडिएंट वाली फोटो हर समूह का औसत देती है, जो तस्वीर का ठीक सार है, पर उसका हर शेड नहीं।
पैलेट हर बार एक जैसा क्यों रहता है?
क्लस्टरिंग एक तय seed से शुरू होती है, इसलिए एक ही फोटो और रंगों की एक ही संख्या हमेशा एक ही पैलेट देती है। फोटो या रंगों की संख्या बदलने पर परिणाम बदलता है।
मुझे कितने रंग चुनने चाहिए?
पाँच रंग ज्यादातर फोटो का मुख्य मूड पकड़ लेते हैं। भरी-पूरी फोटो या किसी पेंटिंग या डिज़ाइन के लिए ज्यादा शेड चाहिए तो 8 से 10 लें।
क्या मेरी फोटो कहीं अपलोड होती है?
नहीं। फोटो आपके ब्राउज़र में पढ़ी जाती है, पैलेट आपके डिवाइस पर बनता है, और कुछ भी हम तक नहीं भेजा जाता।
हेक्स, RGB और HSL में क्या फर्क है?
ये एक ही रंग को तीन तरीकों से बताते हैं: हेक्स और RGB लाल, हरे और नीले की मात्रा बताते हैं, हेक्साडेसिमल और दशमलव में। HSL रंग-छटा, संतृप्ति और हल्केपन को बताता है, जिसे आँख से बदलना आसान है।
स्रोत
- Wikipedia (अंग्रेजी में): k-means++ (Arthur और Vassilvitskii, 2007, k-means की सावधान शुरुआत)
- Wikipedia (अंग्रेजी में): CIELAB colour space (L*a*b*, D65 सफेद बिंदु)
आँकड़े और टेक्स्ट आखिरी बार मंगलवार, 10 नवंबर 2026 को जाँचे गए।