Yeşil Web Sitesi Renk Paletleri: 6 Palet ve Hex Kodları

Hex kodlu yeşil web sitesi renk paletleri, kontrastı test edilmiş metin eşleşmeleri ve kullanım alanları: okunaklı kalan, markanıza uyan yeşili seçin.

Sıkça sorulan sorular

Web sitesi için en iyi yeşil hangisi?

Tek bir en iyi yeşil yok, ancak #166534 veya #2D6A4F gibi koyu ve hafif doygunluğu azaltılmış bir yeşil en güvenli başlangıç noktasıdır. İkisi de beyaz zemin üzerinde WCAG AA 4,5:1 metin eşiğini geçer (7,13:1 ve 6,39:1), dolayısıyla butonlarda, bağlantılarda ve başlıklarda rahatça kullanılabilir. #22C55E gibi parlak yeşiller beyaz üzerinde yetersiz kalır (2,28:1); bunları simgeler veya koyu arka planlar için saklamak daha doğru olur.

Web sitesinde yeşille hangi renkler uyumlu gider?

Sıcak kırık beyazlar ve krem tonları (#F6F4EC), siyaha yakın yeşiller (#081C15) ve amber ya da kiremit gibi tek bir sıcak vurgu rengi yeşille iyi eşleşir. Sayfanın bütünlüğü bozulmasın diye nötr renkleri saf gri yerine yeşile çalan tonlarda tutun ve vurgu rengini tek bir eylem rengiyle sınırlayın.

Yeşil metin için erişilebilir mi?

Koyu yeşiller erişilebilir, açık ve orta tonlu yeşiller çoğu zaman değildir. WCAG 2 AA, normal metin için en az 4,5:1, büyük metin ve arayüz bileşenleri için en az 3:1 oranı ister. Gözle karar vermek yerine her çifti test edin; çünkü #40916C (beyaz üzerinde 3,83:1) gibi orta tonlu yeşiller yalnızca büyük metinde geçer.

Web tasarımında yeşil ne anlatır?

Yeşil en çok doğa, büyüme, sağlık, sürdürülebilirlik ve parayla ilişkilendirilir; bu yüzden sağlıklı yaşam, finans, enerji ve outdoor sitelerinde sıkça görülür. Anlam tona göre değişir: koyu orman yeşili köklü ve sakin, lime yeşili ise enerjik ve modern algılanır. Bunları birer gelenek olarak düşünün, garanti saymayın ve kendi hedef kitlenizle test edin.

Harekete geçirici (CTA) butonlarında yeşil kullanmalı mıyım?

Buton sayfanın geri kalanından belirgin biçimde ayrışıyor ve etiketi kontrast testini geçiyorsa kullanabilirsiniz. Açık renkli sayfalarda beyaz yazılı koyu yeşil buton iyi çalışır. Çoğunlukla yeşil olan bir sayfada ise sıcak tonlu bir vurgu butonu genellikle daha iyi ayrışır. Nasıl karar vereceğiniz için dönüşüm odaklı renk şemaları rehberimize göz atın.

Yeşil için karanlık mod paleti gerekli mi?

Zorunlu değil, ancak koyu yeşil arka planlar zaten popüler bir tasarım tercihidir. Karanlık mod sunuyorsanız açık paleti olduğu gibi kullanmayın: beyaz üzerinde başarısız olan parlak yeşiller siyaha yakın yeşil üzerinde genellikle çok iyi çalışır; örneğin #052E16 üzerinde #22C55E 6,54:1 ölçülür.

Kısa cevap: Yeşil bir web sitesi için butonlarda, bağlantılarda ve başlıklarda #166534 veya #2D6A4F gibi koyu bir yeşil, arka plan için #F6F4EC veya #F0FDF4 gibi tonlu bir kırık beyaz kullanın; #22C55E gibi parlak yeşilleri yalnızca koyu arka planlarda veya dekoratif amaçla tutun. Açık zeminler üzerindeki koyu yeşiller WCAG AA 4,5:1 metin eşiğini geçer. Beyaz üzerindeki parlak yeşiller geçmez (beyaz üzerinde #22C55E 2,28:1'dir).

Aşağıda hex değerleri, ölçülmüş kontrast oranları ve her birinin uygun olduğu site türüyle birlikte altı yeşil palet var. Tüm oranlar WCAG göreli parlaklık (relative luminance) formülüyle hesaplandı; herhangi bir çifti renk kontrast denetleyicisinde kendiniz de doğrulayabilirsiniz.

Yeşil ekranda neden zor bir renktir

Yeşil, parlaklık aralığının ortasında yer alır. Orta tonlu bir yeşil canlı görünür, ancak beyaz üzerinde metin için çoğu zaman fazla açık, siyah üzerinde ise çoğu zaman fazla koyudur. Bu yüzden logoda harika duran bir yeşil, buton rengi olarak yetersiz kalabilir.

Pratik kural: yeşilinizi renk örneğindeki görünüşüne göre değil, kontrast oranına göre seçin. Normal metin için 4,5:1 veya üzerini hedefleyin. Büyük metin (yaklaşık 24px normal ya da 19px kalın ve üzeri) ile giriş alanı kenarlıkları ve simgeler gibi arayüz bileşenleri için asgari oran 3:1'dir.

Hex kodlu altı yeşil web sitesi paleti

Her palette bir arka plan, bir metin rengi, buton veya bağlantılar için bir vurgu rengi ve önemli olan çiftin kontrast oranı yer alır.

1. Orman yeşili ve krem (editoryal, outdoor, yeme-içme)

Rol	Hex	Çift ve oran
Arka plan	#F6F4EC
Metin ve başlıklar	#1B4332	arka plan üzerinde: 10,06:1
Buton / bağlantı	#2D6A4F	üzerindeki beyaz metin: 6,39:1
Yumuşak panel	#95D5B2	üzerindeki #1B4332 metin: 6,56:1

Sıcak, sakin ve okunaklı. Krem arka plan, paletin steril görünmesini engeller. Restoranlar, çiftlik dükkânları, seyahat siteleri ve uzun içerikli siteler için uygundur.

2. Taze nane (sağlıklı yaşam, klinikler, sağlık içerikleri)

Rol	Hex	Çift ve oran
Arka plan	#F0FDF4
Metin ve başlıklar	#14532D	arka plan üzerinde: 8,70:1
Buton	#15803D	üzerindeki beyaz metin: 5,02:1
Koyu bant	#052E16	üzerindeki #DCFCE7 metin: 13,57:1

Hafif ve temiz. Buton yeşili AA eşiğinin ancak biraz üzerinde olduğundan, buton etiketlerini normal veya daha kalın yazı ağırlığında tutun ve bu rengi tonlu panellerin üzerine koymaktan kaçının.

3. Adaçayı ve zeytin (stüdyolar, iç mekân tasarımı, el yapımı ürünler)

Rol	Hex	Çift ve oran
Arka plan	#E9F5DB
Metin ve başlıklar	#31572C	arka plan üzerinde: 7,33:1
Buton	#4F772D	üzerindeki beyaz metin: 5,24:1
Vurgu	#90A955	üzerindeki #132A13 metin: 5,84:1

Mat ve toprak tonlu bir palet. Yeşili bağırtmadan kullanmak istediğiniz portfolyolar ve butik markalar için iyi çalışır.

4. Koyu yeşil karanlık tema (fintech, SaaS, premium)

Rol	Hex	Çift ve oran
Arka plan	#081C15
Metin	#B7E4C7	arka plan üzerinde: 12,58:1
Vurgu / bağlantılar	#40916C	arka plan üzerinde: 4,62:1
Kart	#1B4332	üzerindeki #95D5B2 metin: 6,56:1

Koyu arka planlar, orta tonlu yeşillerin vurgu olarak çalışmasına izin verir. #40916C'nin #081C15 üzerinde geçtiğini ama beyaz üzerinde başarısız olduğunu (3,83:1) unutmayın; bu yüzden açık bir bölümde yeniden kullanmayın.

5. Koyu yeşil üzerinde neon lime (etkinlikler, içerik üreticileri, genç markalar)

Rol	Hex	Çift ve oran
Arka plan	#1A2E05
Başlık / buton	#A3E635	arka plan üzerinde: 9,69:1
Alternatif parlak ton	#22C55E	#052E16 üzerinde: 6,54:1

Yüksek enerjili ve çok okunaklı, çünkü açık lime koyu bir zeminde duruyor. Ölçülü kullanın: baştan sona lime olan bir sayfa gözü çabuk yorar.

6. Turkuaz yeşil (SaaS, sağlık teknolojisi, sürdürülebilirlik)

Rol	Hex	Çift ve oran
Arka plan	#CCFBF1
Metin ve başlıklar	#134E4A	arka plan üzerinde: 8,41:1
Buton	#0F766E	üzerindeki beyaz metin: 5,47:1

Maviye kayan bir yeşil; "doğa" yerine daha teknik bir his verir. Organik görünüm olmadan yeşil istediğinizde iyi bir seçimdir.

Yetersiz kalan yeşil tonlar ve yerine ne kullanmalı

Yetersiz kalan	Çift	Oran	Yerine kullanın
Parlak yeşil buton	Beyaz metinli #22C55E	2,28:1	Beyaz metinli #15803D (5,02:1)
Beyaz üzerinde lime bağlantı	Beyaz üzerinde #65A30D	3,09:1	Beyaz üzerinde #4D7C0F (4,99:1)
Orta tonlu yeşil gövde metni	Beyaz üzerinde #40916C	3,83:1	Beyaz üzerinde #2D6A4F (6,39:1)

Orta tonlu olanlar 3:1 eşiğini yine de geçtiği için büyük başlıklarda, simgelerde ve kenarlıklarda kabul edilebilir; yalnızca paragraf metni veya küçük bağlantılar için uygun değildir. Nelerin ters gittiğini daha ayrıntılı görmek için kötü renk kontrastı örnekleri sayfasına, genel olarak daha güçlü eşleşmeler için ise yüksek kontrastlı renk paletleri rehberine bakın.

Adım adım kendi yeşil paletinizi oluşturun

Önce yeşilin görevini belirleyin. Marka rengi mi, eylem rengi mi, yoksa sadece bir vurgu mu? Yalnızca marka için kullanılan yeşiller herhangi bir ton olabilir. Eylem yeşilleri kontrast testini geçmek zorundadır.
Koyu bir çıpa seçin. #14532D ile #2D6A4F arasında bir yeşille başlayın. Bu, açık arka planlarda başlık, bağlantı ve buton renginiz olur.
Arka planı tonlayın. Saf beyaz yerine çok açık bir yeşil veya sıcak bir krem kullanın; örneğin #F0FDF4 veya #F6F4EC. Tonlamadan sonra metin kontrastını yeniden kontrol edin.
Yeşil olmayan bir vurgu rengi ekleyin. Yeşilin bol olduğu sayfalarda amber veya kiremit, butonların ayrışmasını sağlar. Etiket kontrastını doğrulayın: örneğin #FEF3C7 üzerinde #92400E metin 6,37:1 ölçülür.
Her metin-arka plan çiftini test edin. Başlıkları, gövde metnini, bağlantıları, butonları ve yer tutucu metni bir denetleyiciden geçirin. Gövde metni boyutunda 4,5:1'in altındaki her şey daha koyu veya daha açık bir ton gerektirir.
Hover ve devre dışı durumlarını kontrol edin. Hover tonları çoğu zaman yetersiz kontrast bölgesine kayar.
Paleti adlandırılmış token'lar olarak kaydedin. brand-900, brand-700 ve brand-100 gibi değişken adları kullanmak, sonraki değişiklikleri tek satırlık bir düzenlemeye indirir. Tailwind CSS renkleri rehberimiz ton skalası fikrini gösteriyor; yukarıdaki hex kodlarının birçoğu da bu tür bir skaladan geliyor.

Hangi site türü için hangi yeşil

Sürdürülebilirlik, enerji, sivil toplum kuruluşları: orman yeşili ve krem ya da adaçayı. Bu havanın gerçek örneklerini Greenfield Renewables şablonumuzda görebilirsiniz.
Sağlık ve sağlıklı yaşam: taze nane veya turkuaz yeşil.
Finans ve SaaS: koyu yeşil karanlık tema ve tek bir parlak vurgu.
Yeme-içme, çiftlik, bahçe: orman yeşili ve krem, yanında sıcak bir vurgu rengi.
İçerik üretici ve etkinlik sayfaları: koyu yeşil üzerinde neon lime; yalnızca başlıklarda ve tek bir butonda.

Yayınlamadan önce kopyalayıp kullanabileceğiniz kontrol listesi

[ ] Gövde metni arka planına karşı en az 4,5:1
[ ] Büyük metin ve simgeler en az 3:1
[ ] Buton etiketleri buton dolgusuna karşı 4,5:1'i geçiyor
[ ] Bağlantılar, gövde metninden yalnızca renkle değil başka bir işaretle de ayrışıyor (alt çizgi işe yarar)
[ ] Parlak yeşiller yalnızca koyu arka planlarda veya dekoratif amaçla kullanılıyor
[ ] Yeşil dışında en fazla bir vurgu rengi var
[ ] Koyu bölümler, açık moddan geri dönüştürülmüş değil, kendi test edilmiş çiftlerini kullanıyor
[ ] Palet, tek yerden değiştirilebilmesi için adlandırılmış token'lar olarak kaydedilmiş

Bir sitenin toplamda kaç renge ihtiyaç duyduğundan emin değilseniz, web sitesi renk şemaları rehberi temelleri anlatıyor; renk paleti sözlük maddesi ise burada kullanılan terimleri tanımlıyor.

Yeşil paleti gerçek bir siteye uygulamak

Hex kodlarınızı belirledikten sonra bunları uygulayacağınız bir yere ihtiyacınız var. We.Inc'in ücretsiz planı, hazır şablonlardan en fazla üç site yayınlamanıza olanak tanır; bir istemden site taslağı hazırlayan yapay zeka oluşturucu ise ayda $20 olan Starter planıyla başlar. Buradan kaydolabilir, arka plan, metin ve buton hex kodlarınızı site stillerine yapıştırabilir, ardından yayınlanan sayfalarda aynı kontrast testlerini çalıştırabilirsiniz.

Ücretsiz başlayın · Kredi kartı gerekmez

Umair Ali Sadaqat

We.Inc Kurucusu

Umair, We.Inc’in kurucusudur. Yapay zekâyla web sitesi oluşturma, ajanslar ve web stüdyosu işletmeciliği hakkında yazar.

Harika bir şey oluşturmaya hazır mısınız?

Tek platformdan başlamak, büyümek ve otomatikleştirmek için We.Inc kullanan 15,000+ işletmeye katılın.