32 schemi colore per siti web con codici hex, dai template di We.Inc, più come costruire uno schema che converte: una palette base calma con un accento riservato alle azioni, esempi per settore e controlli di accessibilità.
Nessun singolo colore vince ovunque. Il miglior colore per un pulsante è uno che contrasta fortemente con la tua pagina e non è usato per nient'altro, così l'occhio va dritto lì.
Un approccio comune è una base neutra (bianco o bianco sporco e un colore testo scuro), un colore brand primario e un accento per le call to action, più colori semantici per i messaggi di successo ed errore. Più di così di solito indebolisce la gerarchia visiva.
Le associazioni di colore esistono, ma variano per cultura, settore e contesto, e molte affermazioni popolari sono esagerate. Ciò che influenza in modo affidabile le conversioni è il contrasto, la leggibilità e se l'azione che vuoi è visivamente ovvia.
Gli acquirenti industriali valorizzano chiarezza e fiducia. Blu navy, antracite e grigi acciaio con un unico accento forte, spesso arancione o giallo di sicurezza o un blu brillante, si adattano alla categoria. Assicurati che schede tecniche, pulsanti preventivo e numeri di telefono usino l'accento così sono facili da trovare.
Usa un controllo contrasto come quello di WebAIM. Il WCAG 2.2 livello AA richiede almeno un contrasto di 4,5:1 per il testo normale e 3:1 per il testo grande e per elementi chiave dell'interfaccia come bordi dei pulsanti e campi dei moduli.
Nessun singolo colore converte meglio. Ciò che conta è quanto un pulsante risalta rispetto alla sua pagina. Gli schemi colore che convertono sono quelli con una base calma e coerente e un accento ad alto contrasto riservato solo alle azioni che vuoi che le persone compiano.
Quindi invece di chiedere "quale colore?", chiedi "il mio pulsante più importante non assomiglia a nient'altro nella pagina?" Questa guida mostra come costruire uno schema attorno a quell'idea.
Queste palette sono prese dalla fonte dei template di We.Inc (i quattro colori più usati nell'anteprima di ogni design, escludendo i grigi semplici della cornice dell'anteprima). Sono design di template, non siti di clienti, e non facciamo alcuna affermazione su come convertono. Copia un codice hex nel selettore di colori hex per visualizzarlo e ottenere i valori RGB/HSL, e controlla ogni coppia testo-sfondo nel verificatore di contrasto colori prima di usarla.
| Template We.Inc | Stile | Colori (hex) | Schema |
|---|---|---|---|
| Atlas Builders | Costruzioni / mestieri | #101d2c #0b1521 #f2a614 #d18f0a | Base blu navy scuro, colore azione ambra |
| Summit Trades | Mestieri | #0e2436 #e4671e #16222e #f6eeec | Navy con arancione di sicurezza |
| Ironpeak Roofing | Coperture | #e4671e #0e2436 #17415f #16222e | Dominato dall'arancione, struttura navy |
| Ridgewater Plumbing | Idraulica | #b08544 #d8401f #f2ede3 #c9a063 | Ottone e rosso su crema calda |
| Sunward Solar | Solare | #0b1f3a #f5a524 #d98a0b #fff6e6 | Blu mezzanotte e oro solare |
| Hookline Towing | Soccorso stradale | #0e0e0e #ffc400 #f4f1ea #161616 | Nero e giallo alta visibilità |
| Redline Auto Group | Concessionaria auto | #e3262e #0e0f11 #eeeeee #17191c | Rosso racing su quasi-nero |
| Maple Street Motors | Autofficina | #1f4d3a #1b1b1b #f2b134 #e6efe9 | Verde foresta con senape |
| Freshpile Carpet Cleaning | Pulizie | #ffd23f #0d1b52 #1d3fd8 #dbe2ff | Giallo brillante su navy reale |
| Tideline Pressure Washing | Pulizie esterne | #0b1b2b #3fd0c9 #f3f6f5 #020617 | Navy scuro con acqua |
| Mowline Lawn Care | Cura del prato | #eef3e6 #c6f24e #0f1410 #1a2a17 | Base verde chiaro, accento lime |
| Fairway Lawn Co. | Giardinaggio | #f6f1e7 #1d2b1f #e8c872 #2f5d3a | Crema, verde scuro, oro tenue |
| Brightside Dental | Dentistico | #10312e #3f605c #0e5f57 #0a4841 | Verdi teal calmi |
| Meadowpaw Veterinary | Veterinario | #2f6e6a #e9f0ef #c9d7d4 #f7f9f8 | Teal attenuato su menta chiara |
| Vibrant Wellness | Clinica benessere | #25382c #eef2e6 #7c9a7e #3f6b4a | Salvia e foresta |
| Kinfolk Home Care | Assistenza domiciliare | #0f3d2e #f4c542 #fffdf6 #0a2e22 | Verde pino con giallo caldo |
| Lumora | Sanità | #c8a97e #182c41 #0b1220 #0e1a26 | Navy mezzanotte con oro sabbia |
| Sterling & Vance LLP | Studio legale | #8a93a2 #b08a4f #0b0e14 #f6eeec | Ardesia, bronzo e inchiostro |
| Harborview Wealth Partners | Consulenza finanziaria | #102a43 #b08d57 #d9bf8f #faf8f4 | Navy e oro su avorio |
| Harborline Insurance Agency | Assicurazioni | #0f2742 #5fd3c9 #17a398 #0b1e33 | Navy con teal |
| Larkfield Partners | Consulenza | #1f4d3f #f4f1ea #14181c #4a5560 | Verde bottiglia su carta |
| Keystone Realty | Immobiliare | #f6eeec #7a2e2a #59606b #e9f0ef | Base cipria con bordeaux |
| Lucia Trattoria | Ristorante | #e9c9a8 #f7f1e6 #efe6d4 #23301f | Sabbia calda con oliva-nero |
| Ember & Roast | Caffè / ristorante | #ede6dc #c9642f #14100d #f6eeec | Crema, arancione bruciato, espresso |
| Kilnhouse Coffee | Caffetteria | #2b1d16 #c65d3b #f3ebe0 #fff8ef | Marrone tostato e terracotta |
| Parcel No. 9 Wines | Cantina | #3a0a15 #fbe9e3 #b8324b #f4a7a0 | Bordeaux con rosa |
| Petalry Florist | Fioraio | #3e1f2b #b4546c #fbf5f2 #f3e3dd | Prugna e rosa polveroso |
| Hollow Oak Farm Shop | Negozio di fattoria | #24301f #f6f1e4 #5e7f3a #e3a33b | Muschio, crema e miele |
| Suds & Scruff | Toelettatura animali | #3b1740 #ffd84d #ff8fab #fff8e7 | Melanzana, giallo e rosa |
| Datacore SaaS Hero | SaaS | #7b39fc #a484d7 #6a2ce0 #f87b52 | Viola con corallo |
| Mast Security | Sicurezza | #1e2628 #34e0a1 #e7ede9 #8d9a97 | Grafite con menta |
| Afterglow Sound | Eventi / musica | #efeaff #f472b6 #ec4899 #8b5cf6 | Lavanda, rosa e viola |
Un pattern che vedrai in tutti questi schemi: la maggior parte abbina una base scura o chiara con un accento saturo (ambra, arancione, giallo, lime o corallo). È la stessa struttura "base discreta, un colore azione" descritta di seguito.
Gli articoli di psicologia del colore spesso affermano che il blu significa fiducia, il rosso urgenza e il verde crescita. C'è qualche verità nelle associazioni generali, ma dipendono molto da cultura, settore e contesto. Il rosso è un avvertimento in un contesto e una celebrazione in un altro. Il verde può significare "via libera", "eco" o "denaro".
Ciò che è ben supportato è l'effetto isolamento, noto anche come effetto Von Restorff: un elemento che differisce dal suo contesto ha più probabilità di essere notato e ricordato. Un pulsante che è l'unico arancione su una pagina blu e bianca viene notato. Lo stesso arancione su una pagina piena di arancione no.
Questo ti dà due regole valide in tutti i settori:
Gli interior designer usano una suddivisione 60-30-10, e si traduce bene nei siti web:
| Quota | Ruolo | Scelta tipica |
|---|---|---|
| ~60% | Sfondo e base | Bianco, bianco sporco, grigio molto chiaro, o un scuro profondo per i temi dark |
| ~30% | Brand e struttura | Colore brand primario per header, nav, sfondi delle sezioni |
| ~10% | Accento / azione | Pulsanti, link chiave, l'unica cosa su cui vuoi che si clicchi |
Aggiungi un colore testo scuro (è comune quasi-nero o grigio scuro anziché nero puro) e colori semantici: verde per il successo, rosso per gli errori, ambra per gli avvisi. Tieni quei colori semantici lontani dai tuoi pulsanti principali così un pulsante "Acquista ora" non viene confuso con un errore.
Se hai un logo, prendi il suo colore principale come primario. Se no, scegline uno adatto alla tua categoria (guarda la tabella sotto) e che ti piaccia abbastanza da conviverci.
Guarda il cerchio cromatico. I colori complementari (opposti tra loro) creano il pop più forte: blu e arancione, viola e giallo, verde acqua e corallo. Se il tuo brand è blu, un accento arancione o giallo caldo risalterà molto più di una seconda tonalità di blu.
Scegli uno sfondo, un colore superficie per le card, un grigio per i bordi e un colore testo. Questi fanno la maggior parte del lavoro e dovrebbero essere discreti.
Passa ogni combinazione testo e pulsante attraverso un controllo contrasto (quello di WebAIM è gratuito). Il WCAG 2.2 livello AA richiede:
Il testo grigio a basso contrasto su bianco è uno dei problemi di leggibilità più comuni sul web. Se le persone faticano a leggere la tua offerta, il colore del pulsante conta a malapena.
Controlla la tua palette su un telefono all'aperto, su uno schermo economico di laptop e in modalità scura se il tuo sito la supporta. I colori che sembrano raffinati sul monitor di un designer possono sbiadire altrove.
Questi sono punti di partenza sensati, non regole. Ognuno usa una base discreta e un unico accento in contrasto.
| Settore | Base e primario | Accento per le azioni | Perché funziona |
|---|---|---|---|
| Manifatturiero / industriale | Blu navy, antracite, grigio acciaio | Arancione o giallo di sicurezza | Serio e affidabile, con un "Richiedi un preventivo" visibile |
| Sanità / dentistico | Bianco, blu tenue o verde acqua | Corallo caldo o verde | Pulito e calmo, il pulsante di prenotazione risalta |
| Legale / finanza | Blu navy profondo o verde foresta, crema | Oro o blu brillante | Segnali di fiducia tradizionali con un'azione di contatto chiara |
| Ristoranti / cibo | Neutri caldi, rosso profondo o oliva | Giallo o arancione brillante | Invitante, con un "Ordina" o "Prenota" ovvio |
| SaaS / tech | Bianco o quasi-nero, indaco o blu | Verde, arancione o rosa vivido | Nitido, con un "Inizia gratis" ad alto contrasto |
| Bellezza / benessere | Rosa cipria, salvia, crema | Prugna profondo o nero | Brand delicato, pulsante di prenotazione sicuro |
| Servizi domestici (idraulica, HVAC, coperture) | Bianco, blu scuro | Rosso o arancione | Pulsante di chiamata che trasmette urgenza per le emergenze |
| E-commerce / moda | Prevalentemente bianco e nero | Un accento del brand | Lascia che le foto prodotto portino il colore |
Per i produttori nello specifico: gli acquirenti spesso atterrano su una pagina prodotto o capacità e vogliono una scheda tecnica o un preventivo. Rendi "Richiedi un preventivo", "Scarica scheda tecnica" e il numero di telefono gli unici elementi con il colore accento su quelle pagine.
Immagina il sito di un'azienda di giardinaggio con un logo verde, titoli verdi, icone verdi, uno sfondo hero verde e un pulsante "Ottieni un preventivo gratuito" verde. Tutto è coerente col brand, e il pulsante scompare.
La correzione:
Nulla del brand è cambiato, ma l'azione è ora la cosa più visibile sullo schermo.
Se hai abbastanza traffico, esegui un A/B test sul colore del pulsante o dell'accento, ma cambia una cosa alla volta e lascialo girare abbastanza a lungo da essere significativo. I siti a basso traffico spesso non possono raggiungere un risultato affidabile; per loro funzionano controlli più semplici:
Il colore è una parte di ciò che fa convertire una pagina; la nostra analisi degli esempi di landing page che convertono copre il resto. Con We.Inc puoi descrivere in chat il look che vuoi, come "blu navy e grigio con un pulsante preventivo arancione", sfogliare i modelli, e poi affinare i colori visivamente o via codice.
Inizia gratis · Nessuna carta di credito richiesta