Come applicare le tavolozze dei colori al tuo sito Web Divi (20 esempi!)

Nel tutorial Divi di oggi, condivideremo alcune fantastiche tavolozze di colori che puoi utilizzare nei prossimi siti Web che creerai con Divi. L'uso dei colori giusti per il tuo sito web è una delle cose principali che determineranno l'aspetto e l'aspetto generale del tuo sito web.

Oltre a condividere con te alcune fantastiche tavolozze di colori, ti mostreremo anche un modo solido per aggiungere queste tavolozze di colori al tuo sito web. In caso di dubbio, puoi sempre seguire questi passaggi di base che ti aiuteranno a creare splendidi risultati.

Suggerimenti generali

1. Scegli un sito Web di colore scuro o di colore chiaro

Nella tavolozza dei colori che utilizzerai, avrai senza dubbio colori chiari e scuri. Il contrasto è obbligatorio in una tavolozza di colori in modo che il contenuto scritto non vada perso.

Ora, questo ci porta immediatamente alla prima domanda che devi porti quando vuoi applicare una tavolozza di colori al tuo sito web; vuoi creare un sito web di colore scuro o di colore chiaro? Solo perché ne scegli uno non significa che non puoi combinarli, ma fare una scelta ti aiuta a scegliere la tavolozza dei colori più facilmente.

2. Scelta del colore

In teoria, puoi determinare tu stesso quanti colori desideri che abbia la tua tavolozza di colori. Non esiste un modo standard per applicare o determinare le tavolozze dei colori. Tuttavia, per creare un buon equilibrio di colori con Divi, consigliamo di utilizzare cinque colori.

Per aiutarti ad applicare le tavolozze dei colori con cinque colori al tuo sito web, abbiamo scelto un tipo di metodo che applicheremo costantemente allo stesso layout quando mostriamo le diverse tavolozze dei colori. Ma prima di approfondire, diamo un'occhiata ai diversi tipi di colori che devi avere nella tua tavolozza dei colori se vuoi seguire il nostro metodo.

2 colori di sfondo

Assicurati che i colori di sfondo che scegli corrispondano tra loro. Utilizzerai questi colori di sfondo uno vicino all'altro e per ottenere bellissimi risultati; devono avere una certa armonia.

1 colore del carattere

La prossima cosa che dovrai scegliere è il colore del carattere. Logicamente, il colore del carattere dipende dai colori di sfondo scelti. Se hai scelto colori di sfondo chiari, assicurati che il colore del carattere sia scuro e viceversa.

1 collegamento ipertestuale e colore di invito all'azione

Il colore del collegamento ipertestuale che scegli è uno dei colori che danno vita al tuo sito web. Assicurati che questo colore si distingua dagli altri colori nella tua tavolozza poiché lo utilizzerai per gli inviti all'azione che includi nel tuo sito web.

1 colore per gli ultimi ritocchi

Ultimo ma non meno importante, puoi scegliere un altro colore pronto all'uso che porta colore al tuo sito web. Sebbene questo colore non sia importante quanto il colore del collegamento ipertestuale, ti aiuterà a completare il bilanciamento del colore sul tuo sito web.

3. Assicurati che ci sia abbastanza contrasto

Come menzionato prima; è essenziale fornire contrasto tra alcuni dei colori nella tavolozza dei colori. Se stai usando una tavolozza di colori per un sito web, questo contrasto ti aiuterà principalmente a rendere leggibili i contenuti scritti che condividi. Perché; se il tuo contenuto non è di facile lettura; qual è lo scopo dopo tutto?

4. Trova il giusto equilibrio nell'uso del colore

Esistono diversi modi per determinare la frequenza con cui si desidera utilizzare un particolare colore nella tavolozza dei colori. Creare un buon bilanciamento del colore è necessario se non vuoi che si sentano sopraffatti dai colori che stai usando sul tuo sito web.

Assicurati di utilizzare i colori più neutri nella tua tavolozza dei colori per la maggior parte del tempo e usa gli altri colori per accentuare il contenuto che stai fornendo.

Procedura dettagliata: aggiungere la tavolozza dei colori al tuo sito web

Nella parte successiva di questo post, ti guideremo attraverso l'applicazione delle tavolozze dei colori al tuo sito web. Gestiremo i diversi passaggi che intraprendiamo quando aggiungiamo i colori al layout di un sito web. Dopo questa procedura dettagliata, arriverai alla parte in cui condividiamo le tavolozze dei colori. Non solo abbiamo condiviso i colori, ma li abbiamo anche usati su un layout Divi per mettere in pratica la procedura dettagliata.

Senza ulteriori indugi, diamo un'occhiata alle diverse fasi del processo.

1. Decidi come aggiungere i colori

Puoi aggiungere la tavolozza dei colori in due modi:

• Aggiunta di tutti i colori sezione per sezione
• Completa il tuo sito web colore per colore

Anche se probabilmente mescolerai questi due metodi tra loro, ti consigliamo di iniziare completando il tuo sito web colore per colore. In questo modo, non dovrai copiare e incollare continuamente i diversi codici colore. Copi ogni colore una volta e poi passi all'altro.

2. Aggiungi i colori di sfondo

Una volta deciso come inserire i colori, puoi iniziare con i colori di sfondo. Uno dei motivi per cui iniziare con i colori di sfondo è una buona idea è perché vedrai immediatamente i risultati. Stai ponendo le basi dei colori che stai utilizzando sul tuo sito web.

Se hai scelto di creare un sito web dai colori chiari; inizia aggiungendo il colore più chiaro allo sfondo della seconda sezione e segui con il secondo colore più chiaro nella terza sezione.

3. Aggiungi il colore del testo

Dopo aver aggiunto i colori di sfondo per il tuo sito web, puoi iniziare ad aggiungere il colore del testo al tuo sito web. Tutto il contenuto scritto sul tuo sito web deve avere questo colore (a parte i collegamenti ipertestuali e gli inviti all'azione).

4. Aggiungi il collegamento ipertestuale e il colore CTA al tuo sito web

Andando avanti, la prossima cosa che puoi fare è far risaltare i collegamenti ipertestuali e gli inviti all'azione sul tuo sito web. Attirano l'attenzione delle persone e le incuriosiscono sull'argomento di un collegamento o di un invito all'azione.

Assicurati che tutte le cose cliccabili sul tuo sito web contengano questo colore. Mantenendo questa coerenza, i tuoi visitatori riconosceranno facilmente dove possono fare clic per continuare la loro permanenza sul tuo sito.

5. Aggiungi il colore del tocco finale

L'ultima cosa che devi fare è aggiungere il colore del tocco finale al sito web. Negli esempi e nelle tavolozze dei colori che abbiamo creato, utilizziamo questo colore del tocco finale in tre punti: il colore del cerchio blurb, il testo dell'intestazione del modulo persona e la barra dei menu principale.

Sebbene il colore del tocco finale non sia il colore principale che utilizzerai sul tuo sito web, ti consentirà di portare quel tocco in più di colore di cui il tuo sito web aveva bisogno. Dopotutto, non vuoi che il tuo sito web sembri monotono o fastidiosamente serio.

Tavolozze dei colori

Ora che abbiamo analizzato i passaggi necessari per applicare la tavolozza dei colori al tuo sito Web, è ora di iniziare a esplorare alcune tavolozze di colori sorprendenti. Oltre a mostrarti il ​​risultato del layout di esempio che abbiamo realizzato, condivideremo anche i codici colore che abbiamo usato per raggiungere quel risultato.

1. Piastrelle per giorni

La prima tavolozza di colori che abbiamo selezionato contiene per lo più tipi di colori più tenui (e leggermente pastello). Poiché abbiamo scelto un sito Web leggero, i colori più chiari nella tavolozza dei colori occupano la maggior parte del sito Web. I colori più scuri nella nostra tavolozza dei colori, tuttavia, assicurano che il sito Web contenga il bilanciamento del colore necessario.

I colori utilizzati in questo esempio sono i seguenti (da sinistra a destra):

• #EBE8E2
• #768A95
• #B98077
• #007193
• #E2D7D7

2. Deserto

La tavolozza dei colori successiva nell'elenco si chiama Deserto. Il bilanciamento del colore di questa tavolozza di colori tende leggermente verso un sito Web di colore più scuro. Il colore che domina in questo esempio è il colore blu. Ma c'è anche un colore del testo molto chiaro che assicura il contrasto necessario.

I colori utilizzati in questa tavolozza sono i seguenti (da sinistra a destra):

• #507782
• #7C8E93
• #D89C79
• #443F3C
• #FFE8D8

3. Festival

La prossima tavolozza di colori non è quella che vedrai spesso in giro. I colori non appaiono spesso nella stessa tavolozza di colori, ma sono piuttosto intriganti. Se vuoi che il tuo sito web abbia un aspetto unico, questa tavolozza è la strada da percorrere.

I colori che vengono utilizzati in questa tavolozza sono (da sinistra a destra):

• #E6EBD1
• #A59E4C
• #544C4D
• #AF3D4B
• #CED3BC

4. Pinky Promessa

La tavolozza dei colori successiva nella riga è un'opzione eccellente se vuoi creare un sito Web di colore scuro. Le tonalità nere e rosa sono note per essere una buona combinazione. Danno un tocco giocoso in più al sito senza sembrare troppo femminili. Le sfumature nere assicurano che l'aspetto del tuo sito web contenga ancora quella profondità necessaria.

I colori utilizzati in questa tavolozza sono (da sinistra a destra):

• #33383A
• #ECC9C8
• #E2566D
• #4F575A
• #D3D8DA

5. Santorini

In questa prossima tavolozza, puoi chiaramente notare che il blu domina gli altri colori. Con questa tavolozza di colori, ottieni immediatamente un tipo di sensazione leggera e positiva. Il blu è noto per essere uno di quei colori che le persone preferiscono quando costruiscono un sito web. È un colore standard che riflette la professionalità. Tuttavia, le sfumature di blu utilizzate in questa tavolozza di colori mostrano anche un lato giocoso.

La tavolozza dei colori che abbiamo usato in questo esempio è (da sinistra a destra):

• #1198EA
• #0A5785
• #A85A4D
• #F1F5FA
• #C5DFF8

6. Piacere viola

Il colore dominante in questa tavolozza di colori è ovviamente il viola. Sebbene sia spesso percepito come un colore deprimente, questa tavolozza di colori e il suo utilizzo su un sito Web sono diversi. Quando è combinato con colori più luminosi, il colore viola può offrire risultati sorprendenti.

I colori utilizzati in questa tavolozza di colori sono i seguenti:

• #D7D7ED
• #52517B
• #737172
• #FCFCFC
• #F0F1A

7. Sottile

La prossima tavolozza dei colori che vorremmo condividere è abbastanza neutra e nello stesso stile della tavolozza dei colori del Festival. Non si vede spesso in giro neanche così spesso, ma sembra molto pulito.

I colori usati in questo esempio sono (da sinistra a destra):

• #DAE2D5
• #4B7263
• #A8A461
• #494949
• #CCCCCC

8. Aziendale

La prossima tavolozza di colori che vogliamo condividere è l'ideale per tutti i tipi di siti web aziendali. I colori che vengono utilizzati riflettono una certa positività e giovinezza. I colori di sfondo chiari consentono ai colori giallo e turchese di apportare un valore aggiunto al sito web.

I colori utilizzati in questa tavolozza sono (da sinistra a destra):

• #181242
• #4ABDAC
• #DBDBDB
• #F7B733
• #FCFCFC

9. Rosa

Chi non ama il colore della rosa? Questa prossima tavolozza di colori porta un fattore femminile al tuo sito web. I colori chiari stanno dominando il sito web, ma si assicurano che anche i colori più scuri siano potenziati.

I colori utilizzati in questa tavolozza sono (da sinistra a destra):

• #152038
• #DDA199
• #FF614C
• #F5F5F5
• #E2E2E2

10. Cioccolato

La prossima tavolozza di colori che vogliamo mettere sotto i riflettori è Chocolate. La cosa bella di questa tavolozza di colori è che i colori di sfondo e il colore del testo si trovano nella stessa categoria di colori. Ciò dà spazio agli altri due colori per distinguersi da questi colori e attirare l'attenzione.

I colori utilizzati in questa tavolozza sono (da sinistra a destra):

• #FFF4E8
• #FFE2C4
• #822317
• #935B3B
• #346E70

11. Sofisticato

Questa prossima combinazione di colori è qualcosa che non ti aspetteresti a prima vista. Il viola e il giallo verde non sono molto usati insieme, ma come puoi vedere nel risultato; si abbinano abbastanza bene. Per mantenere l'attenzione su questi due colori, i colori di sfondo e il colore del testo sono piuttosto neutri.

I colori che vengono utilizzati in questa tavolozza sono (da sinistra a destra):

• #88D317
• #4F2649
• #FCFCFC
• #EFEFEF
• #080816

12. Olivia

Olivia è una tavolozza di colori che non ha bisogno di molte spiegazioni. I tipi di colore oliva e giallo si combinano molto bene. Mantenere i colori più chiari più neutri consente a questi colori di rubare la scena.

I colori utilizzati in questa tavolozza sono (da sinistra a destra):

• #778E3B
• #FFD902
• #132819
• #EFEFEF
• #FCFCFC

13. Porta d'oro

I tenui colori beige consentono al tuo sito web di riflettere una sorta di esclusività. Mentre la tavolozza dei colori sembra piuttosto sobria, il colore turchese viola in questa tavolozza di colori riesce a portare il calore di cui ha bisogno il sito web.

I colori utilizzati in questa tavolozza di colori sono (da sinistra a destra):

• #373737
• #F3F4E8
• #ADA075
• #EDE4C9
• #A685BC

14. Capitano

Questa tavolozza è probabilmente la tavolozza dall'aspetto più professionale nell'elenco. I due colori blu scuro in questa tavolozza sono la ragione principale di ciò. Il colore rosso, tuttavia, fa un ottimo lavoro per rompere il ghiaccio e aggiungere un po' di diversità al sito web.

I colori utilizzati in questo post sono (da sinistra a destra):

• #3B578E
• #DB2323
• #D7DEED
• #F7F9FF
• #201C44

15. Ambientale

La prossima tavolozza di colori che vorremmo condividere è ambientale. Il nome rivela che il verde domina questa tavolozza di colori. Questi tenui colori verdi si adattano perfettamente al colore turchese ammorbidito fornito in questa tavolozza.

I colori in questa tavolozza sono (da sinistra a destra):

• #C2D3DO
• #56776A
• #42B7A7
• #EDEFF4
• #26423E

16. Morbido ricco

In questa prossima tavolozza, possiamo vedere chiaramente quale sia una buona combinazione di beige e rosso. Danno un senso di maturità a qualsiasi tipo di sito web. Aggiungendo un altro colore verde evidente, anche l'aspetto del tuo sito web avrà un po' di giovinezza.

I colori in questa tavolozza sono (da sinistra a destra):

• #984B43
• #233237
• #B7A97C
• #F9F0D4
• #527C40

17. Affascinante

La tavolozza successiva nella riga è un altro sito Web di colore scuro. I colori dominanti sono il viola scuro e il grigio. Tuttavia, i colori più chiari riescono a portare un po' di calore al sito.

I colori in questa tavolozza sono (da sinistra a destra):

• #D0B6D6
• #3CC203D
• #898989
• #F2F2F2
• #F9AEBD

18. Menta

La tavolozza dei colori Mint dona un senso di freschezza al tuo sito web. Pur essendo molto sobri a prima vista, il colore arancione e viola riesce a dare una sensazione fresca e rinata al sito web.

I colori utilizzati in questa tavolozza sono (da sinistra a destra):

• #31190A
• #B4BCA7
• #F99A53
• #54468E
• #E3EDE5

19. Giallo tenue

Questa tavolozza di colori unica contiene colori per lo più caldi. Sebbene abbiamo sia un colore scuro che un colore chiaro come colori di sfondo, la sensazione generale si avvicina a un sito Web di colore chiaro.

I colori in questa tavolozza sono (da sinistra a destra):

• #DDCF30
• #437468
• #F1FFD1
• #4A4C49
• #FCFAD9

20. Mistero

L'ultima tavolozza di colori della riga è un'altra tavolozza di colori scuri che puoi utilizzare per il tuo sito web. I colori di sfondo utilizzati in questa tavolozza sono sobri e consentono agli altri colori più luminosi della tavolozza di emergere.

I colori di questa tavolozza sono:

• #131517
• #13828A
• #35363A
• #EEF5F7
• #AF8300

Pensieri finali

In questo post, abbiamo condiviso alcuni suggerimenti su come applicare la tavolozza dei colori che scegli al tuo sito web. Oltre a ciò, ti abbiamo anche mostrato 20 bellissime tavolozze di colori che potrebbero aiutarti a portare eleganza al tuo sito web. Se hai domande o suggerimenti, non esitare a lasciare un commento nella sezione commenti qui sotto.

E già che ci sei, faccelo sapere; quale di queste tavolozze di colori è la tua preferita?

Immagine in evidenza di EDGOR_21 / shutterstock.com