Utilizzo di Paletton per scegliere la tavolozza dei colori del tuo sito Web WordPress

In questo post, vedremo come utilizzare Paletton per scegliere la tavolozza dei colori del tuo sito Web WordPress. Paletton è un generatore di tavolozze di colori online facile da usare che ti farà risparmiare un sacco di tempo. Non tutti i clienti di web design avranno una combinazione di colori del marchio e spetterà a te scegliere i colori per il loro sito web. È qui che torna utile Paletton.

Tra tutte le opzioni disponibili online, Paletton è una delle preferite grazie alla funzione di esempio dal vivo. L'app non è stata aggiornata da alcuni anni, ma per fortuna funziona ancora perfettamente per ciò di cui hai bisogno. Troverai l'app su Paletton.com. Ignora gli annunci di Google tutt'intorno e sei a posto.

Perché è importante scegliere i colori giusti per il tuo sito web?

Prima di esaminare in dettaglio come utilizzare l'app Paletton, facciamo una rapida revisione del perché è importante avere la giusta tavolozza di colori su un sito web. Come sai, i colori portano messaggi subliminali che influenzano le emozioni dello spettatore e, in definitiva, le sue decisioni. I colori devono rappresentare anche il marchio aziendale del sito.

Il modo migliore per scegliere una tavolozza di colori per un sito Web è considerare l'umore che vuoi che ritragga. Allo stesso modo in cui gli interior designer scelgono i colori per dare a uno spazio un'atmosfera specifica, puoi fare lo stesso per un sito web. Pensa alle prime impressioni; quando qualcuno atterra su un sito web con colori brillanti e vibranti, si sentirà soddisfatto e potrebbe persino sorridere. Un sito Web con una tavolozza neutra e tenue può calmare una persona e infondere un senso di comfort.

Naturalmente, anche i colori che scegli devono corrispondere al marchio. È nella combinazione e nella tonalità in cui tu come web designer sei al centro della scena. La scelta del miglior uso dei colori in una tavolozza è importante anche per l'umore di un sito.

Ecco perché Paletton è uno dei generatori di tavolozze di colori preferiti. Puoi vedere in anteprima come una tavolozza di colori viene applicata in diverse combinazioni su un sito web. Questo ti aiuta a prendere decisioni migliori sui colori che scegli. Mettere il colore scuro come sfondo in contrasto con il colore chiaro farà una grande differenza nel design finale.

Tutte le tavolozze dei colori iniziano con un colore di base

Per ogni tavolozza di colori che crei su Paletton, avrai bisogno di un colore di base con cui lavorare. Ma come fai a sapere quale colore di base usare?

Dai un'occhiata al contenuto che il cliente ti ha fornito, al suo marchio e alle immagini che ti sono state fornite.

• Se il tuo cliente ha un logo a colori, usalo come colore di base.
• Usa uno strumento contagocce per estrarre uno o due colori da una delle immagini che il cliente ti ha dato.
• Chiedi al tuo cliente l'umore e la storia del marchio della sua azienda.
• Se stai creando progetti web da vendere come modelli o temi figlio, o per il tuo portfolio, scegli un colore in base all'umore che desideri con il tuo design.

Quando crei una tavolozza su Paletton, puoi scegliere visivamente un colore di base o un codice esadecimale nella scheda esadecimale del colore di base.

Conoscere l'interfaccia utente dell'app Paletton

Ora è il momento di iniziare a creare le tavolozze. Diamo un'occhiata a come è tutto impostato. L'app ha due sezioni principali; il lato sinistro riguarda la selezione dei colori e il lato destro riguarda la visualizzazione delle anteprime.

Diamo prima un'occhiata allo strumento di selezione del colore a sinistra. Qualunque cosa cambi da questo lato cambia i risultati del lato destro, ma è meglio capire prima di cosa è capace ogni lato.

Lato sinistro – I selettori di colore

La prima cosa che noti quando entri nell'app Paletton è la ruota dei colori. La vista predefinita ha il colore di base come un rosso neutro in una tavolozza monocromatica (1 colore).

Vedrai una serie di 5 punti in una linea all'interno del cerchio dei colori. Il punto al centro è il colore di base, due punti aggiungono luminosità e desaturazione mentre gli altri due aggiungono contrasto e saturazione.

Combinazioni di colori

Sopra il cerchio dei colori ci sono cinque pulsanti combinati. Le opzioni sono da sinistra a destra:

• Monocromatico – 1 colore + complementare opzionale
• Adiacente – 3 colori + complementare opzionale
• Triadico – 3 colori + complementare opzionale
• Tetrad – 4 colori
• Stile libero – 4 colori

Colore di base

Per cambiare il colore di base, puoi eseguire una delle seguenti operazioni:

1. Trascina il punto del colore principale in qualsiasi punto del cerchio esterno.
2. Trascina il punto centrale all'interno del cerchio per scegliere una tonalità diversa del colore principale scelto nel cerchio esterno
3. Inserisci un codice esadecimale nella scheda in basso a sinistra.
4. Per trasformare un colore secondario nel colore di base, dovrai farlo sul lato di anteprima dello schermo. Più su quello più tardi.

Quando trascini il punto del colore di base all'interno del cerchio, tutti gli altri punti si spostano insieme ad esso mostrando le varianti di tonalità.

Puoi anche selezionare singoli colori facendo clic su Maiusc prima di trascinare.

Ritocchi

Il pulsante in alto a sinistra del cerchio consente di inserire manualmente i gradi di tonalità per la regolazione fine. Ci sono più capacità di messa a punto con il pulsante in basso a destra. Qui puoi mettere a punto tutto ciò che riguarda i colori che hai scelto:

• Tinta
• Saturazione
• Luminosità
• Contrasto

Basta fare clic sui pulsanti per aggiungere o diminuire ogni effetto di 1, 5 o 10 gradi.

Preimpostazioni in base al colore di base

L'area di selezione del colore ha due opzioni di selezione principali; Colori e Preset. Abbiamo esaminato la sezione dei colori sopra. Ora, visitiamo la scheda Preimpostazioni. In base al colore di base e alla combinazione che hai selezionato, i preset mostreranno una varietà di variabili. Questi sono utili se non vuoi scherzare con la tonalità, la saturazione, la luminosità e il contrasto da solo.

Questi preset possono darti una buona idea di cosa è possibile fare con i colori che hai scelto e se ci sono possibili tavolozze secondarie per completare il primo.

Lato destro – Le anteprime della tavolozza

Sul lato destro del Paletton è dove vedi tutte le anteprime dal vivo. L'area principale è suddivisa in quattro sezioni per poter visualizzare tavolozze monocromatiche o altre a due, tre o quattro colori. Ogni sezione di colore mostra il colore di base nell'area più grande e quattro variazioni intorno ad esso.

Nell'immagine qui sotto vedrai come funzionano insieme il selettore di colori e l'anteprima.

Sotto il riquadro di anteprima è presente una scheda in cui è possibile modificare l'aspetto delle anteprime. La visualizzazione predefinita è sicuramente la migliore, ma nel caso in cui desideri cambiare l'aspetto delle cose, quel pulsante è lì per te.

Cambiare il colore di base

All'interno della sezione di anteprima, puoi fare clic su uno dei colori secondari o complementari e trasformarli nel colore di base. Passa il mouse su qualsiasi colore e fai clic su "ulteriori informazioni". Oltre a vedere tutte le informazioni per quel colore, vedrai un pulsante che dice "Applica come colore di base". Quando fai clic su questo, tutti i colori nella tavolozza cambieranno.

Utilizzo della funzione di simulazione della visione di Paleton

Una delle più grandi caratteristiche di Paletton è la capacità di valutare come appariranno i tuoi colori in casi inaspettati. La funzione si chiama "Simulazione della visione" e la troverai sotto il riquadro di anteprima. Queste le simulazioni disponibili:

• Simulazione daltonico
• desaturare
• Simulazione gamma
• Colori Web (tavolozza precedente di 216 colori)

Questo è un ottimo strumento se stai creando una tavolozza per un sito web. Puoi vedere se la tua tavolozza avrà un bell'aspetto in tutti quei casi. La più utile è la simulazione del daltonismo. È bene assicurarsi che tutti i colori siano differenziati l'uno dall'altro!

Vedere esempi dal vivo della tua tavolozza di colori

Un altro strumento pratico in Paletton è la scheda che mostra come apparirà la tavolozza su un sito Web di esempio e altri stili di design. Troverai queste simulazioni nella scheda 'ESEMPI…'. La prima scelta è un layout di pagina e questo ha alcune opzioni:

• Pagina bianca
• Pagina scura
• Design positivo
• Design negativo

L'app può mostrarti altre simulazioni di progetti artistici con la tavolozza dei colori scelta. Ci sono alcuni esempi statici e animati. Questi sono pratici per avere una buona idea di quanto potenziale ha la tua tavolozza di colori.

Inoltre, in questa fase, puoi randomizzare la tua tavolozza in diversi modi:

• Colori simili, a differenza dello stile
• a differenza di
• Simile
• A differenza dei colori, stile simile

Assicurati di avere una copia della tua tavolozza prima di randomizzarla! Non c'è ritorno.

Esportare e copiare una tavolozza di colori

Ora che hai regolato e visualizzato in anteprima la tavolozza dei colori, è il momento di esportarla da Paletton e prepararla per il tuo sito web.

Esistono diversi modi per copiare o esportare la tavolozza. In alto a destra della finestra c'è un pulsante che dice "condividi tavolozza" ma sembra essersi rotto qualche tempo fa. Basta ignorare quel pulsante poiché non fa nulla.

Copia la tua tavolozza in uno di questi altri modi:

• Copia i codici esadecimali per i singoli colori passando il mouse per visualizzarli e facendo clic per aprire la finestra delle informazioni.
• Fare clic su "TABELLE/ESPORTA" per visualizzare le tavolozze in diversi formati.
• All'interno della scheda TABELLE/ESPORTA', esporta in uno di questi formati:
  • Liste di colori
    • HTML
    • MENO
    • CSS
    • SASS
    • XML
    • testo
  • Campioni di colore
    • Immagine PNG
    • ACO (Photoshop)
    • GPL (Gimp)
• È inoltre possibile visualizzare le combinazioni dei colori nella tavolozza scelta.

Aggiungere i colori al tuo sito Web WordPress

Ora è il momento di aggiungere i colori al tuo sito!

Poiché l'app Paletton non viene aggiornata da oltre 6 anni, è meglio scaricare la versione di testo semplice e inserire manualmente i colori nel foglio di stile. Le funzionalità di esportazione potrebbero non funzionare con il foglio di stile HTML o CSS del tuo sito web.

Per aggiungere colori al tuo tema Divi, vai alle Opzioni del tema e inserisci ciascun colore con il codice esadecimale corrispondente.

Questo è un involucro di colore!

Abbiamo finito di rivedere i passaggi per creare una tavolozza di colori con Paletton. Le caratteristiche di base dell'app sono simili ad altre app per la tavolozza dei colori, ma ciò che la distingue dal resto è la possibilità di vedere i colori su esempi dal vivo sia per il web design che per altri progetti artistici. È un peccato che l'app non venga aggiornata da più di 6 anni. Per fortuna, sembra rimanere vivo attraverso quegli annunci di Google!.

Qual è la tua app per la generazione di tavolozze di colori preferita? Hai già provato Paletton? Fateci sapere nei commenti!

Immagine in primo piano tramite DaGaAl / shutterstock.com