32 वेबसाइट कलर स्कीम hex कोड के साथ, We.Inc टेम्पलेट डिज़ाइन से लिए गए, साथ ही रूपांतरण देने वाली स्कीम बनाने का तरीका: कार्रवाई के लिए आरक्षित एक accent के साथ शांत बेस पैलेट, उद्योग के अनुसार उदाहरण और सुलभता जांच।
हर जगह एक ही रंग नहीं जीतता। सबसे अच्छा बटन रंग वह है जो आपके पेज के साथ तेज़ कंट्रास्ट बनाए और किसी और चीज़ के लिए न इस्तेमाल हो, ताकि नजर सीधे उस पर जाए।
एक आम तरीका: तटस्थ आधार (सफेद या हल्का सफेद और गहरा टेक्स्ट), एक मुख्य brand रंग, कार्रवाई के लिए एक उभार रंग और सफलता/त्रुटि के अर्थ-सूचक रंग। इससे अधिक रंग अक्सर दृश्य क्रम कमजोर करते हैं।
रंग के अर्थ होते हैं, पर वे संस्कृति, उद्योग और संदर्भ से बदलते हैं; लोकप्रिय दावे अक्सर बढ़ा-चढ़ाकर बताए जाते हैं। भरोसे से असर डालने वाली बातें कंट्रास्ट, पठनीयता और कार्रवाई का साफ़ दिखना हैं।
Industrial खरीदार स्पष्टता और भरोसा चाहते हैं। Navy, गहरा स्लेटी और इस्पात धूसर के साथ एक तेज़ उभार रंग—अक्सर safety नारंगी, पीला या चमकदार नीला—उपयुक्त है। विनिर्देश पन्ना, कोटेशन बटन और फोन को उभार रंग में रखें।
WebAIM जैसे कंट्रास्ट जांचने का औज़ार का उपयोग करें; यह मुफ़्त है। WCAG 2.2 AA सामान्य टेक्स्ट के लिए कम से कम 4.5:1, बड़े टेक्स्ट और बटन किनारा/फ़ॉर्म खाना जैसे जरूरी हिस्से के लिए 3:1 मांगता है।
कोई एक रंग सबसे अच्छा रूपांतरण नहीं देता। जो मायने रखता है वह यह है कि बटन अपने पेज के मुकाबले कितना अलग दिखता है। वे रंग समूह जो कनवर्ट करते हैं वे हैं जिनमें एक शांत, एकसमान बेस होता है और एक उच्च-कंट्रास्ट accent केवल उन कार्रवाइयों के लिए आरक्षित होता है जो आप लोगों से करवाना चाहते हैं।
”कौन-सा रंग?” पूछने के बजाय पूछें: “क्या मेरा सबसे अहम बटन पेज की बाकी चीज़ों जैसा तो नहीं दिखता?” इसी विचार से रंग समूह बनाने का तरीका यहां है।
ये पैलेट We.Inc के अपने टेम्पलेट डिज़ाइन के सोर्स से लिए गए हैं (हर डिज़ाइन के प्रीव्यू में सबसे ज़्यादा इस्तेमाल होने वाले चार रंग, प्रीव्यू फ्रेम के सादे greys को छोड़कर)। ये टेम्पलेट डिज़ाइन हैं, कस्टमर साइट्स नहीं, और हम दावा नहीं करते कि इनमें से कोई भी कैसे कनवर्ट करता है। किसी हेक्स कोड को हेक्स कलर पिकर में paste करें उसे देखने और RGB/HSL मान पाने के लिए, और किसी भी टेक्स्ट-ऑन-बैकग्राउंड pair को इस्तेमाल करने से पहले कलर कंट्रास्ट जांचकर्ता में जांचें।
| We.Inc टेम्पलेट डिज़ाइन | स्टाइल | रंग (hex) | स्कीम |
|---|---|---|---|
| Atlas Builders | निर्माण / ट्रेड | #101d2c #0b1521 #f2a614 #d18f0a | गहरा नेवी बेस, एम्बर एक्शन रंग |
| Summit Trades | ट्रेड | #0e2436 #e4671e #16222e #f6eeec | सेफ्टी नारंगी के साथ नेवी |
| Ironpeak Roofing | छत मरम्मत | #e4671e #0e2436 #17415f #16222e | नारंगी-प्रधान, नेवी ढांचा |
| Ridgewater Plumbing | प्लंबिंग | #b08544 #d8401f #f2ede3 #c9a063 | गर्म क्रीम पर पीतल और लाल |
| Sunward Solar | सोलर | #0b1f3a #f5a524 #d98a0b #fff6e6 | मिडनाइट नीला और सन गोल्ड |
| Hookline Towing | टोइंग | #0e0e0e #ffc400 #f4f1ea #161616 | काला और उच्च-दृश्यता पीला |
| Redline Auto Group | कार डीलर | #e3262e #0e0f11 #eeeeee #17191c | लगभग काले पर रेसिंग लाल |
| Maple Street Motors | ऑटो मरम्मत | #1f4d3a #1b1b1b #f2b134 #e6efe9 | सरसों के साथ वन हरा |
| Freshpile Carpet Cleaning | सफाई | #ffd23f #0d1b52 #1d3fd8 #dbe2ff | रॉयल नेवी पर चमकदार पीला |
| Tideline Pressure Washing | बाहरी सफाई | #0b1b2b #3fd0c9 #f3f6f5 #020617 | जलवर्णी के साथ गहरा नेवी |
| Mowline Lawn Care | लॉन देखभाल | #eef3e6 #c6f24e #0f1410 #1a2a17 | हल्का हरा बेस, लाइम एक्सेंट |
| Fairway Lawn Co. | लैंडस्केपिंग | #f6f1e7 #1d2b1f #e8c872 #2f5d3a | क्रीम, गहरा हरा, हल्का सुनहरा |
| Brightside Dental | दंत | #10312e #3f605c #0e5f57 #0a4841 | शांत नीलहरित रंग |
| Meadowpaw Veterinary | पशु चिकित्सा | #2f6e6a #e9f0ef #c9d7d4 #f7f9f8 | हल्के पुदीनिया पर मंद नीलहरित |
| Vibrant Wellness | वेलनेस क्लिनिक | #25382c #eef2e6 #7c9a7e #3f6b4a | सेज और वन हरा |
| Kinfolk Home Care | होम केयर | #0f3d2e #f4c542 #fffdf6 #0a2e22 | गर्म पीले के साथ पाइन हरा |
| Lumora | हेल्थकेयर | #c8a97e #182c41 #0b1220 #0e1a26 | रेतीले सुनहरे के साथ मिडनाइट नेवी |
| Sterling & Vance LLP | लॉ फर्म | #8a93a2 #b08a4f #0b0e14 #f6eeec | स्लेट, कांस्य और स्याही |
| Harborview Wealth Partners | वित्तीय सलाह | #102a43 #b08d57 #d9bf8f #faf8f4 | हाथीदांत पर नेवी और सुनहरा |
| Harborline Insurance Agency | बीमा | #0f2742 #5fd3c9 #17a398 #0b1e33 | नीलहरित के साथ नेवी |
| Larkfield Partners | कंसल्टिंग | #1f4d3f #f4f1ea #14181c #4a5560 | कागज़ पर बोतल हरा |
| Keystone Realty | रियल एस्टेट | #f6eeec #7a2e2a #59606b #e9f0ef | ऑक्सब्लड के साथ गुलाबी बेस |
| Lucia Trattoria | रेस्टोरेंट | #e9c9a8 #f7f1e6 #efe6d4 #23301f | जैतूनी-काले के साथ गर्म रेत |
| Ember & Roast | कैफे / रेस्टोरेंट | #ede6dc #c9642f #14100d #f6eeec | जई, जला नारंगी, एस्प्रेसो |
| Kilnhouse Coffee | कॉफी शॉप | #2b1d16 #c65d3b #f3ebe0 #fff8ef | भुना भूरा और टेराकोटा |
| Parcel No. 9 Wines | वाइनरी | #3a0a15 #fbe9e3 #b8324b #f4a7a0 | गुलाबी के साथ क्लेरेट |
| Petalry Florist | फूलों की दुकान | #3e1f2b #b4546c #fbf5f2 #f3e3dd | बेर और धुंधला गुलाबी |
| Hollow Oak Farm Shop | फार्म शॉप | #24301f #f6f1e4 #5e7f3a #e3a33b | काई, क्रीम और शहद |
| Suds & Scruff | पालतू जानवर ग्रूमिंग | #3b1740 #ffd84d #ff8fab #fff8e7 | बैंगनी, पीला और गुलाबी |
| Datacore SaaS Hero | SaaS | #7b39fc #a484d7 #6a2ce0 #f87b52 | मूंगा रंग के साथ बैंगनी |
| Mast Security | सुरक्षा | #1e2628 #34e0a1 #e7ede9 #8d9a97 | पुदीनिया के साथ ग्रेफाइट |
| Afterglow Sound | इवेंट / संगीत | #efeaff #f472b6 #ec4899 #8b5cf6 | लैवेंडर, गुलाबी और बैंगनी |
इनमें एक पैटर्न दिखेगा: ज़्यादातर गहरे या हल्के बेस के साथ एक संतृप्त accent (एम्बर, नारंगी, पीला, लाइम या मूंगा रंग) जोड़ते हैं। यह वही ”शांत बेस, एक एक्शन रंग” ढांचा है जो नीचे बताया गया है।
रंग मनोविज्ञान लेख अक्सर कहते हैं नीला भरोसा, लाल जल्दी और हरा विकास दर्शाता है। कुछ सामान्य अर्थ हैं, पर संस्कृति, उद्योग और संदर्भ से बहुत बदलते हैं। एक जगह लाल चेतावनी, दूसरी जगह उत्सव; हरा “आगे बढ़ें”, पर्यावरण या पैसा दिखा सकता है।
अच्छी तरह समर्थित विचार अलग दिखने का प्रभाव, जिसे Von Restorff प्रभाव भी कहते हैं: आसपास से अलग वस्तु पर ध्यान और याद रहने की संभावना अधिक होती है। नीले-सफेद पेज में अकेला नारंगी बटन दिखेगा; पूरा पेज नारंगी हो तो नहीं।
दो नियम अधिकतर उद्योग में चलते हैं:
Interior डिज़ाइनर का 60-30-10 अनुपात वेबसाइट पर भी अच्छा है:
| हिस्सा | भूमिका | आम रंग |
|---|---|---|
| करीब 60% | Background और आधार | सफेद, हल्का सफेद, बहुत हल्का धूसर या गहरा थीम में गहरा रंग |
| करीब 30% | Brand और ढांचा | शीर्षक पट्टी, नेविगेशन और अनुभाग background का मुख्य brand रंग |
| करीब 10% | उभार रंग/कार्रवाई | बटन, अहम लिंक और वह एक चीज़ जिस पर क्लिक चाहिए |
गहरा टेक्स्ट रंग जोड़ें—शुद्ध काले के बजाय लगभग काला या गहरा धूसर आम है—और अर्थ-सूचक रंग रखें: सफलता के लिए हरा, गलती के लिए लाल, चेतावनी के लिए amber। इन्हें मुख्य बटन से अलग रखें ताकि “Buy now” गलती जैसा न लगे।
लोगो है तो उसका मुख्य रंग मुख्य रखें। नहीं है तो नीचे की तालिका से उद्योग अनुकूल रंग और अपनी पसंद चुनें।
रंग चक्र देखें। आमने-सामने के complementary रंग मजबूत उभरते हैं: नीला-नारंगी, बैंगनी-पीला, नील-हरा-मूंगा रंग। Brand नीला हो तो दूसरा नीला नहीं, नारंगी या गर्म पीला अधिक दिखेगा।
Background, card की सतह, किनारा धूसर और टेक्स्ट रंग चुनें। अधिकतर काम ये करते हैं, इसलिए शांत रखें।
हर टेक्स्ट/बटन संयोजन कंट्रास्ट जांचने का औज़ार (WebAIM मुफ़्त है) में जांचें। WCAG 2.2 AA के लिए:
सफेद पर हल्का धूसर टेक्स्ट वेब पर पढ़ने की आम समस्या है। प्रस्ताव पढ़ना मुश्किल हो तो बटन का रंग मायने नहीं रखता।
फोन को बाहर, सस्ते लैपटॉप और गहरा मोड (यदि हो) में देखें। डिज़ाइनर के मॉनिटर पर सुंदर रंग दूसरी स्क्रीन पर फीके पड़ सकते हैं।
ये समझदार शुरुआत हैं, नियम नहीं। हर रंग समूह में शांत आधार और एक कंट्रास्ट वाला उभार रंग है।
| उद्योग | आधार और मुख्य | कार्रवाई उभार रंग | क्यों काम करता है |
|---|---|---|---|
| निर्माण/industrial | Navy, गहरा स्लेटी, इस्पात धूसर | सेफ्टी नारंगी या पीला | भरोसेमंद, साफ़ “कोटेशन मांगें” |
| स्वास्थ्य/दंत | सफेद, हल्का नीला या नील-हरा | गर्म मूंगा रंग या हरा | साफ़ और शांत, बुकिंग बटन दिखता है |
| कानूनी/वित्त | गहरा navy/वन green, क्रीम | सुनहरा या चमकदार नीला | भरोसे के संकेत और साफ़ संपर्क कार्रवाई |
| रेस्तरां/खाना | गर्म तटस्थ, गहरा लाल या जैतूनी | चमकदार पीला या नारंगी | भूख जगाए, “Order”/“Book” साफ़ |
| SaaS/तकनीक | सफेद या लगभग काला, नील/नीला | तेज़ हरा, नारंगी या गुलाबी | साफ़ रूप, कंट्रास्ट वाला “मुफ़्त शुरू करें” |
| सौंदर्य/स्वास्थ्य | गुलाबी, धूसर-हरा, क्रीम | गहरा जामुनी या काला | नरम brand, भरोसेमंद बुकिंग बटन |
| घरेलू सेवा (पाइप मरम्मत, HVAC, छत मरम्मत) | सफेद, गहरा नीला | लाल या नारंगी | आपातकाल में तुरंत दिखता कॉल बटन |
| ऑनलाइन बिक्री/फैशन | अधिकतर सफेद और काला | एक brand उभार रंग | उत्पाद तस्वीर को रंग उठाने देता है |
निर्माता के खरीदार उत्पाद या क्षमता पेज पर पहुंचकर विनिर्देश पन्ना या कोटेशन चाहते हैं। “कोटेशन मांगें”, “विनिर्देश पन्ना डाउनलोड” और फोन को उन पेजों पर उभार रंग रंग की अकेली चीजें रखें।
मान लें बागवानी कंपनी का लोगो, शीर्षक, चिह्न, मुख्य दृश्य background और “मुफ़्त अनुमान लें” बटन सब हरे हैं। Brand एकसमान है, पर बटन गायब हो गया।
Brand नहीं बदला; कार्रवाई अब स्क्रीन की सबसे दिखने वाली चीज़ है।
आगंतुक पर्याप्त हो तो बटन या उभार रंग पर A/B test करें; एक बार में एक चीज़ बदलें और सार्थक नतीजे के लिए पर्याप्त समय चलाएं। कम आगंतुक वाली साइट को भरोसेमंद नतीजा नहीं मिल सकता; उनके लिए:
रंग पेज रूपांतरण का एक हिस्सा है; लैंडिंग पेज के असरदार उदाहरण में बाकी बातें हैं। We.Inc chat में “navy और धूसर, नारंगी कोटेशन बटन” जैसा look बताएं, टेम्पलेट देखें और फिर रंग visual या कोड से ठीक करें।
फ़्री में शुरू करें · क्रेडिट कार्ड की ज़रूरत नहीं