Costruire un sito Web può portare a qualche singhiozzo inaspettato, uno dei quali è il colore. Comprendere le scelte di colore e il modo in cui i colori possono essere visualizzati su computer diversi è il primo passo per garantire che il tuo sito abbia l'aspetto desiderato.
Oltre a trovare e selezionare i colori che funzionano per te, è consigliabile sviluppare e gestire una combinazione di colori per il tuo progetto. È semplice creare un set di campioni in un comune software di immagini come Adobe Photoshop o Illustrator e organizzare i colori in modo tale che siano facili da trovare e utilizzare.
Ti piace l'articolo? Assicurati di iscriverti al nostro feed RSS e seguici su Twitter per rimanere aggiornato sui contenuti recenti.
Capire il colore del web
I colori sul web sono realizzati mescolando combinazioni di tonalità di rosso, verde e blu; questa forma di miscelazione del colore si chiama colore RGB. Ogni tonalità è rappresentata da un valore numerico compreso tra 0 e 255 e ogni colore univoco ha un valore per rosso, verde e blu. Il nero, ad esempio, non ha un valore di colore che gli dà un valore RGB di colore di 0, 0, 0. La prima cifra si riferisce sempre al valore rosso, il secondo al verde e il terzo al blu.
Perché ci sono 256 varianti di ogni tonalità, sono possibili 16 milioni di combinazioni di colori usando schemi RGB. Oggi la maggior parte dei computer è in grado di gestire tutti i 16 milioni di valori cromatici e di visualizzarli accuratamente. Ci sono alcuni però che aderiscono ancora alla vecchia lista di 216? Web safe? i colori che sono stati sviluppati in modo che i colori vengano riprodotti con precisione sulle macchine utilizzando una tavolozza di 256 colori. Questo standard è praticamente svanito con i progressi della tecnologia a schermo e a colori.
Quando crei i colori, potresti avere la possibilità di creare ogni sfumatura usando un valore RGB o usando una notazione esadecimale o un valore HEX. I valori HEX del colore sono identificati da sei caratteri preceduti da un segno #. I valori HEX usano una combinazione di numeri e lettere; 0 è il valore più basso e FF (255) è il più alto. Ciascuno dei sei caratteri nel valore HEX corrisponde ai numeri nel valore RGB. Il nero ha un valore HEX di # 000000.
Inoltre, 147 colori sono definiti per nome per le applicazioni HTML e CSS, secondo w3schools.com, che ha una tabella che dettaglia ogni colore per nome e valore. Ci sono 17 colori standard: acqua, nero, blu, fucsia, grigio, grigio, verde, lime, marrone, blu navy, oliva, viola, rosso, argento, verde acqua, bianco e giallo. Ognuno ha uno specifico valore RGB ed ESEMPIO. Maroon, ad esempio, ha un valore RGB di 128, 0, 0 e valore HEX di # 800000; l'argento è 192, 192, 192 o # C0C0C0.
Crea campioni di colore
A volte la creazione di una combinazione di colori suona più facile di quanto non sia. A seconda della complessità del design di un sito, potrebbe essere necessario un manipolo di arcobaleno di colori per ottenere l'effetto desiderato. Alcuni designer hanno un talento per l'abbinamento dei colori e creeranno uno schema da zero; altri troveranno ispirazione da altri siti o fonti esterne (come ad esempio la navigazione di patatine di vernice in un negozio di ferramenta o l'abbinamento di colori che si trovano in natura).
Le combinazioni di colori sono sviluppate in molti modi diversi in base ai processi di pensiero del progettista. Mentre alcuni hanno l'occhio per creare colori al volo, sfogliando un libro a colori o usando il colore di una foto sono metodi comuni per sviluppare uno schema. Quando si crea una combinazione di colori, assicurarsi di annotare le combinazioni di colori per ciascuna parte del sito Web, ad esempio l'intestazione, lo sfondo, la barra di navigazione, la barra laterale, i colori del testo e i collegamenti.
Per utilizzare i colori che hai trovato in altri luoghi, scatta una foto digitale e aprila in un software di fotoritocco come Adobe Photoshop. Ingrandisci l'immagine finché i pixel non sono chiaramente visibili e usa lo strumento contagocce per selezionare le tonalità che ti piacciono e annotare i loro valori di colore.
Importa campioni di colore
Non tutti i designer partono da zero con una combinazione di colori. Sono disponibili online numerosi strumenti gratuiti che consentono agli utenti di sviluppare, scaricare e importare una tavolozza di colori in pochi minuti. Le combinazioni di colori possono essere create utilizzando un singolo colore che trova sfumature complementari o utilizzando una foto o un'altra immagine. Cerca uno strumento che offra i mix di colori esatti per il download ed è compatibile con il tuo software. Ecco alcune semplici opzioni per il tuo prossimo progetto.
ColorBlender
ColorBlender crea una tavolozza istantanea di sei colori che i designer possono scaricare come una tavola di colori Photoshop, Illustrator EPS o hanno inviato come e-mail per mescolare manualmente e utilizzare in altri programmi. I colori sono abbinati usando uno strumento di scorrimento per ogni valore RGB. Le miscele sono belle e hanno un sacco di gamma. Puoi anche inserire un valore per un colore che ami come punto di partenza. Nulla è preimpostato, puoi modificare ogni scelta di colore e persino abbinare i colori PANTONE.
ColorCombos.com
ColorCombos.com ha una vasta libreria di combinazioni di colori preimpostate che si presentano sotto forma di schemi a cinque colori che sono ricercabili per tonalità. Ciascuno visualizza i valori HEX, RGB e anche CMYK (per progetti di stampa) per ciascun colore. Gli schemi sono scaricabili come file .png. Usa lo strumento eyedropper per aggiungere e salvare ogni valore di colore. Il sito consente inoltre agli utenti di creare combinazioni di colori personalizzate.
Generatore di tavolozze di colori
Color Palette Generator è la versione automatica di come creare una combinazione di colori da una foto o un'immagine. Gli utenti possono selezionare una delle immagini preimpostate o caricarle per ottenere una tavolozza personalizzata a nove colori dall'immagine. Le combinazioni di colori sono belle, ma non possono essere scaricate. Passa il mouse su ogni tonalità per il suo valore HEX. I valori RGB non sono forniti.
Designer Schema colori
Color Scheme Designer può essere lo strumento più visivo là fuori. Crea uno schema a quattro colori come molti altri programmi, ma consente anche agli utenti di vedere in anteprima come lo schema potrebbe essere usato sul loro sito, sulla base di esempi di pagine chiare e scure. Il sito consente agli utenti di mescolare i colori utilizzando una grande ruota dei colori e gli schemi sono sviluppati utilizzando diverse opzioni per palette mono, complementari, a triade, tetradi, analogici e accentati.Il sito ha anche la maggior parte delle opzioni per il formato di download, tra cui HTML, XML, testo e opzioni della palette di Photoshop. Ogni valore di colore ha valori HEX e RGB disponibili.
Swatch Organization
Il modo più semplice per gestire e organizzare i campioni in Adobe Photoshop e Illustrator è attraverso le librerie di campioni. È possibile impostare schemi di colori specifici e salvarli e aprirli per determinati progetti. (Anche i prodotti Adobe sono prontamente disponibili con alcune librerie preimpostate che sono piuttosto carine, compresi alcuni set di campioni Pantone per le applicazioni CMYK.)
Per aggiungere nuovi colori a una libreria di campioni, apri la palette Campioni dal menu Finestra. Ciò che si apre è la tavolozza campione predefinita. (Puoi vedere altre opzioni facendo clic sulla scheda Espandi. Ogni opzione farà apparire un'altra finestra.) Seleziona? Nuovo? aggiungere un mix di colori personalizzato o? caricare i campioni? per importare una combinazione di colori scaricata. Disporre i colori nella palette Campioni nel modo che funziona per te e salvare. Dopo il salvataggio, i nuovi campioni di colore possono essere caricati e utilizzati in qualsiasi momento.
Avere una pletora di campioni di colore può essere ingombrante. Pensa a creare un nuovo file per ogni progetto a cui tornerai più volte. Mantieni le tavolozze piccole e rimuovi i colori che non utilizzerai. Assegna un nome ai colori in un modo che ti consenta di ricordare facilmente le loro applicazioni. Ad esempio, nella libreria di campioni? Il mio sito Web ,? assegna un nome a ciascun campione di colore in base a come viene utilizzato, anziché i valori RGB.
Non salvare i campioni di colore in una libreria per le singole applicazioni. Richiede tempo inutile; le librerie sono utilizzate al meglio per progetti o colori ricorrenti. Ricordarsi di rimuovere tutti i colori non utilizzati dalle librerie dei colori per i progetti che si consegnano ai client per mantenere i file puliti e organizzati.
Conclusione
Il primo passo per creare colori fantastici per il tuo prossimo progetto, sul Web o in stampa, è capire come funziona il colore e come creare uno schema con toni gratuiti. Sapere cosa significano i numeri associati ai colori ti aiuterà a creare (o addirittura a rubare) i campioni con facilità.
Gioca con il colore per creare combinazioni appropriate per il progetto. Una volta che hai un set di colori con cui lavorare, mantenere i tuoi campioni organizzati per migliorare il tuo flusso di lavoro è un must. Usa gli strumenti organizzativi in Adobe Creative Suite per sfruttare al meglio il suo sistema di gestione del colore integrato. Raggruppa e nomina i colori in modo che si sincronizzino con il modo in cui verranno utilizzati.
Fonti di immagini: alchini e IvanWalsh.com.