SOS WP
  • Home
  • Guide WordPress
  • Video Corsi
  • Risorse
  • Servizi
    • Tutti i serviziScopri gli oltre 13 servizi web che offriamo per chi come te vuole avere un sito web di successo.
    • Creazione sito webOttimizzato per la SEO, per il mobile, con funzionalità illimitate.
    • Interventi variProblemi con il tuo sito? Richiedi la nostra assistenza WordPress.
    • Consulenza SEOUn esperto SEO al tuo fianco per posizionare il tuo sito su Google.
    • Messa in sicurezza del sitoProteggiamo il tuo sito da attacchi hacker e risaniamo siti compromessi.
    • Formazione WordPress via SkypeLa migliore formazione 1 a 1 per usare WordPress.
    • Richiedi un preventivo su misura!
    • Hai bisogno di realizzare un sito web? Realizzare un sito ecommerce? Posizionarti su Google? AndyBot, il nostro assistente virtuale, ti assisterà immediatamente! AVVIA UNA CHAT
    • ⟵Torna al menu principale
  • Assistenza WordPress
  • Menu

Categorie:

  • Ispirazione
  • Usare WordPress
  • Dominio e Hosting
  • Creare blog
  • Creare siti web
  • eCommerce
  • Temi
  • Plugin
  • SEO
  • Tutte

  • Creare siti multlingua
  • Copywriting
  • Dove trovare immagini
  • Email marketing
  • Guadagnare online
  • Varie

CATEGORIE

  • Ispirazione
  • Usare WordPress
  • Dominio e Hosting
  • Creare blog
  • Creare siti web
  • eCommerce
  • Temi
  • Plugin
  • SEO
  • Creare siti mulitlingua
  • Copywriting
  • Dove trovare immagini
  • Email marketing
  • Guadagnare online
  • Varie

Comincia qui per avere la soluzione al tuo problema

Background Icons
Scegli il migliore schema di colori per il tuo sito
Sei qui:
  • Home /
  • Blog /
  • Ispirazione

Scegli il migliore schema di colori per il tuo sito

Andrea Di Rocco 11 Dicembre 2017
8

Apri l'indice dei contenuti

  • Scegli il migliore schema di colori per il tuo sito seguendo questa regola d’oro
    • La ruota dei colori
  • Da dove iniziare per scegliere i colori?
  • Impara a sfruttare il verde, il giallo ed il rosso
  • Scegli lo schema colori del tuo sito
  • Non sai da dove iniziare?
    • Conclusione

Questa guida è stata aggiornata il 29 Ottobre, 2019

Iniziamo subito.

Scegli il migliore schema di colori per il tuo sito seguendo questa regola d’oro

Prima di avventurarci alla scoperta dei migliori colori per le diverse tipologie di business, è opportuno considerare che varie ricerche indicano che le prime impressioni e scelte veloci di un brand sono determinate dai colori. Una pagina web che utilizza uno schema colori di scarsa qualità, può risultare fastidiosa per l’utente o addirittura non visibile!

Affinché la combinazione dei colori risulti bilanciata e professionale, bisogna non esagerare. Quando definisci uno schema colori, limitati a tre toni:

  • un colore principale, che sarà usato per la maggior parte del sito
  • un secondo colore, in tono con quello principale, da usare per le aree secondarie
  • un terzo colore a contrasto, da usare con moderazione per mettere in evidenza alcuni elementi, come bottoni, link, eccetera.

Ti faccio un esempio: uno schema di colori di questo tipo potrebbe avere un blu scuro come colore principale, un blu più chiaro come colore secondario in tono, e l’arancione per gli elementi da mettere in evidenza.

Quando si lavora con i colori è facile farsi prendere la mano. Seguire una regola come questa ti aiuterà a non esagerare e a mantenere un aspetto professionale per il tuo sito.

La ruota dei colori

Ci sono tanti modi per scegliere uno schema di colori, uno strumento molto utile è la “ruota dei colori”. Questo diagramma mette in mostra la relazione tra differenti sfumature di colori collocandole su di uno spettro posto sulla ruota.

Sulla ruota dei colori, i colori primari (rosso, blu e giallo) sono posizionati su tre punti equidistanti; nel mezzo sono posizionati i vari gradienti: rosso che sfuma in viola fino al blu, blu che diventa verde poi giallo, giallo che passa ad arancione fino al rosso.

Evitando di annoiarti troppo con la teoria, di seguito trovi una breve rassegna dei più comuni schemi di colore.

schema di colori per il sito WordPress - ruota dei colori

Relazione complementare

Costruire uno schema con colori complementari è il modo più semplice per creare uno stile che è vibrante, vivo ed accattivante.
Questi colori sono posizionati in maniera opposta sulla ruota dei colori. Pensa al blu e all’arancione, viola e giallo o rosso e verde.

Colori complementari fanno risaltare gli elementi della pagina grazie al forte contrasto, ma devi trovare il giusto equilibrio per evitare di strafare.
Anche se il contrasto è forte, i colori complementari non sono necesseriamente validi per il testo.

Vari marchi famosi usano colori complementari, per esempio Visa (blu, arancione, giallo).

Relazione triadica

Uno schema triadico si basa su tre colori su punti opposti dello spettro del colore. Aiutandovi con una “ruota del colore”, scegliete un colore base e tracciate un triangolo equilatero partendo dal colore base.

Se iniziate con il blu, per esempio, gli altri punti del vostro triangolo saranno su giallo e rosso.

Schemi di colore triadici sono molto accesi e di forte impatto. Bisogna fare attenzione ad usarli in maniera armoniosa e ad utilizzare il colore base come dominante egli altri come semplici accenti.

Un esempio di schema di colore triadico è il logo del “Burger King”.

Relazione complementare divisa

Uno schema di colore complementare diviso è un’ottima scelta per chi si avvicina a queste tematiche. Utilizzando questo schema, è molto difficile sbagliare specialmente se si selezionano due colori principali ed il terzo che fa da accento.

Per esempio: inizia con un paio di colori complementari, selezionane uno e scegli due sfumature. Se inizi con rosso e verde, puoi rimpiazzare il rosso con viola e arancione.

I marchi “Fanta” e “Firefox” usano schemi di colore complementari divisi.

Relazione analoga

Gli schemi descritti fin’ora si basano sul contrasto tra colori. Uno schema di colori analogo si basa invece su colori adiacenti nella ruota dei colori.

Per esempio: blu e viola, giallo e arancione.

L’utilizzo di questo schema spesso trasmette un senso di equilibrio, armonia e naturalezza.

Il trucco con questo schema è creare sufficiente contrasto di colori, in modo che la pagina appare viva e vibrante. Molti siti web di successo usano varianti di shemi di colore analoghi.

Da dove iniziare per scegliere i colori?

Se vuoi selezionare il migliore schema di colori per il tuo sito, devi essere in grado di fare una distinzione tra i colori che ti piacciono e quelli che sono adatti al servizio/prodotto che offri. Infatti, non sempre le due cose combaciano.

Lo schema colori deve essere adatto:

  • All’argomento o al prodotto che tratti e
  • Al pubblico a cui ti rivolgi

Sicuramente, uno schema di colori perfetto per un sito di giochi per bambini non sarà adatto per il sito di uno studio commercialista.

La scelta delle tonalità da usare varia quindi da caso a caso, ci sono però delle regole generali che puoi usare come riferimento:

  • il blu trasmette professionalità
  • tra i colori meno popolari, ci sono l’arancione ed il marrone (se puoi, evita quindi di usarli come colore principale per il tuo sito)
  • il nero è spesso usato per comunicare un’idea di lusso
  • il rosa, molto usato nei siti che trattano argomenti di carattere femminile, è di fatto molto amato dalle donne
  • non sottovalutare il bianco. Usare il bianco non è affatto una scelta pigra, tutt’altro! Soprattutto se il tuo sito è ricco di testi, uno sfondo bianco è probabilmente la scelta migliore per garantire una leggibilità ottimale.

Impara a sfruttare il verde, il giallo ed il rosso

Alcuni colori, come il verde, il giallo ed il rosso sono tradizionalmente (ed inconsciamente) associati a determinati tipi di messaggi ed azioni.

Il verde è solitamente utilizzato per trasmettere sicurezza e successo. Usa quindi il verde per bottoni di conferma.

Il giallo è invece usato per comunicare agli utenti di prestare particolare attenzione a qualcosa (non a caso, il giallo è usato anche nei cartelli stradali)

attenzioneInfine, il rosso è usato per evidenziare errori.

stop rosso

Cerca di integrare questi colori nelle cosiddette “call-to-action” del tuo sito (per esempio, in form e bottoni).

Scegli lo schema colori del tuo sito

Ora che conosci alcune regole di base, vediamo come puoi creare uno schema di colori professionale. Esistono tanti strumenti che ti aiutano.

Se hai già in mente un colore da cui partire, puoi usare una delle tantissime applicazioni disponibili online per generare schemi di colore. Tra le mie preferite ci sono:

  • Coolors
  • Color Scheme Designer
  • ColourCo

Usando questi strumenti potrai creare combinazioni di colori e ricavarne i codici HEX (necessari per usare i colori all’interno del tuo sito WordPress).

Un altro strumento molto interessante che ti consiglio è Color Palette Generator, che puoi usare per creare schemi colori partendo da una fotografia o un’immagine.

Vuoi personalizzare il design del tuo sito? Il CSS è il tuo alleato!

Leggi la guida

Non sai da dove iniziare?

Non disperare. Sul web ci sono moltissime risorse ricche di esempi di schemi di colori. La prima cosa che ti consiglio di fare è ovviamente di visitare altri siti e prestare attenzione a come usano il colore.

Se sei alla ricerca di ispirazione, ti suggerisco anche di visitare questa pagina sul blog di Canva.

Canva combinazioni colori

Canva è uno strumento sensazionale per creare grafiche online, e qui sono elencate – con tanto di immagine, swatch di colori e codici hex, ben 100 combinazioni colori! Sono tutte veramente molto belle, non esitare quindi ad usarle come punto di partenza per creare la tua personalizzata.

A questo proposito, sono sicuro che troverai l’ispirazione anche nei casi di successo dei nostri utenti, come il sito di Fabio, un bellissimo esempio di equilibrio tra colori con il giusto dosaggio di contrasto per mettere in evidenza gli elementi più rilevanti.

O ancora nell’esempio di Daniele, che grazie all’uso dei colori riesce a trasmettere quel senso di calma e ordine, fondamentale per l’argomento di cui tratta il suo sito.

Servizi web e sviluppo tecnico

Conclusione

In questa guida ti ho fornito alcuni consigli per scegliere il migliore schema di colori per il tuo sito. Tutti i siti sono diversi, ed i colori che sono perfetti per uno potrebbero essere completamente fuori luogo per un altro – l’importante è trovare quelli che rispecchiano le aspettative ed i gusti dei tuoi utenti.

Tu quali colori usi per il tuo sito? Come sei arrivato alla scelta? Hai cercato ispirazione online, o ti sei forse fatto aiutare da un grafico? Come sempre, ne parliamo nei commenti!

Tags: ColoriCreare sito webCreare un blog
Lascia un Commento

Andrea Di Rocco

Fondatore di SOS WP, Autore

First Badge Item Second Badge Item Third Badge Item
La mia passione per WordPress mi ha portato negli ultimi 10 anni a voler aiutare sempre più persone a creare, gestire e far crescere il proprio sito web in completa autonomia. Esplora le oltre 600 guide su WordPress e sulla SEO che ho pubblicato su questo blog!
Seguimi su facebook
SiteGround - Hosting WordPress
Ti potrebbe interessare:
Recensione del plugin Smart Footer System
Recensione del plugin Smart Footer System29 May 2018
Perché creare siti aziendali con WordPress
Perché creare un sito aziendale con WordPress01 December 2016
10 modi per diventare povero con un blog11 April 2018
conversion marketing
AB Split testing e Conversion Marketing11 January 2019
Intervista a Flavia di Misya.info
Intervista a Flavia Imperatore di Misya.info: come creare uno dei blog di cucina più famosi in Italia20 December 2018
Come creare un blog di viaggi di successo
Come creare un travel blog di successo24 September 2019
8 commenti

Lascia un commento
  1. luigina
    luigina dice:
    7 Aprile 2018 alle 12:53 am

    Ciao Andrea,
    sto costruendo il mio sito professionale dove offro vari servizi che riguardano il facebook marketing (gestione pagina fb, consulenza e formazione) . Ho individuato il blu come colore principale e un verde acqua per le CTA dal momento che nella home page compariranno più di una volta. Posso scegliere un colore diverso più efficace tipo l’arancione, il verde o il rosso per la CTA nella pagina del servizio? Oppure è consigliabile che siano dappertutto dello stesso colore?
    Grazie mille

    Rispondi
    • Team
      Team dice:
      7 Aprile 2018 alle 11:29 pm

      Ciao Luigina, dare un altro colore alla pagina di servizio può esser una buona idea. Perché però non predisponi un A/B split test? Leggi a riguardo la nostra guida: https://sos-wp.it/perche-ab-split-testing/. Un saluto!

      Rispondi
  2. Mario
    Mario dice:
    11 Aprile 2016 alle 6:21 pm

    Complimenti Andrea seguo con piacere molte delle tue guide. Sto avviando un sito per una community di videogamer e la scelta dei colori non va sottovalutata. Sono solo indeciso se utilizzare Hueman o comprare un tema premium. Saluti

    Rispondi
    • Andrea Di Rocco
      Andrea Di Rocco dice:
      12 Aprile 2016 alle 9:43 am

      Ciao Mario,
      dai una occhiata ad Enfold, secondo me il migliore tema sul mercato.
      Un saluto!

      Rispondi
      • Mario
        Mario dice:
        12 Aprile 2016 alle 10:44 am

        Grazie, volevo chiederti soltanto se c’è un modo (magari un plugin)per far sì che tutti gli articoli che vengono pubblicati sul blog automaticamente vengano pubblicati sui social.

        Rispondi
        • Andrea Di Rocco
          Andrea Di Rocco dice:
          12 Aprile 2016 alle 11:21 am

          Ciao Mario,
          dai una occhiata a questo strumento: https://it.wordpress.org/plugins/social-media-auto-publish/.
          Un saluto!

          Rispondi
          • Mario
            Mario dice:
            13 Aprile 2016 alle 3:57 pm

            Grazie, gentilezza e cortesia non mancano mai!

          • Andrea Di Rocco
            Andrea Di Rocco dice:
            14 Aprile 2016 alle 12:36 pm

            Ciao Mario,
            grazie, questo è proprio il nostro modo di concepire il rapporto con tutti i nostri utenti.
            Speriamo che tutti possano esserne soddisfatti 😉

Domande? Lascia un commento!

Il team di SOS WP risponde tutti i giorni. Unisciti anche tu alla conversazione…

Lascia un commento Annulla risposta

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Andrea Di Rocco - Autore di SOS WP

Benvenuto!

Sono Andrea Di Rocco, autore di SOS WP il blog italiano su WordPress. Impara insieme a me come creare un blog o come creare un sito web che genera traffico, contatti e vendite!

Green ChecklistCorso WordPress

Green ChecklistAssistenza WordPress

Green ChecklistGruppo Facebook

Green ChecklistSviluppo Web / Consulenze

Servizi

  • Creazione blog professionali
  • Realizzazione siti web
  • Messa a norma GDPR
  • Consulenza SEO
  • Formazione WordPress
  • Chiedi un preventivo

LINK RAPIDI

  • Scopri TUTTO SEO™
  • Entra in Area Corsi
  • Gruppi Facebook
  • Testimonianze
  • Contattaci

Vuoi creare un blog? Sistemare un problema nel tuo sito eCommerce? Vuoi scalare le vette di Google?

AndyBot, il nostro assistente virtuale, ti guiderà verso la soluzione giusta per te:

Comincia qui

  • Safe Payment IconPagamenti sicuri con:
    Maestro IconVisa IconMastercard IconPaypal Icon e altri…
  • Support IconSupporto continuo dal Lunedì al Venerdì 08:30 – 18:30
SOS WP
  • Chi Siamo
  • Chi è Andrea Di Rocco
  • TUTTO SEO™
  • TrustPilot
  • Privacy e Cookie Policy
  • Facebook
  • Twitter
  • Linkedin
 

© Copyright 2012-2019 | SOS WP™
Metro Effort Limited. Tutti i diritti sono riservati.

 
Scorrere verso l’alto
SOS WP utilizza i cookie per migliorare la tua esperienza: ACCETTOImpostazioni
Privacy & Cookies Policy

Panoramica sulla privacy

Quando si visita qualsiasi sito web, questo può memorizzare o recuperare informazioni sul tuo browser, in gran parte sotto forma di cookie. Queste informazioni potrebbero essere su di te, le tue preferenze o il tuo dispositivo e sono utilizzate in gran parte per far funzionare il sito come te lo aspetteresti. Le informazioni di solito non ti identificano direttamente, ma possono fornire un'esperienza web più personalizzata. Poiché rispettiamo il tuo diritto alla privacy, puoi scegliere di non consentire alcuni tipi di cookie. Clicca sulle intestazioni delle diverse categorie per scoprire di più e modificare le impostazioni predefinite. Tuttavia, il bloccaggio di alcuni tipi di cookie può avere impatto sulla tua esperienza del sito e dei servizi che siamo in grado di offrire.
Maggiori informazioni
Panoramica sulla privacy

Quando si visita qualsiasi sito web, questo può memorizzare o recuperare informazioni sul tuo browser, in gran parte sotto forma di cookie. Queste informazioni potrebbero essere su di te, le tue preferenze o il tuo dispositivo e sono utilizzate in gran parte per far funzionare il sito come te lo aspetteresti. Le informazioni di solito non ti identificano direttamente, ma possono fornire un'esperienza web più personalizzata. Poiché rispettiamo il tuo diritto alla privacy, puoi scegliere di non consentire alcuni tipi di cookie. Clicca sulle intestazioni delle diverse categorie per scoprire di più e modificare le impostazioni predefinite. Tuttavia, il bloccaggio di alcuni tipi di cookie può avere impatto sulla tua esperienza del sito e dei servizi che siamo in grado di offrire.
Maggiori informazioni

Cookie strettamente necessari

This is an necessary category.

Cookie per pubblicità mirata
Cookie di terze parti
Cookie di prestazione
Uncategorized
Salva e accetta