Colori verdi per siti web: 6 palette con codici hex

Palette verdi per siti web con codici hex, abbinamenti testo con contrasto verificato e usi consigliati: scegli un verde leggibile e coerente con il tuo brand.

Domande frequenti

Qual è il verde migliore per un sito web?

Non esiste un verde migliore in assoluto, ma un verde intenso e leggermente desaturato come #166534 o #2D6A4F è il punto di partenza più sicuro. Entrambi superano la soglia WCAG AA di 4,5:1 per il testo su bianco (7,13:1 e 6,39:1), quindi vanno bene per pulsanti, link e titoli. I verdi brillanti come #22C55E non la superano su bianco (2,28:1) ed è meglio riservarli a icone o sfondi scuri.

Quali colori stanno bene con il verde in un sito web?

Bianchi caldi e crema (#F6F4EC), verdi quasi neri (#081C15) e un unico accento caldo come ambra o terracotta si abbinano tutti bene. Usa neutri con una leggera dominante verde invece del grigio puro, così la pagina risulta coesa, e limita l'accento a un solo colore per le azioni.

Il verde è accessibile per il testo?

I verdi scuri sì, quelli chiari e medi spesso no. Le WCAG 2 AA richiedono almeno 4,5:1 per il testo normale e 3:1 per il testo grande e i componenti dell'interfaccia. Verifica ogni coppia di colori invece di giudicare a occhio: i verdi di tonalità media come #40916C (3,83:1 su bianco) rientrano nella fascia in cui il contrasto basta solo per il testo grande.

Cosa comunica il verde nel web design?

Il verde è associato più spesso a natura, crescita, salute, sostenibilità e denaro, ed è per questo che compare così spesso su siti di benessere, finanza, energia e outdoor. Il significato cambia con la tonalità: i verdi foresta intensi trasmettono solidità e calma, mentre il lime appare energico e moderno. Considera queste associazioni convenzioni, non certezze, e mettile alla prova con il tuo pubblico.

Devo usare il verde per i pulsanti di call to action?

Puoi farlo, purché il pulsante si distingua dal resto della pagina e l'etichetta abbia un contrasto sufficiente. Un pulsante verde scuro con testo bianco funziona su pagine chiare. Su una pagina in gran parte verde, un pulsante con accento caldo spesso si stacca meglio. Consulta la nostra guida agli schemi di colori che favoriscono le conversioni per decidere.

Mi serve una palette verde per la modalità scura?

Non è obbligatoria, ma gli sfondi verde scuro sono già una scelta di design molto apprezzata. Se la offri, non riutilizzare semplicemente la palette chiara: i verdi brillanti che falliscono su bianco spesso funzionano bene su un verde quasi nero, ad esempio #22C55E su #052E16 raggiunge 6,54:1.

In breve: per un sito web verde usa un verde intenso come #166534 o #2D6A4F per pulsanti, link e titoli, un bianco sporco con sottotono come #F6F4EC o #F0FDF4 per lo sfondo, e riserva i verdi brillanti come #22C55E a sfondi scuri o a usi decorativi. I verdi scuri su sfondo chiaro superano la soglia WCAG AA di 4,5:1 per il testo. I verdi brillanti su bianco no (#22C55E su bianco è 2,28:1).

Qui sotto trovi sei palette verdi con valori hex, rapporti di contrasto misurati e il tipo di sito a cui si adattano. Ogni rapporto è stato calcolato con la formula della luminanza relativa WCAG e puoi verificare qualsiasi coppia da solo con il verificatore di contrasto colori.

Perché il verde è difficile sugli schermi

Il verde si trova a metà della scala di luminanza. Un verde medio appare vivace, ma su bianco è spesso troppo chiaro per il testo e su nero spesso troppo scuro. Per questo un verde che sta benissimo in un logo può non andare bene come colore di un pulsante.

La regola pratica: scegli il verde in base al rapporto di contrasto, non a come appare in un campione di colore. Per il testo normale punta a 4,5:1 o più. Per il testo grande (circa 24px regular o 19px grassetto e oltre) e per i componenti dell'interfaccia come bordi dei campi e icone, il minimo è 3:1.

Sei palette verdi per siti web con codici hex

Ogni palette indica uno sfondo, un colore per il testo, un accento per pulsanti o link e il rapporto di contrasto della coppia che conta.

1. Foresta e crema (editoriale, outdoor, food)

Ruolo	Hex	Coppia e rapporto
Sfondo	#F6F4EC
Testo e titoli	#1B4332	su sfondo: 10.06:1
Pulsante / link	#2D6A4F	testo bianco sopra: 6.39:1
Pannello tenue	#95D5B2	testo #1B4332 sopra: 6.56:1

Calda, rilassante e leggibile. Lo sfondo crema evita l'effetto clinico. Ottima per ristoranti, botteghe agricole, viaggi e siti con contenuti lunghi.

2. Menta fresca (benessere, studi medici, contenuti sulla salute)

Ruolo	Hex	Coppia e rapporto
Sfondo	#F0FDF4
Testo e titoli	#14532D	su sfondo: 8.70:1
Pulsante	#15803D	testo bianco sopra: 5.02:1
Fascia scura	#052E16	testo #DCFCE7 sopra: 13.57:1

Leggera e pulita. Il verde del pulsante supera di poco la soglia AA, quindi mantieni le etichette dei pulsanti con peso normale o più marcato ed evita di posizionarlo su pannelli colorati.

3. Salvia e oliva (studi, interior design, prodotti artigianali)

Ruolo	Hex	Coppia e rapporto
Sfondo	#E9F5DB
Testo e titoli	#31572C	su sfondo: 7.33:1
Pulsante	#4F772D	testo bianco sopra: 5.24:1
Evidenziazione	#90A955	testo #132A13 sopra: 5.84:1

Una palette tenue e naturale. Funziona bene per portfolio e brand boutique, quando vuoi il verde senza che sia invadente.

4. Tema scuro verde intenso (fintech, SaaS, premium)

Ruolo	Hex	Coppia e rapporto
Sfondo	#081C15
Testo	#B7E4C7	su sfondo: 12.58:1
Accento / link	#40916C	su sfondo: 4.62:1
Card	#1B4332	testo #95D5B2 sopra: 6.56:1

Sugli sfondi scuri i verdi medi funzionano bene come accenti. Nota che #40916C è sufficiente su #081C15 ma non su bianco (3,83:1), quindi non riutilizzarlo in una sezione chiara.

5. Lime fluo su verde scuro (eventi, creator, brand giovani)

Ruolo	Hex	Coppia e rapporto
Sfondo	#1A2E05
Titolo / pulsante	#A3E635	su sfondo: 9.69:1
Alternativa brillante	#22C55E	su #052E16: 6.54:1

Molta energia e ottima leggibilità, perché il lime chiaro poggia su una base scura. Usalo con parsimonia: una pagina intera in lime stanca presto la vista.

6. Verde acqua (SaaS, health tech, sostenibilità)

Ruolo	Hex	Coppia e rapporto
Sfondo	#CCFBF1
Testo e titoli	#134E4A	su sfondo: 8.41:1
Pulsante	#0F766E	testo bianco sopra: 5.47:1

Tende al blu-verde, quindi appare più tecnico e meno "naturale". Adatto quando vuoi il verde senza l'effetto organico.

Verdi che non funzionano e con cosa sostituirli

Non funziona	Coppia	Rapporto	Alternativa
Pulsante verde brillante	#22C55E con testo bianco	2.28:1	#15803D con testo bianco (5.02:1)
Link lime su bianco	#65A30D su bianco	3.09:1	#4D7C0F su bianco (4.99:1)
Testo corrente in verde medio	#40916C su bianco	3.83:1	#2D6A4F su bianco (6.39:1)

Le tonalità medie superano comunque la soglia di 3:1, quindi vanno bene per titoli grandi, icone e bordi, ma non per i paragrafi o i link piccoli. Per approfondire gli errori più comuni, leggi gli esempi di cattivo contrasto dei colori e, per abbinamenti più forti in generale, la guida alle palette di colori ad alto contrasto.

Come costruire la tua palette verde, passo dopo passo

Decidi prima il ruolo del verde. È il colore del brand, quello delle azioni o solo un accento? I verdi usati solo per il brand possono essere di qualsiasi tonalità. I verdi per le azioni devono superare il test di contrasto.
Scegli un'ancora scura. Parti da un verde tra #14532D e #2D6A4F. Sarà il colore di titoli, link e pulsanti su sfondi chiari.
Dai una tinta allo sfondo. Usa un verde molto chiaro o un crema caldo al posto del bianco puro, ad esempio #F0FDF4 o #F6F4EC. Dopo la tinta, ricontrolla il contrasto del testo.
Aggiungi un accento che non sia verde. Ambra o terracotta accanto al verde fanno risaltare i pulsanti nelle pagine con molto verde. Verifica il contrasto dell'etichetta: ad esempio il testo #92400E su #FEF3C7 raggiunge 6.37:1.
Testa ogni coppia testo-sfondo. Passa titoli, testo corrente, link, pulsanti e segnaposto in un verificatore. Qualsiasi valore sotto 4,5:1 a dimensione di testo corrente richiede una tonalità più scura o più chiara.
Controlla gli stati hover e disabilitato. Le tonalità in hover spesso scivolano in valori che non superano il test.
Salva la palette come token con nome. Usare nomi di variabile come brand-900, brand-700 e brand-100 rende le modifiche future una questione di una sola riga. La nostra guida ai colori di Tailwind CSS mostra l'idea della scala di tonalità, e diversi valori hex qui sopra provengono da una scala di quel tipo.

Quale verde per quale tipo di sito

Sostenibilità, energia, no profit: foresta e crema, oppure salvia. Esempi concreti di questa atmosfera sono nel nostro template Greenfield Renewables.
Salute e benessere: menta fresca o verde acqua.
Finanza e SaaS: tema scuro verde intenso, con un solo accento brillante.
Food, azienda agricola, giardinaggio: foresta e crema con un accento caldo.
Pagine per creator ed eventi: lime fluo su verde scuro, limitato ai titoli e a un solo pulsante.

Checklist da copiare prima di pubblicare

[ ] Il testo corrente ha almeno 4,5:1 di contrasto con lo sfondo
[ ] Il testo grande e le icone hanno almeno 3:1
[ ] Le etichette dei pulsanti raggiungono 4,5:1 rispetto al colore del pulsante
[ ] I link si distinguono dal testo corrente non solo per il colore (la sottolineatura funziona)
[ ] I verdi brillanti compaiono solo su sfondi scuri o come decorazione
[ ] Non più di un colore di accento oltre al verde
[ ] Le sezioni scure usano coppie testate apposta, non quelle riciclate dalla modalità chiara
[ ] La palette è salvata come token con nome, così si modifica in un unico punto

Se non sei sicuro di quanti colori servano in tutto a un sito, la guida agli schemi di colori per siti web spiega le basi e la voce del glossario sulla palette di colori definisce i termini usati qui.

Applicare una palette verde a un sito vero

Una volta ottenuti i codici hex, serve un posto dove applicarli. Il piano gratuito di We.Inc ti permette di pubblicare fino a tre siti a partire da template già pronti; il builder AI che crea una bozza di sito da un prompt parte dal piano Starter a $20 al mese. Puoi registrarti qui, incollare gli hex di sfondo, testo e pulsanti negli stili del sito e poi rifare gli stessi controlli di contrasto sulle pagine pubblicate.

Inizia gratis · Nessuna carta di credito richiesta

Umair Ali Sadaqat

Fondatore di We.Inc

Umair è il fondatore di We.Inc. Scrive di creazione di siti web con l’IA, agenzie e gestione di uno studio web.

Pronto a creare qualcosa di grande?

Unisciti a 15,000+ aziende che usano We.Inc per lanciare, crescere e automatizzare, tutto da un'unica piattaforma.