किसी भी इमेज से कलर पैलेट पाएं, कंट्रास्ट चेकर के साथ

रंग कैसे चुने जाते हैं

यह टूल आपकी इमेज की एक छोटी कॉपी बनाता है, जिसकी सबसे लंबी भुजा ज़्यादा से ज़्यादा 160 पिक्सेल होती है, और हर उस पिक्सेल को गिनता है जो पारदर्शी नहीं है। फिर यह k-means क्लस्टरिंग से मिलते-जुलते पिक्सेल को समूहों में बांटता है और हर समूह का औसत रंग बताता है, सबसे बड़े समूह से शुरू करते हुए। हर स्वैच पर दिखा प्रतिशत बताता है कि वह समूह इमेज का कितना हिस्सा कवर करता है।

शुरुआती बिंदु यादृच्छिक नहीं बल्कि तय होता है: यह सबसे आम रंग से शुरू होता है, फिर उस रंग को जोड़ता रहता है जो पहले से मौजूद रंगों से सबसे दूर हो। इसलिए एक ही इमेज हर बार वही पैलेट देती है, और कोई छोटा चमकीला उच्चारण, जैसे सफेद बॉक्स पर लाल लोगो, पृष्ठभूमि में औसत होने के बजाय अपना अलग स्वैच पाता है।

5 से 8 रंग मांगें। सादी पृष्ठभूमि पर प्रोडक्ट की फ़ोटो को आमतौर पर 5 या 6 की ज़रूरत होती है। किसी व्यस्त लाइफ़स्टाइल फ़ोटो में 8 पर बेहतर दिखता है। अगर इमेज में आपके मांगे गए रंगों से कम अलग-अलग रंग हैं, तो टूल यह बता देता है और जो रंग उसे मिले वही दिखाता है।

कॉन्ट्रास्ट मैट्रिक्स को पढ़ना

हर रंग को हर दूसरे रंग के साथ, तथा सादे सफेद और काले के साथ जोड़ा जाता है, और हर सेल दिखाता है कि पंक्ति के रंग वाले टेक्स्ट के लिए कॉलम के रंग वाली पृष्ठभूमि पर कॉन्ट्रास्ट अनुपात क्या है। यह अनुपात WCAG परिभाषा का पालन करता है: (L1 + 0.05) / (L2 + 0.05), जहाँ L1 और L2 हल्के और गहरे रंग की सापेक्ष चमक हैं। यह 1:1 (वही रंग दो बार) से लेकर 21:1 (सफेद पर काला) तक चलता है।

लेबल वही सीमाएं हैं जो WCAG तय करता है:

• AA: सामान्य टेक्स्ट के लिए कम से कम 4.5:1 और बड़े टेक्स्ट के लिए 3:1 (सफलता मानदंड 1.4.3)।
• AAA: सामान्य टेक्स्ट के लिए कम से कम 7:1 और बड़े टेक्स्ट के लिए 4.5:1 (सफलता मानदंड 1.4.6)।
• बड़े टेक्स्ट का मतलब है कम से कम 18 पॉइंट, या 14 पॉइंट बोल्ड (WCAG की बड़े पैमाने की परिभाषा)।

AA large चिह्नित कोई सेल बड़ी हेडलाइन के लिए ठीक है पर कैप्शन के लिए बहुत हल्की है। W3C की 1.4.3 की व्याख्या यह भी कहती है कि अनुपात को गोल (राउंड) नहीं करना चाहिए, इसलिए 4.499:1, 4.5:1 को पूरा नहीं करता। टूल सटीक संख्या का आकलन करता है और उसे दो दशमलव तक काटकर दिखाता है, कभी ऊपर गोल नहीं करता।

एक हल किया गया उदाहरण

मान लीजिए फ़ोटो से आपको #1a3c6e का नेवी और #fdf6e3 का क्रीम मिलता है। नेवी की सापेक्ष चमक लगभग 0.046 निकलती है और क्रीम की लगभग 0.923। अनुपात है (0.923 + 0.05) / (0.046 + 0.05), जो इन गोल किए आंकड़ों के साथ लगभग 10.1:1 और सटीक आंकड़ों के साथ 10.16:1 है। यह सभी टेक्स्ट के लिए AAA पास करता है, इसलिए क्रीम एंड कार्ड पर नेवी टेक्स्ट किसी भी आकार में सुरक्षित है। उसी क्रीम पर #e07a2e जैसा मध्यम नारंगी रखें तो अनुपात गिरकर 2.78:1 हो जाता है, जो बड़े टेक्स्ट के लिए भी फेल है। नारंगी को उस बटन के लिए बचाकर रखें जिस पर काला टेक्स्ट हो (6.99:1, जो AA है पर AAA से थोड़ा कम), या बिना शब्दों वाली किसी आकृति के लिए।

एक्सपोर्ट का उपयोग करना

CSS एक्सपोर्ट कस्टम प्रॉपर्टीज़ का एक :root ब्लॉक है, इमेज का सबसे ज़्यादा हिस्सा कवर करने वाले रंग के लिए --color-1 और नीचे इसी तरह। JSON में हर रंग का हेक्स, RGB, HSL और इमेज में उसका हिस्सा होता है, जिसे किसी डिज़ाइन टोकन फ़ाइल में पेस्ट करना या किसी स्क्रिप्ट को देना आसान है। जब आपको पता चल जाए कि कौन सा रंग पृष्ठभूमि है, कौन सा टेक्स्ट और कौन सा उच्चारण, तब वेरिएबल का नाम बदल लें।

यह टूल क्या नहीं करता

इसे यह नहीं पता कि कौन से रंग आपके ब्रांड के हैं। लकड़ी की मेज़ पर आपके प्रोडक्ट की फ़ोटो में मेज़ भी शामिल होगी। अगर आपको सिर्फ़ प्रोडक्ट के रंग चाहिए तो पहले प्रोडक्ट या पैकेजिंग तक क्रॉप करें। यह आपको सटीक प्रिंट रंग भी नहीं बता सकता: संख्याएं फ़ाइल के पिक्सेल हैं, आपके कैमरे और किसी भी एडिटिंग के बाद, इसलिए उन्हें प्रकाशित करने से पहले अपने ब्रांड गाइड से मिला लें। और यह केवल टेक्स्ट कॉन्ट्रास्ट का आकलन करता है। WCAG में आइकन और इंटरफ़ेस भागों के लिए अलग नियम हैं, जिनका यह मैट्रिक्स आकलन नहीं करता।

अगर आप यह हाथ से नहीं करना चाहते

Hermoso ऑटोपायलट पर मार्केटिंग है: यह आपके बाज़ार में पहले से चल रहे विज्ञापनों पर रिसर्च करता है, ब्रांड के अनुरूप इमेज और वीडियो विज्ञापन बनाता है, पोस्ट शेड्यूल करता है और आपके अपने ऐड अकाउंट पर पेड कैंपेन चलाता है। जब आप अपनी वेबसाइट से अपना ब्रांड जोड़ते हैं, तो यह आपके प्रोडक्ट, लोगो और पैलेट को सीखता है, और आप हेक्स कोड के साथ कैप्शन और एंड कार्ड के रंग सेट कर सकते हैं। यह वेब ऐप में, या Claude, ChatGPT और Cursor के अंदर इसके MCP सर्वर के ज़रिए काम करता है।

मुफ़्त टूल: सोशल मीडिया साइज़ गाइड · Instagram ग्रिड मेकर · Open Graph जेनरेटर

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

मैं किसी फ़ोटो से कलर पैलेट कैसे पाऊँ?

फ़ोटो को टूल में डालें और चुनें कि आप कितने रंग चाहते हैं, 5 से 8 तक। यह समान पिक्सेल को समूहित करता है और हर समूह का औसत रंग HEX, RGB और HSL में दिखाता है, सबसे बड़ा पहले, हर एक पर एक कॉपी बटन के साथ।

टेक्स्ट के लिए मुझे कितना कंट्रास्ट अनुपात चाहिए?

WCAG 2.2 लेवल AA सामान्य टेक्स्ट के लिए कम से कम 4.5:1 और बड़े टेक्स्ट के लिए 3:1 माँगता है। लेवल AAA 7:1 और 4.5:1 माँगता है। बड़ा टेक्स्ट कम से कम 18 पॉइंट, या 14 पॉइंट बोल्ड होता है।

क्या 4.49:1 AA पास करने के लिए काफ़ी करीब है?

नहीं। W3C कहता है कि किसी थ्रेशोल्ड से तुलना करते समय गणना किए गए अनुपात को राउंड नहीं करना चाहिए, इसलिए 4.499:1, 4.5:1 को पूरा नहीं करता। यह टूल सटीक संख्या पर निर्णय करता है।

मुझे हर बार एक ही पैलेट क्यों मिलता है?

क्लस्टरिंग एक निश्चित बिंदु, सबसे आम रंग, से शुरू होती है, और फिर वह रंग जोड़ती है जो पहले से चुने गए रंगों से सबसे दूर है। कोई रैंडम शुरुआत नहीं होती, इसलिए एक इमेज हमेशा एक ही उत्तर देती है।

क्या मेरी इमेज अपलोड होती है?

नहीं। इसे आपके ब्राउज़र के अपने फ़ाइल रीडर से पढ़ा जाता है और आपके डिवाइस पर एक कैनवास में गिना जाता है। कुछ भी कहीं भेजा या स्टोर नहीं किया जाता।