che culo<\/em>! Altrimenti schiaccia il tasto “spazio” sulla tastiera del tuo pc finch\u00e9 non ti compare una tonalit\u00e0 del colore primario che hai scelto che ti ispira. Ogni volta che schiacci “spazio” i colori cambiano.<\/p>\nTrovato? Perfetto, allora prendi subito nota del codice HEX (copialo e incollalo da qualche parte o segnatelo su carta).<\/p>\n
Il prossimo passo da seguire \u00e8 fare click sul lucchetto che trovi sopra al colore. Quando fai click sul lucchetto, questo si chiude. Il lucchetto ci servir\u00e0 per trovare il terzo colore, per\u00f2 dimenticatelo per un attimo e pensiamo al secondo.<\/p>\n
![\"schermata](\"https:\/\/isartidelweb.it\/wp-content\/uploads\/2021\/08\/lucchetto-coolors.png\" "\\"\\"")
<\/p>\n
Per trovare il secondo colore fai click sulla scritta “View shades”. Wow, cos’\u00e8 successo?<\/p>\n
![\"\"](\"https:\/\/isartidelweb.it\/wp-content\/uploads\/2021\/08\/sfumature-coolors.png\" "\\"\\"")
<\/p>\n
Che il sito ti tira fuori tutte le diverse tonalit\u00e0 di quel colore. Fai click su una delle sfumature pi\u00f9 chiare: quello \u00e8 il tuo colore secondario. Per esperienza, ti consiglio ti scegliere una tonalit\u00e0 inferiore almeno di 3 step rispetto a quella di partenza.<\/strong><\/p>\nTrascrivi anche questo codice da qualche parte e poi incolla il codice del primo colore al posto del codice del secondo, per far tornare il primo dov’era.<\/p>\n
Adesso assicurati che il lucchetto sul colore sia chiuso, dopodich\u00e9… schiaccia spazio nuovamente.<\/p>\n
Noterai che cambieranno tutti i colori della schermata tranne quello principale, perch\u00e9 l’hai chiuso col lucchetto.<\/p>\n
Ecco: la maggior parte di questi colori vanno in forte contrasto col colore principale e puoi usarli come terzo colore.<\/p>\n
Metodo alternativo per la scelta del terzo colore<\/h2>\n
Un altro metodo efficace per ricavare un terzo colore adatto, ovvero in grado di far risaltare bottoni e Call to Action del tuo sito, \u00e8 quello di usare i colori complementari.<\/strong><\/p>\nOsserva la ruota dei colori qui in basso:<\/p>\n
![\"ruota](\"https:\/\/isartidelweb.it\/wp-content\/uploads\/2021\/08\/ruota-dei-colori-600x600.png\" "\\"\\"")
<\/p>\n
Poni attenzione sul giallo e il viola. Nota la relazione che c’\u00e8 tra i due: sono praticamente in posizione opposta sulla ruota!<\/p>\n
Ci\u00f2 significa che sono complementari. Se utilizzi il viola come colore primario puoi utilizzare il giallo come terzo colore o viceversa.<\/p>\n
Attenzione per\u00f2: cerca di trovare il giusto equilibrio e di non esagerare.<\/strong> Aiutati con Coolors per trovare delle tonalit\u00e0 in armonia tra loro e cerca di non creare sul sito dei contrasti “cazzotti in un occhio”.<\/p>\nE ora\u2026 trucco veloce!<\/strong><\/p>\nInserisci il codice del colore principale sul terzo colore che vedi su Coolors, ovvero quello in mezzo.<\/p>\n
Fai click sui 3 puntini sospensivi e clicca su “generate method”. Scegli “complementary” dal men\u00f9 a tendina. Se hai fatto tutto bene, dovresti veder comparire la scritta “complementary” sul colore primario.<\/p>\n
![\"schermata](\"https:\/\/isartidelweb.it\/wp-content\/uploads\/2021\/08\/genera-metodo.png\" "\\"\\"")
<\/p>\n
Adesso chiudi il lucchetto sul colore principale e schiaccia il tasto “spazio” sulla tastiera. Tutti i colori che compariranno ogni volta che schiaccerai “spazio” vanno bene come terzo colore per il tuo sito.<\/p>\n
![\"schermata](\"https:\/\/isartidelweb.it\/wp-content\/uploads\/2021\/08\/coolors-complementary.png\" "\\"\\"")
<\/p>\n
Conclusioni<\/strong>
\nOggi ti ho fornito un metodo semplicissimo per scegliere i colori giusti del tuo sito<\/strong> e scommetto che non vedi l’ora di metterti all’opera e sperimentare.<\/p>\nDomande e\/o consigli? Scrivimi nei commenti e ti risponder\u00f2 personalmente non appena possibile.<\/p>\n
Se l’articolo ti \u00e8 piaciuto e in futuro desideri leggerne altri come questo, iscriviti subito alla newsletter del Fabbro! Fai click qui e ti invier\u00f2 una guida gratuita ogni settimana per aiutarti a realizzare e gestire il tuo sito web in totale autonomia e nel migliore dei modi.<\/p>\n
Continua a seguirmi e vedrai che presto per te sar\u00e0 facilissimo usare il martello per spaccare il web!<\/p>\n
A marted\u00ec prossimo,
\nIl Fabbro<\/p>\n","protected":false},"excerpt":{"rendered":"
Ciao e bentornato\/a sulla rubrica del Fabbro, L’argomento di oggi \u00e8 affascinante tanto quanto \u00e8 importante e ti chiarir\u00e0 un sacco di interrogativi che ti sei posto sicuramente nel tempo. Infatti, chiunque realizzi un sito web o una grafica si pone sempre questa domanda: che colori utilizzo? La guida che ho preparato per te risponder\u00e0 in modo esaustivo a questo interrogativo e ti permetter\u00e0 di affrontare la questione in modo pi\u00f9 funzionale e… divertente! S\u00ec perch\u00e9 scegliere i colori per il tuo sito web pu\u00f2 essere anche un’attivit\u00e0 ricreativa e rilassante se hai un metodo. \u00c8 importante scegliere i colori del tuo sito con cura perch\u00e9 l’impatto visivo ha molto valore in termini di fruizione. Devi scegliere i colori giusti\u2026 se non vuoi far sanguinare gli occhi dei tuoi utenti e farli scappare via. Inoltre sono tante le ricerche che indicano come le prime impressioni di un marchio sono determinate dai colori. Visto che \u00e8 facilissimo lasciarsi scappare la mano quando si tratta di scegliere i colori (non solo per i siti web, ma in generale!), seguire le regole che sto per darti ti aiuter\u00e0 a mantenere un approccio scientifico e a dare un aspetto professionale al tuo sito. Non stai pi\u00f9 nella pelle? Allora raccogli tutta la concentrazione che puoi e afferra una tazza del tuo caff\u00e8 preferito: partiamo! Quanti colori scegliere per il tuo sito Spesso mi capita di navigare dei siti con tantissimi colori diversi. Usare troppi colori diversi \u00e8 sbagliato perch\u00e9 disorienta l’utente e inficia la visibilit\u00e0 dei tuoi contenuti, oscurando il testo. Errore fatale! Assicurati sempre che i testi sul tuo sito siano ben leggibili; perch\u00e9 se \u00e8 attraverso il colore che costruisci la prima impressione nella testa dell’utente, \u00e8 attraverso il testo che lo indirizzi ad effettuare la fatidica Call to Action. Nota: se \u00e8 la prima volta che mi leggi e non sai cos’\u00e8 una Call to Action… don’t panic. Ho scritto un articolo molto approfondito a riguardo che puoi leggere cliccando qui. Altre volte invece mi \u00e8 capitato di atterrare su siti web in bianco e nero o mono-colore. Errore fatale anche questo! \u00c8 vero che non devi esagerare col colore, ma non devi neanche ricreare un’atmosfera da cimitero. Ma allora qual \u00e8 il numero di colori da utilizzare sul tuo sito? Puoi raggiungere l’equilibrio perfetto utilizzando 3 colori. Proprio cos\u00ec. Utilizzando 3 tonalit\u00e0 di colore raggiungerai un risultato bilanciato e il tuo sito sar\u00e0 figo. Per\u00f2 aspetta un minuto, non muoverti da l\u00ec! L’informazione non \u00e8 completa\u2026 devi utilizzare questi 3 colori in modo strategico, non soltanto piazzandoli a casaccio o secondo buon senso. Dovrai infatti individuare come prima cosa un colore principale. Si tratta di un colore dominante rispetto agli altri, con cui dovrai letteralmente riempire la maggior parte del tuo sito. Per intenderci, dovrai usare questo colore specificamente come sfondo del men\u00f9 di navigazione e del footer del tuo sito (il footer \u00e8 l’elemento a pi\u00e8 di pagina dove inserisci le tue informazioni di contatto, la tua privacy policy e la tua partita IVA). Da questo colore dominante ricaverai poi un secondo colore. Il colore secondario sar\u00e0 infatti della stessa tonalit\u00e0 di quello principale ma pi\u00f9 chiaro. Puoi utilizzarlo, ad esempio, per lo sfondo delle pagine o per i bordi delle immagini e degli altri elementi grafici. Puoi addirittura utilizzarlo per i titoli e i sottotitoli degli articoli di blog. E il terzo colore? Anche questo lo ricaverai dal primo, ma in maniera differente. Dovrai infatti utilizzare questo colore per mettere in evidenza bottoni, link e testi delle Call to Action. Il terzo colore deve andare fortemente in contrasto col primo. Un ottimo modo per scegliere un terzo colore efficace \u00e8 utilizzare un complementare del primo. “Ok Fabbro, ma cosa sono i colori complementari?” Ottima domanda. Ci arriviamo tra poco. Prima di capire come poter ricavare il complementare dal primo colore dobbiamo scoprire come scegliere quest’ultimo. Come scegliere il colore principale del tuo sito Qui c’\u00e8 una regola molto semplice da seguire: utilizza il colore dominante del tuo logo. Se il tuo logo \u00e8 blu e il tuo sito \u00e8 verde devi correre ai ripari al pi\u00f9 presto. Solo se il logo della tua attivit\u00e0 \u00e8 una scritta bianca o una scritta nera senza disegni o elementi grafici puoi scegliere anche un altro colore. Per\u00f2 prima di proseguire lascia che ti ponga una domanda: in che modo hai scelto il colore del tuo logo? Te lo chiedo perch\u00e9 dovresti fare distinzione tra i colori che ti piacciono e i colori che sono i pi\u00f9 adatti per il prodotto\/servizio che offri. Ma non \u00e8 tutto. Quando scegli il colore principale devi pensarlo anche in relazione al tuo pubblico. Ogni pubblico \u00e8 differente, perci\u00f2 la scelta giusta varia di caso in caso, per\u00f2 esistono delle regole generali, e sono molto semplici. Sto per spiegarti le sensazioni che trasmettono i colori pi\u00f9 usati, perci\u00f2 ti invito a ragionare se \u00e8 il caso o meno che cambi i colori del tuo logo. Se infatti utilizzi i colori sbagliati per il tuo logo renderai inutile questa guida, perch\u00e9 seguendola utilizzerai lo stesso colore sbagliato per il tuo sito web. Il rosa \u00e8 molto amato dalle donne e si usa sui siti che hanno il gentilsesso come target di riferimento. Il blu trasmette professionalit\u00e0. Il nero si utilizza molto nel settore del lusso. Il bianco \u00e8 un colore molto usato perch\u00e9 privilegia la chiarezza e la leggibilit\u00e0 dei testi. Se non sai proprio che colore principale utilizzare, scegli questo. Il bianco si utilizza anche per esprimere facilit\u00e0 d’uso, semplicit\u00e0 e purezza. Che colore puoi scegliere come secondario se utilizzi il bianco come primario? Puoi giocare con degli elementi grafici in trasparenza (ad es. puoi applicare dei filtri bianchi in trasparenza sulle foto al passaggio del mouse). I colori del semaforo Vediamo adesso le sensazioni che trasmettono i colori del semaforo: il verde trasmette sicurezza ed \u00e8 spesso associato ai soldi e all’abbondanza. Quando il semaforo \u00e8 verde puoi attraversare la strada in sicurezza (nota:<\/p>\n","protected":false},"author":3,"featured_media":6855,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_joinchat":[],"footnotes":""},"categories":[16,65],"tags":[217,220,219,218,70,76],"class_list":["post-6853","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-argomento-sito","category-la-rubrica-del-fabbro","tag-colori","tag-colori-complementari","tag-coolors","tag-ruota-dei-colori","tag-siti-web","tag-siti-web-in-autonomia"],"_links":{"self":[{"href":"https:\/\/sartoteca.it\/blog\/wp-json\/wp\/v2\/posts\/6853","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sartoteca.it\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/sartoteca.it\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/sartoteca.it\/blog\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/sartoteca.it\/blog\/wp-json\/wp\/v2\/comments?post=6853"}],"version-history":[{"count":1,"href":"https:\/\/sartoteca.it\/blog\/wp-json\/wp\/v2\/posts\/6853\/revisions"}],"predecessor-version":[{"id":14435,"href":"https:\/\/sartoteca.it\/blog\/wp-json\/wp\/v2\/posts\/6853\/revisions\/14435"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/sartoteca.it\/blog\/wp-json\/wp\/v2\/media\/6855"}],"wp:attachment":[{"href":"https:\/\/sartoteca.it\/blog\/wp-json\/wp\/v2\/media?parent=6853"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sartoteca.it\/blog\/wp-json\/wp\/v2\/categories?post=6853"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sartoteca.it\/blog\/wp-json\/wp\/v2\/tags?post=6853"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
![\"pastelli\"](\"https:\/\/isartidelweb.it\/wp-content\/uploads\/2021\/08\/pastelli-600x400.jpg\" "\\"\\"")
<\/p>\n![\"colori\"](\"https:\/\/isartidelweb.it\/wp-content\/uploads\/2021\/08\/colori-600x402.jpg\" "\\"\\"")
<\/p>\n![\"palette](\"https:\/\/isartidelweb.it\/wp-content\/uploads\/2021\/08\/palette-di-colori-600x400.jpg\" "\\"\\"")
<\/p>\n![\"loghi\"](\"https:\/\/isartidelweb.it\/wp-content\/uploads\/2021\/08\/loghi-450x600.jpg\" "\\"\\"")
<\/p>\n![\"semafori\"](\"https:\/\/isartidelweb.it\/wp-content\/uploads\/2021\/08\/colori-semaforo-600x334.jpg\" "\\"\\"")
![\"schermata](\"https:\/\/isartidelweb.it\/wp-content\/uploads\/2021\/08\/coolors-600x286.png\" "\\"\\"")
<\/p>\n