Informazioni sugli schemi di colori e di colori Web
Esistono quattro schemi di colori di base che è possibile utilizzare per un sito Web. Ogni pagina di questo articolo mostra un'immagine della combinazione di colori e come è possibile generare uno schema simile in Photoshop.
- monocromaticoUsando i colori della stessa tonalità. Possono avere sfumature o sfumature diverse a seconda di quanto bianco o nero viene aggiunto.
- analogoQuesto utilizza i colori vicini tra loro sulla ruota dei colori.
- complementareQuesto è spesso visto come "opposto" perché i due colori in una combinazione di colori complementari sono l'uno di fronte all'altro sulla ruota dei colori.
- triadicoQuesti colori sono equamente distanziati sulla ruota dei colori.
Tutti gli schemi di colori useranno questo giallo come colore di base.
02 di 10Schema cromatico web monocromatico
Questa combinazione di colori utilizza il giallo intenso del mio colore di base e aggiunge un po 'di bianco e nero per colorare e sfumare lo schema di conseguenza.
- in alto a sinistra - il colore di base # ffe500
- in alto a destra - aggiunto un riempimento del 50% bianco per ottenere # fff280
- in basso a sinistra - aggiunto un riempimento del bianco al 75% per ottenere # fff8bf
- in basso a destra - aggiunto un riempimento del nero al 50% per ottenere # 7f7200
Gli schemi di colori monocromatici sono spesso i più facili agli occhi di tutte le combinazioni di colori. I delicati cambiamenti di tonalità e sfumatura rendono i colori più fluidi l'uno nell'altro. Usa questa combinazione di colori per rendere il tuo sito più fluido e raccolto.
03 di 10Più schemi cromatici web monocromatici
Aggiunto un quadrato del nero al 20% per ottenere più colori nello schema. L'aggiunta di nero o bianco ai tuoi colori può creare un nuovo colore per la tua tavolozza senza intaccare il tono della pagina.
04 di 10Analogo schema dei colori Web
Questa combinazione di colori prende il colore di base giallo e aggiunge e sottrae 30 gradi alla tonalità nella tavolozza dei colori di Photoshop.
- in alto a sinistra - il colore di base # ffe500
- in alto a destra - +30 gradi per ottenere # 99ff00
- in basso a sinistra - -30 gradi per ottenere # ff6600
- in basso a destra - 100% bianco #ffffff
Colori analoghi possono funzionare molto bene insieme, ma a volte possono scontrarsi gravemente. Assicurati di testare questi schemi con più persone di te, della tua famiglia e dei tuoi amici. Quando lavorano, creano un sito più colorato rispetto allo schema monocromatico, ma quasi altrettanto fluido.
05 di 10Più combinazioni di colori Web analogiche
Aggiunto un quadrato del nero al 20% per ottenere più colori nello schema.
06 di 10Schema colori Web complementari
Combinazioni di colori complementari, a differenza di altri schemi di colori, in genere hanno solo due colori. Il colore di base ed è opposto sulla ruota dei colori. Photoshop rende facile ottenere il colore complementare: seleziona semplicemente l'area di colore a cui desideri aggiungere il complemento e premi Ctrl-I. Photoshop lo invertirà per te. Assicurati di farlo su un livello duplicato, in modo da non perdere il colore di base.
- a sinistra - il colore di base # ffe500
- a destra - il complemento # 001aff
Gli schemi di colori complementari sono spesso molto più sorprendenti di altri schemi di colori, quindi usali con cura. Sono più spesso utilizzati su pezzi che devono distinguersi.
07 di 10Più combinazioni di colori Web complementari
Per ottenere questa versione, ho aggiunto il 50% di bianco alla metà inferiore dei colori e il 30% di nero al quadrato centrale. Come puoi vedere, ti offre qualche altra opzione ma è ancora una combinazione di colori complementare.
08 di 10Triadic Web Color Scheme
Gli schemi di colori triadici sono composti da 3 colori più o meno equamente distanziati intorno alla ruota dei colori. Poiché una ruota dei colori è di 360 gradi, ho utilizzato nuovamente la casella di colore nel selettore dei colori per aggiungere e sottrarre 120 gradi dal colore di base.
- in alto a sinistra - il colore di base # ffe500
- in alto a destra - +120 gradi per ottenere # e500ff
- in basso a sinistra - -120 gradi per ottenere # 00ffe6
- in basso a destra - 100% bianco #ffffff
Gli schemi di colori triadici producono spesso pagine Web molto vivaci. Ma come combinazioni di colori complementari, possono influenzare le persone in modo diverso. Assicurati di testare.
Puoi anche creare combinazioni di colori tetradic o a 4 colori, in cui i colori sono equamente distanziati attorno alla ruota dei colori.
09 di 10Più schemi di colori Web di Triadic
Come per gli altri esempi, ho aggiunto un quadrato nero del 30% ai colori per ottenere le sfumature aggiuntive.
10 di 10Schemi di colori Web discordanti
La bellezza è negli occhi di chi guarda, ma è un peccato che non tutti i colori vadano insieme. I colori discordanti sono colori che sono più distanti di circa 30 gradi l'uno dall'altro sulla ruota dei colori e non sono complementari o parte di una triade.
Schemi di colori discordanti possono essere molto scioccanti e dovrebbero essere usati solo per generare attenzione. Ricorda che, poiché questi colori spesso si scontrano, l'attenzione che ricevi potrebbe non essere esattamente ciò che stai cercando.
