ग्रीन वेबसाइट कलर स्कीम: हेक्स कोड के साथ 6 पैलेट

हेक्स कोड और कंट्रास्ट-जांचे गए टेक्स्ट पेयर के साथ ग्रीन वेबसाइट कलर पैलेट, ताकि आप पढ़ने में आसान और अपने ब्रांड के अनुरूप हरा रंग चुन सकें।

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

वेबसाइट के लिए सबसे अच्छा हरा रंग कौन सा है?

कोई एक सबसे अच्छा हरा रंग नहीं होता, लेकिन #166534 या #2D6A4F जैसा गहरा और थोड़ा कम सैचुरेटेड हरा सबसे सुरक्षित शुरुआत है। दोनों सफेद बैकग्राउंड पर WCAG AA की 4.5:1 टेक्स्ट सीमा पार करते हैं (क्रमशः 7.13:1 और 6.39:1), इसलिए बटन, लिंक और हेडिंग के लिए ठीक रहते हैं। #22C55E जैसे चटक हरे रंग सफेद पर फेल हो जाते हैं (2.28:1), इन्हें आइकन या गहरे बैकग्राउंड के लिए रखना बेहतर है।

वेबसाइट पर हरे रंग के साथ कौन से रंग अच्छे लगते हैं?

गर्म ऑफ-व्हाइट और क्रीम (#F6F4EC), लगभग काले हरे रंग (#081C15) और अंबर या टेराकोटा जैसा कोई एक गर्म एक्सेंट, ये सब हरे के साथ अच्छे मेल खाते हैं। न्यूट्रल रंगों को शुद्ध ग्रे की जगह हल्का हरा टिंट दें ताकि पेज एकसार दिखे, और एक्शन के लिए सिर्फ एक एक्सेंट रंग रखें।

क्या टेक्स्ट के लिए हरा रंग एक्सेसिबल है?

गहरे हरे रंग हैं, हल्के और मध्यम हरे अक्सर नहीं होते। WCAG 2 AA में सामान्य टेक्स्ट के लिए कम से कम 4.5:1 और बड़े टेक्स्ट व इंटरफ़ेस कंपोनेंट के लिए 3:1 चाहिए। हर जोड़ी को आंख से आंकने की बजाय टेस्ट करें, क्योंकि #40916C (सफेद पर 3.83:1) जैसे मध्यम हरे ऐसी जगह आते हैं जहां वे सिर्फ बड़े टेक्स्ट के लिए पास होते हैं।

वेब डिज़ाइन में हरा रंग क्या संदेश देता है?

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

क्या कॉल-टू-एक्शन बटन के लिए हरा रंग इस्तेमाल करना चाहिए?

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

क्या मुझे डार्क मोड के लिए अलग हरा पैलेट चाहिए?

ज़रूरी नहीं, लेकिन गहरे हरे बैकग्राउंड अपने आप में एक लोकप्रिय डिज़ाइन पसंद हैं। अगर आप डार्क मोड देते हैं, तो हल्का पैलेट ज्यों का त्यों न दोहराएं: सफेद पर फेल होने वाले चटक हरे लगभग काले हरे बैकग्राउंड पर अक्सर बढ़िया दिखते हैं, जैसे #052E16 पर #22C55E का कंट्रास्ट 6.54:1 है।

संक्षिप्त जवाब: हरे रंग की वेबसाइट के लिए बटन, लिंक और हेडिंग में #166534 या #2D6A4F जैसा गहरा हरा, बैकग्राउंड में #F6F4EC या #F0FDF4 जैसा हल्का टिंट वाला ऑफ-व्हाइट इस्तेमाल करें, और #22C55E जैसे चटक हरे रंग सिर्फ गहरे बैकग्राउंड या सजावट के लिए रखें। हल्के बैकग्राउंड पर गहरे हरे रंग WCAG AA की 4.5:1 टेक्स्ट सीमा पार करते हैं। सफेद पर चटक हरे नहीं करते (सफेद पर #22C55E का कंट्रास्ट 2.28:1 है)।

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

स्क्रीन पर हरा रंग क्यों मुश्किल है

हरा रंग ल्यूमिनेंस रेंज के बीच में आता है। मध्यम हरा देखने में चटक लगता है, लेकिन सफेद के सामने टेक्स्ट के लिए अक्सर बहुत हल्का होता है, और काले के सामने अक्सर बहुत गहरा। इसीलिए लोगो में शानदार लगने वाला हरा बटन के रंग के तौर पर फेल हो सकता है।

व्यावहारिक नियम: हरा रंग स्वैच में कैसा दिखता है, यह नहीं, उसका कंट्रास्ट अनुपात देखकर चुनें। सामान्य टेक्स्ट के लिए 4.5:1 या ज़्यादा रखें। बड़े टेक्स्ट (लगभग 24px रेगुलर या 19px बोल्ड और उससे ऊपर) और इनपुट बॉर्डर व आइकन जैसे UI कंपोनेंट के लिए कम से कम 3:1 चाहिए।

हेक्स कोड के साथ छह हरे वेबसाइट पैलेट

हर पैलेट में बैकग्राउंड, टेक्स्ट रंग, बटन या लिंक के लिए एक एक्सेंट और सबसे ज़रूरी जोड़ी का कंट्रास्ट अनुपात दिया गया है।

1. फ़ॉरेस्ट और क्रीम (एडिटोरियल, आउटडोर, फ़ूड)

भूमिका	हेक्स	जोड़ी और अनुपात
बैकग्राउंड	#F6F4EC
टेक्स्ट और हेडिंग	#1B4332	बैकग्राउंड पर: 10.06:1
बटन / लिंक	#2D6A4F	उस पर सफेद टेक्स्ट: 6.39:1
सॉफ़्ट पैनल	#95D5B2	उस पर #1B4332 टेक्स्ट: 6.56:1

गर्म, शांत और पढ़ने में आसान। क्रीम बैकग्राउंड इसे रूखा लगने से बचाता है। रेस्तरां, फ़ार्म शॉप, ट्रैवल और लंबे कंटेंट वाली साइटों के लिए अच्छा।

2. फ़्रेश मिंट (वेलनेस, क्लिनिक, हेल्थ कंटेंट)

भूमिका	हेक्स	जोड़ी और अनुपात
बैकग्राउंड	#F0FDF4
टेक्स्ट और हेडिंग	#14532D	बैकग्राउंड पर: 8.70:1
बटन	#15803D	उस पर सफेद टेक्स्ट: 5.02:1
डार्क बैंड	#052E16	उस पर #DCFCE7 टेक्स्ट: 13.57:1

हल्का और साफ़-सुथरा। बटन का हरा AA से बस थोड़ा ऊपर है, इसलिए बटन लेबल सामान्य या उससे मोटे वज़न में रखें और इसे टिंट वाले पैनलों पर न लगाएं।

3. सेज और ऑलिव (स्टूडियो, इंटीरियर, हैंडमेड सामान)

भूमिका	हेक्स	जोड़ी और अनुपात
बैकग्राउंड	#E9F5DB
टेक्स्ट और हेडिंग	#31572C	बैकग्राउंड पर: 7.33:1
बटन	#4F772D	उस पर सफेद टेक्स्ट: 5.24:1
हाइलाइट	#90A955	उस पर #132A13 टेक्स्ट: 5.84:1

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

4. डीप ग्रीन डार्क थीम (फ़िनटेक, SaaS, प्रीमियम)

भूमिका	हेक्स	जोड़ी और अनुपात
बैकग्राउंड	#081C15
टेक्स्ट	#B7E4C7	बैकग्राउंड पर: 12.58:1
एक्सेंट / लिंक	#40916C	बैकग्राउंड पर: 4.62:1
कार्ड	#1B4332	उस पर #95D5B2 टेक्स्ट: 6.56:1

गहरे बैकग्राउंड पर मध्यम हरे रंग एक्सेंट की तरह अच्छा काम करते हैं। ध्यान रहे कि #40916C, #081C15 पर पास होता है पर सफेद पर फेल (3.83:1), इसलिए इसे किसी हल्के सेक्शन में दोबारा इस्तेमाल न करें।

5. डार्क ग्रीन पर नियॉन लाइम (इवेंट, क्रिएटर, युवा ब्रांड)

भूमिका	हेक्स	जोड़ी और अनुपात
बैकग्राउंड	#1A2E05
हेडलाइन / बटन	#A3E635	बैकग्राउंड पर: 9.69:1
वैकल्पिक चटक रंग	#22C55E	#052E16 पर: 6.54:1

ज़बरदस्त ऊर्जा और बहुत साफ़ पढ़ने लायक, क्योंकि हल्का लाइम गहरे आधार पर बैठा है। इसे कम इस्तेमाल करें: पूरे पेज पर लाइम जल्दी आंखें थका देता है।

6. टील ग्रीन (SaaS, हेल्थ टेक, टिकाऊपन)

भूमिका	हेक्स	जोड़ी और अनुपात
बैकग्राउंड	#CCFBF1
टेक्स्ट और हेडिंग	#134E4A	बैकग्राउंड पर: 8.41:1
बटन	#0F766E	उस पर सफेद टेक्स्ट: 5.47:1

नीले-हरे की ओर झुका हुआ, जो ज़्यादा टेक्निकल और कम “प्रकृति” जैसा लगता है। जब आप ऑर्गेनिक एहसास के बिना हरा चाहते हों, तब यह अच्छा विकल्प है।

जो हरे शेड फेल होते हैं, और उनकी जगह क्या लें

फेल होने वाला	जोड़ी	अनुपात	इसकी जगह लें
चटक हरा बटन	सफेद टेक्स्ट के साथ #22C55E	2.28:1	सफेद टेक्स्ट के साथ #15803D (5.02:1)
सफेद पर लाइम लिंक	सफेद पर #65A30D	3.09:1	सफेद पर #4D7C0F (4.99:1)
मध्यम हरा बॉडी टेक्स्ट	सफेद पर #40916C	3.83:1	सफेद पर #2D6A4F (6.39:1)

मध्यम टोन वाले ये रंग 3:1 की सीमा फिर भी पार करते हैं, इसलिए बड़ी हेडलाइन, आइकन और बॉर्डर के लिए ठीक हैं, बस पैराग्राफ़ टेक्स्ट या छोटे लिंक के लिए नहीं। गलतियां कहां होती हैं, यह और जानने के लिए खराब कलर कंट्रास्ट के उदाहरण देखें, और आम तौर पर बेहतर जोड़ियों के लिए हाई कंट्रास्ट कलर पैलेट गाइड पढ़ें।

अपना हरा पैलेट कदम-दर-कदम कैसे बनाएं

1. पहले तय करें कि हरे का काम क्या है। क्या यह ब्रांड का रंग है, एक्शन का रंग है, या सिर्फ एक एक्सेंट? सिर्फ ब्रांड के लिए हरा कोई भी शेड हो सकता है। एक्शन वाले हरे को कंट्रास्ट पास करना ही होगा।
2. एक गहरा एंकर चुनें। लगभग #14532D से #2D6A4F के बीच का हरा लें। हल्के बैकग्राउंड पर यही आपका हेडिंग, लिंक और बटन का रंग बनेगा।
3. बैकग्राउंड को टिंट करें। शुद्ध सफेद की जगह बहुत हल्का हरा या गर्म क्रीम इस्तेमाल करें, जैसे #F0FDF4 या #F6F4EC। टिंट करने के बाद टेक्स्ट कंट्रास्ट फिर से जांचें।
4. एक ऐसा एक्सेंट जोड़ें जो हरा न हो। हरे के सामने अंबर या टेराकोटा उन पेजों पर बटन को अलग पहचान देता है जहां बहुत सारा हरा हो। लेबल का कंट्रास्ट जांचें: जैसे #FEF3C7 पर #92400E टेक्स्ट 6.37:1 नापा गया है।
5. हर टेक्स्ट-ऑन-बैकग्राउंड जोड़ी टेस्ट करें। हेडिंग, बॉडी, लिंक, बटन और प्लेसहोल्डर टेक्स्ट को चेकर में चलाएं। बॉडी साइज़ पर जो भी 4.5:1 से नीचे है, उसके लिए ज़्यादा गहरा या हल्का शेड चाहिए।
6. हover और डिसेबल्ड स्टेट भी जांचें। हover के शेड अक्सर खिसककर फेल होने वाले दायरे में चले जाते हैं।
7. पैलेट को नामित टोकन के रूप में सेव करें। brand-900, brand-700 और brand-100 जैसे वेरिएबल नाम इस्तेमाल करने से बाद में बदलाव एक लाइन का काम रह जाता है। हमारी Tailwind CSS कलर गाइड शेड-स्केल का यह तरीका दिखाती है, और ऊपर के कई हेक्स इसी तरह के स्केल से आए हैं।

किस तरह की साइट के लिए कौन सा हरा

• टिकाऊपन, एनर्जी, नॉनप्रॉफ़िट: फ़ॉरेस्ट और क्रीम, या सेज। इस मूड के असली उदाहरण हमारे Greenfield Renewables टेम्पलेट में हैं।
• हेल्थ और वेलनेस: फ़्रेश मिंट या टील ग्रीन।
• फ़ाइनेंस और SaaS: डीप ग्रीन डार्क थीम, एक चटक एक्सेंट के साथ।
• फ़ूड, फ़ार्म, गार्डन: फ़ॉरेस्ट और क्रीम, गर्म एक्सेंट के साथ।
• क्रिएटर और इवेंट पेज: डार्क ग्रीन पर नियॉन लाइम, सिर्फ हेडलाइन और एक बटन तक सीमित।

पब्लिश करने से पहले कॉपी करने लायक चेकलिस्ट

• [ ] बॉडी टेक्स्ट का अपने बैकग्राउंड के सामने कंट्रास्ट कम से कम 4.5:1 है
• [ ] बड़े टेक्स्ट और आइकन कम से कम 3:1 हैं
• [ ] बटन लेबल बटन फ़िल के सामने 4.5:1 पास करते हैं
• [ ] लिंक बॉडी टेक्स्ट से सिर्फ रंग के आधार पर नहीं, बल्कि और तरीके से भी अलग दिखते हैं (अंडरलाइन काम करती है)
• [ ] चटक हरे रंग सिर्फ गहरे बैकग्राउंड पर या सजावट के रूप में आए हैं
• [ ] हरे के अलावा एक से ज़्यादा एक्सेंट रंग नहीं हैं
• [ ] डार्क सेक्शन अपनी टेस्ट की हुई जोड़ियां इस्तेमाल करते हैं, लाइट मोड की दोहराई हुई नहीं
• [ ] पैलेट नामित टोकन के रूप में सेव है ताकि एक ही जगह से बदला जा सके

अगर आपको पक्का नहीं है कि एक साइट में कुल कितने रंग चाहिए, तो वेबसाइट कलर स्कीम गाइड में बुनियादी बातें हैं, और कलर पैलेट ग्लॉसरी एंट्री में यहां इस्तेमाल हुए शब्दों की परिभाषाएं हैं।

असली साइट पर हरा पैलेट लगाना

हेक्स कोड तैयार होने के बाद उन्हें लगाने के लिए एक जगह चाहिए। We.Inc के फ्री प्लान में आप रेडी-मेड टेम्पलेट से तीन साइटें तक पब्लिश कर सकते हैं; प्रॉम्प्ट से साइट का ड्राफ्ट बनाने वाला AI बिल्डर Starter प्लान से शुरू होता है, $20 प्रति माह पर। आप यहां साइन अप करें, साइट स्टाइल में अपने बैकग्राउंड, टेक्स्ट और बटन के हेक्स पेस्ट करें, और फिर पब्लिश हुए पेजों पर वही कंट्रास्ट जांच दोबारा चलाएं।

फ़्री में शुरू करें · क्रेडिट कार्ड की ज़रूरत नहीं

Umair Ali Sadaqat

We.Inc के संस्थापक

उमैर We.Inc के संस्थापक हैं। वे AI से वेबसाइट बनाने, एजेंसियों और वेब स्टूडियो चलाने के व्यवसाय के बारे में लिखते हैं।

कुछ शानदार बनाने के लिए तैयार हैं?

उन 15,000+ बिज़नेस से जुड़ें जो एक ही प्लेटफ़ॉर्म से लॉन्च करने, बढ़ने और ऑटोमेट करने के लिए We.Inc इस्तेमाल करते हैं।

फ़्री में शुरू करें

क्रेडिट कार्ड की ज़रूरत नहीं · सेल्स टीम से बात करें

संबंधित: ब्लॉग

• छोटे स्थानीय कारोबार के लिए 25 Guerrilla Marketing विचार
• हेयर सैलून वेबसाइट डिज़ाइन
• HighLevel SaaS Mode बनाम व्हाइट-लेबल वेबसाइट बिल्डर
• Hocoos बंद
• वेबसाइट बनाने में कितना समय लगता है? (2026)
• डोमेन नाम की कीमत
• Squarespace वेबसाइट खर्च 2026
• वेबसाइट बनाने में कितना खर्च आता है? 2026 की लागत

प्रोडक्ट

• AI वेबसाइट बिल्डर
• AI वाला व्हाइट लेबल वेबसाइट बिल्डर
• एंटरप्राइज़
• API डॉक्स

किसके लिए

• एजेंसियों के लिए
• फ़्रीलांसर्स के लिए
• होस्टिंग प्रोवाइडर्स के लिए
• SaaS प्लेटफ़ॉर्म्स के लिए
• स्टार्टअप्स के लिए
• फ़ाइनेंशियल सर्विसेज़
• हेल्थकेयर सॉल्यूशंस

फ़ीचर

• विज़ुअल एडिटर
• SEO और एनालिटिक्स
• कस्टम ब्रांडिंग
• क्लाइंट डैशबोर्ड
• रीसेलर बिलिंग

संसाधन

• ब्लॉग
• हेल्प सेंटर
• व्यवसाय के लिए मुफ़्त टूल
• Free UI Components
• टेम्पलेट
• टेम्पलेट संग्रह
• वेबसाइट उदाहरण
• गाइड
• तुलना
• विकल्प
• सर्वश्रेष्ठ
• समीक्षाएं
• कीमत गाइड
• उपयोग के मामले
• शब्दावली और मार्गदर्शिकाएँ
• इंटीग्रेशन
• डेवलपर
• Benchmark
• Windows App

कंपनी

• हमारे बारे में
• कीमतें
• पार्टनर कार्यक्रम में आवेदन करें
• संपर्क करें
• करियर
• सुरक्षा
• गोपनीयता नीति
• सेवा की शर्तें

साइटमैप