अपनी प्रोडक्ट फ़ोटो से ब्रांड का रंग पैलेट बनाएं
अपनी प्रोडक्ट और पैकेजिंग की फ़ोटो से असली रंग निकालें, हर रंग को एक काम दें, और हर text जोड़ी को किसी ad, caption या end card पर डालने से पहले WCAG contrast से जांचें।
छोटे ब्रांड के पास अक्सर लोगो फ़ाइल होती है, रंगों की सूची नहीं होती। रंग खुद प्रोडक्ट में होते हैं: बोतल, लेबल, डिब्बा, कपड़ा। जब ad, thumbnail या caption style बनाने का समय आता है, कोई फ़ोटो देखकर hex code का अंदाज़ा लगाता है और उम्मीद करता है कि सही हो।
लगभग दस मिनट में इससे बेहतर हो सकता है। असली प्रोडक्ट की फ़ोटो से रंग निकालें, हर रंग को एक काम दें, और जांचें कि कौन सी जोड़ियां text के रूप में पढ़ने लायक हैं। हमारा मुफ्त colour palette extractor यह निकालना और जांचना, दोनों आपके browser में करता है, कुछ भी upload नहीं होता।
mood board की जगह प्रोडक्ट से क्यों शुरू करें
लोग आपके प्रोडक्ट को शेल्फ़ पर या हाथ में उसके रूप से पहचानते हैं। जो ad अपने रंग पैक से मिलाता है, वह एक नज़र में वही ब्रांड लगता है, और जो रंग से भटकता है वह नकली लगता है। प्रोडक्ट से लिया गया पैलेट इस बारे में भी ईमानदार होता है कि आप असल में क्या बेचते हैं, जो mood board कम ही होता है।
सेवाओं के लिए भी यह काम करता है। अगर आपके पास कोई भौतिक प्रोडक्ट नहीं है, तो अपने सबसे अच्छे screenshots, दुकान या टीम की फ़ोटो लें, जो भी लोग आपसे पहले से जोड़ते हैं।
चरण 1: फ़ोटो चुनें और crop करें
दो या तीन साफ़ फ़ोटो चुनें: सादे बैकग्राउंड पर प्रोडक्ट, पैकेजिंग का सामने वाला हिस्सा, और एक lifestyle शॉट जो आपको पसंद हो। फिर कसकर crop करें। extractor आपके दिए हर पिक्सल को गिनता है, इसलिए लकड़ी की मेज़ पर रखी बोतल मेज़ को भी आपके ब्रांड का रंग बता देगी। प्रोडक्ट और लेबल पर crop करें, तब पैलेट वही प्रोडक्ट होगा।
अगर हो सके तो दिन की रोशनी या हल्की रोशनी में शूट करें। गर्म lamp सफ़ेद पैकेजिंग को क्रीमी बना देता है, और जो भी रंग निकलेगा उसमें वह रंगत होगी।
चरण 2: पांच से आठ रंग निकालें
हर फ़ोटो को extractor में डालें और साफ़ प्रोडक्ट शॉट के लिए 5 या 6 रंग मांगें, भीड़ वाली फ़ोटो के लिए 8। यह मिलते-जुलते pixels को समूह में बांटता है और हर समूह का औसत देता है, सबसे बड़े पहले, साथ में हर एक कितनी इमेज घेरता है। शुरुआती बिंदु तय है, इसलिए एक ही फ़ोटो हमेशा एक ही पैलेट देती है, और छोटा चमकीला accent, जैसे सफ़ेद बोतल पर लाल ढक्कन, औसत में खोए बिना अपना अलग swatch पाता है।
अपनी सभी फ़ोटो चलाएं और वे रंग देखें जो बार-बार आते हैं। वही ब्रांड है। जो रंग सिर्फ एक शॉट में दिखे, वह आमतौर पर बैकग्राउंड या रोशनी होता है।
चरण 3: हर रंग को एक काम दें
पैलेट तभी काम का है जब हर रंग की एक भूमिका हो। ज़्यादातर ब्रांड को चार चाहिए:
- Background: वह रंग जिस पर लेआउट का ज़्यादातर हिस्सा टिका होता है। अक्सर पैक का base रंग, या कोई हल्का neutral।
- Text: एक गहरा रंग जो background पर पढ़ने लायक हो। लगभग काला चलता है। गहरा ब्रांड रंग बेहतर है, अगर वह contrast जांच पास करे।
- Accent: तेज़ रंग, किसी button, price sticker या एक हाइलाइट शब्द के लिए।
- Support: एक या दो neutral, boxes, dividers और दूसरे दर्जे के text के लिए।
फ़ोटो से मिला हर रंग इस्तेमाल करने से बचें। साफ़ भूमिका वाले पांच नामित रंग सौ ads को एक जैसा रखेंगे। बारह नहीं रखेंगे।
चरण 4: किसी भी चीज़ पर लगाने से पहले contrast जांचें
बड़े monitor पर जो रंग जोड़ियां अच्छी लगती हैं, धूप में फ़ोन पर पढ़ना मुश्किल हो सकता है, और कम दृष्टि वाले लोगों के लिए और भी ज़्यादा। W3C की Web Content Accessibility Guidelines इसके लिए एक संख्या देती हैं, contrast ratio, जो 1:1 (एक ही रंग दो बार) से 21:1 (सफ़ेद पर काला) तक जाता है। सीमाएं ये हैं:
| सामान्य text | बड़ा text | |
|---|---|---|
| AA (SC 1.4.3) | 4.5:1 | 3:1 |
| AAA (SC 1.4.6) | 7:1 | 4.5:1 |
बड़ा text मतलब कम से कम 18 point, या 14 point bold, WCAG की परिभाषा के अनुसार। और ये संख्याएं पक्की सीमाएं हैं: W3C की 1.4.3 पर guidance कहती है कि गणना किया गया ratio गोल नहीं करना चाहिए, इसलिए 4.499:1, 4.5:1 को पूरा नहीं करता।
WCAG वेब content के लिए लिखा गया था, ads के लिए नहीं, पर यह तर्क स्क्रीन पर किसी भी text पर लागू होता है, जिसमें वीडियो में जलाए गए captions और end card के शब्द भी शामिल हैं।
एक उदाहरण
मान लीजिए आपकी पैकेजिंग एक navy #1a3c6e, एक क्रीम #fdf6e3 और एक नारंगी #e07a2e देती है।
सूत्र है (L1 + 0.05) / (L2 + 0.05), जहां L1 हल्के रंग की relative luminance है और L2 गहरे की। Relative luminance काले के लिए 0 से सफ़ेद के लिए 1 तक चलती है। Navy लगभग 0.046 आता है, क्रीम लगभग 0.923 और नारंगी लगभग 0.300।
- क्रीम पर Navy text: (0.923 + 0.05) / (0.046 + 0.05) = 0.973 / 0.096, इन गोल आंकड़ों से लगभग 10.1, और सटीक 10.16:1। यह हर आकार पर AAA पास करता है। यह आपकी मुख्य जोड़ी है।
- क्रीम पर नारंगी text: (0.923 + 0.05) / (0.300 + 0.05) = 0.973 / 0.350, लगभग 2.78:1। यह बड़े text के लिए भी फेल होता है। नारंगी पर क्रीम में शब्द नहीं होने चाहिए।
- नारंगी पर काला text: (0.300 + 0.05) / (0 + 0.05) = 0.350 / 0.05, इन गोल आंकड़ों से 7.0, पर सटीक 6.99:1। यह सभी text के लिए AA पास करता है, पर AAA से थोड़ा कम रह जाता है। Button के label के लिए ठीक है।
- Navy पर क्रीम text: यह पहली जोड़ी ही है, इसलिए वही 10.16:1। जोड़ी को उलटने से ratio कभी नहीं बदलता।
तो भूमिकाएं लगभग अपने आप तय हो जाती हैं: क्रीम background, navy text, नारंगी को accent shape बनाएं जिस पर काले शब्द हों (navy पर नारंगी सिर्फ 3.65:1 है, जो अकेले बड़े text के लिए AA है)। Extractor यह पूरा grid एक साथ दिखाता है, हर रंग दूसरे हर रंग के सामने, साथ में सफ़ेद और काला, और हर खाने को AAA, AA, AA large या Fail का ग्रेड मिलता है।
चरण 5: एक बार लिख लें
पैलेट को CSS custom properties या JSON के रूप में export करें और अपनी logo फ़ाइलों के साथ रखें। एक बार तय हो जाए तो variables का नाम उनके काम पर रखें: --brand-bg, --brand-text, --brand-accent एक महीने बाद --color-3 से बेहतर पढ़े जाते हैं। हर एक के नीचे एक लाइन जोड़ें कि कौन सी जोड़ियां पास हुईं, ताकि कोई फिर से जांच न करे।
फिर उन संख्याओं की तुलना किसी आधिकारिक स्रोत से करें जो आपके पास पहले से हो। फ़ोटो आपके कैमरे का देखा रंग देती है, जो छपे पैक के करीब है पर ink spec के हूबहू बराबर नहीं। अगर आपके printer या designer के पास सटीक मान हैं, तो वही सही हैं।
ads और posts में पैलेट का इस्तेमाल
- Captions और subtitles: आपके background रंग के बॉक्स पर आपका text रंग, या उल्टा। पहले जोड़ी जांचें।
- End cards: background रंग, logo और आपके text रंग में एक लाइन के साथ। Accent एक छोटे call to action के पीछे button shape भर सकता है।
- Thumbnails और covers: एक accent, एक बड़ा पढ़ने लायक शब्द, और भरपूर background।
- पैकेजिंग पर QR codes: ब्रांड रंग तब चलता है जब वह पैक से साफ़ तौर पर गहरा हो। हमारा QR code generator contrast कम होने पर चेतावनी देता है।
Hermoso कहाँ फ़िट होता है
Hermoso एक AI marketing agent है। यह आपके बाज़ार में पहले से चल रहे ads खोजता है, आपके ब्रांड के हिसाब से image और video ads बनाता है, आपके अपने social accounts पर पोस्ट और schedule करता है, और आपके अपने ad accounts पर paid campaigns चलाता है। जब आप अपनी वेबसाइट से ब्रांड जोड़ते हैं, तो यह आपके products, logo और पैलेट को सीख लेता है। Captions और end cards तब तक बंद रहते हैं जब तक आप न मांगें, और मांगने पर आप text, box और end card के रंग hex codes से सेट कर सकते हैं, ताकि यहां जांची गई जोड़ियां ही असल में जाएं। यह web app में काम करता है, या Claude, ChatGPT और Cursor के अंदर अपने MCP server के ज़रिए।
अक्सर पूछे जाने वाले सवाल
मेरे प्रोडक्ट के रंगों के hex codes कैसे पता करूं?
प्रोडक्ट या पैकेजिंग पर एक साफ़ फ़ोटो को crop करें और उसे किसी color palette extractor में डालें। वह मुख्य रंग HEX, RGB और HSL में दिखाता है। दो या तीन फ़ोटो चलाएं और वे रंग रखें जो बार-बार आते हैं।
Text को कितना contrast ratio चाहिए?
WCAG 2.2 के तहत, level AA को सामान्य text के लिए 4.5:1 और बड़े text के लिए 3:1 चाहिए, और AAA को 7:1 और 4.5:1। बड़ा text कम से कम 18 point, या 14 point bold होता है।
क्या AA के लिए 4.49:1 काफ़ी है?
नहीं। W3C कहता है कि सीमा से तुलना करते समय ratio गोल नहीं करना चाहिए, इसलिए 4.499:1, 4.5:1 को पूरा नहीं करता।
ब्रांड पैलेट में कितने रंग होने चाहिए?
इतने कि हर एक को काम मिले: आमतौर पर एक background, एक text रंग, एक accent और एक या दो neutrals। साफ़ भूमिकाओं वाले पांच नामित रंग लंबी सूची से बेहतर ads एक जैसे रखते हैं।
क्या फ़ोटो के रंग सटीक होते हैं?
नहीं। वे वही हैं जो कैमरे ने उस रोशनी में रिकॉर्ड किए, जो प्रोडक्ट के करीब है पर print या ink spec के बराबर नहीं। अगर आपके पास आधिकारिक मान हैं, तो वही इस्तेमाल करें।