Data una combinazione di colori, come posso applicare al design del sito Web?

Solo così c'è qualcosa di concreto da discutere, diciamo che ho questa combinazione di colori:

fonte

Ci sono molti articoli su come scegliere una combinazione di colori coerente basata su colori complementari, colori monocromatici, ecc. Tuttavia, una volta che ho una serie di colori, come faccio a decidere quale colore è l'intestazione, quale colore è il collegamento, che è lo sfondo e testo. Anche se decido di volere una luce su uno scuro o uno scuro su uno schema luminoso, mettere il resto dei colori sullo schermo può comunque rendere brutto il sito.

Ci sono regole empiriche o linee guida generali che aiutano a decidere quali colori vanno dove?

Vedo molte persone che commentano cose come "non c'è una risposta giusta" con cui io (in un certo senso) non sono d'accordo ... C'è sicuramente almeno una risposta giusta, forse alcune e sono sicuro che ci siano anche molte risposte sbagliate, un buon design consiste nel raggiungere la migliore soluzione possibile in base alle risorse e al tempo a tua disposizione e sicuramente una soluzione del genere supererà diverse alternative. Ci hai fornito una tavolozza di colori ai fini della discussione, quindi farò proprio questo e risponderò alla tua domanda in base alla tavolozza dei colori fornita. (Dato che non ho visto il layout con cui stai lavorando, sarà ancora piuttosto ampio ma avrà qualche processo da seguire.)

Quindi, i primi colori che mi piace scegliere quando creo una combinazione di colori in un progetto web sono lo sfondo per il corpo e il colore del testo principale. Normalmente è una buona idea scegliere i due colori più contrastanti per ricoprire questi ruoli e la tavolozza di esempio non fa eccezione, quindi in questo caso i colori sono # DEE1DD e # 28363D. Ora dobbiamo decidere quale usare per il testo e quale usare per lo sfondo e nella maggior parte dei casi cerco di usare un colore più chiaro per lo sfondo e più scuro per il testo. Ci sono state ricerche considerevoli per dimostrare che leggiamo un colore scuro su un colore chiaro più facilmente di un colore chiaro su buio, quindi è quello che generalmente prendo a meno che non ci sia una ragione per un aspetto più scuro (come se stessi facendo un sito Web per un metallo pesante band o qualcosa del genere ... suppongo che non sia il caso qui). Così,

Successivamente mi piace passare a quello che penso sia il prossimo elemento più importante, che è i collegamenti ipertestuali. Volete un colore che contrasti abbastanza dallo sfondo da non essere difficile da leggere ma che contrasti abbastanza dal testo per essere evidente. In questo esempio, la maggior parte dei green più leggeri sarà illeggibile sullo sfondo chiaro, quindi la risposta più ovvia è # 2F575D.

Successivamente hai accennato a un'intestazione che doveva essere colorata, e di nuovo abbiamo bisogno che sia in contrasto con lo sfondo. Nell'interesse del minimalismo, provo a riutilizzare i colori che ho già usato nel corpo, e in questo caso il colore del testo è probabilmente troppo scuro per riempire grandi spazi, quindi sarei propenso a selezionare # 2F575D e per per tutti i motivi sopra citati, utilizzare il colore del corpo dello sfondo # DEE1DD Per inserire qualsiasi testo o collegamento nell'intestazione.

Infine, copro elementi di design non essenziali come gli ultimi stati hover e ci sono ancora diversi verdi tra cui scegliere. Ancora una volta questo probabilmente deve contrastare abbastanza dallo sfondo poiché i collegamenti non scompaiono quando ci si sposta sopra, quindi se si è inclini ad andare con # 658B6F ...

E ... Voila! Ora hai una (base) combinazione di 4 colori. Spero che questo processo ti aiuti tanto quanto mi aiuta :)!

Il sito web a cui ti sei collegato ti mostra come usare quei colori:

#28363D for the active state 
#2F575D as the navigation background 
#DEE1DD as background 
#C4CDC1 as banner ...

Normalmente spruzza il mio colore nel design - anche se so che sono leggermente sbagliati - almeno ho circa due colori solidi o almeno uno. Quindi, quando ho presentato la mia idea, prendo il mio colore primario (quello che ho usato di più) e lo aggiungo a una ruota dei colori. In questo modo sostituisco i miei altri colori. Oppure provo a trovare alcune immagini che hanno la maggior parte dei miei colori originali.

Ho letto articoli che dicono, scatta un'immagine e disegno il tuo lavoro basato su quei colori, non posso farlo. Creo il mio design, con almeno un colore in mente e quindi uso le tecniche della teoria dei colori

spero che sia d'aiuto

Non esiste una formula su cosa prendere, che dovrebbe essere lo sfondo e così via, ecco perché il design è un'arte.

Normalmente farò un sacco di prove con l'insieme di colori che ho, ad esempio quale colore del carattere appare migliore a quale sfondo.

Esiste tuttavia una regola empirica, che è di contrastare i colori utilizzati, la maggior parte delle persone dirà che questo è buon senso, come un carattere di colore chiaro con uno sfondo di colore scuro. Quindi può verificarsi, come si determina il colore per i sottocomponenti, come caselle di avviso, navigazione e così via.

A mio avviso, dovresti avere la tua struttura nuda per il sito web pronta, quindi dovrai determinare quali sono i tuoi contenuti principali, come vuoi presentarli. Forse un colore più tenue sui sottocomponenti, che non richiede attenzione immediata.

Come fai a sapere se è buono o no? Facile, non appena dici "Questo è bello", è quando va bene. Aiuta sempre a ottenere una seconda opposizione dagli altri.

Tutto sommato, continua a provare con la combinazione di colori, non attenersi a una sola e potresti essere sorpreso della composizione che potresti ottenere alla fine.

Combinazione @Color: la combinazione fornita dal sito Web è abbastanza buona per cominciare.

Mi viene in mente un momento in cui io e la mia prima moglie abbiamo ottenuto un grande pannello di tela e diversi tubi di vernice acrilica. Posiamo la tela sul pavimento e spruzziamo senza meta colori casuali su di essa. L'abbiamo lasciato asciugare e poi l'abbiamo appeso sul nostro camino. Nel corso del tempo, diversi ospiti hanno commentato quanto fosse bello e hanno pensato che fosse un pezzo d'arte costoso ... vale a dire, fino a quando non abbiamo detto loro come è stato dipinto. È tutto negli occhi di chi guarda.

Avendo raccontato quella storia, devo dire che sono d'accordo che ci sono combinazioni di colori incompatibili, brutti per la maggior parte degli spettatori. Tuttavia, non ce ne sono molti. Non credo che dovresti stressarti troppo per farlo bene . Ciò che è contenuto nel sito Web può compensare molte scarse scelte di colore. Il contenuto vincerà sempre il design.