I migliori strumenti di colore per i web designer
14 strumenti utili per aiutarti a creare la tavolozza dei colori perfetta.
Come web designer, una delle scelte più importanti che facciamo ha a che fare con le nostre selezioni di colori. Scegli quelli sbagliati e potresti perdere l’occasione. È vero: i colori che scegliamo possono avere un impatto psicologico su chi li osserva.
Ad esempio, il rosso è generalmente visto come un colore ad alta energia, mentre il blu implica calma e pace. Per illustrare questo punto, considera i colori che potresti utilizzare su un sito Web che vende giocattoli per bambini rispetto a un sito per uno studio legale. È probabile che tu vada con colori vivaci e vivaci per il primo e toni tenui di blu e grigio per il secondo.
Ma come fai a sapere quali colori funzionano bene insieme? Fortunatamente, non devi essere un maestro nella teoria dei colori per mettere insieme una tavolozza di colori praticabile. Per aiutarti con l’importante compito della selezione dei colori, ecco alcuni dei migliori strumenti gratuiti per la progettazione web dei colori (più un bonus speciale alla fine per gli utenti Mac).
01. HueSnap
L’ispirazione può colpire in qualsiasi momento. Potrebbe essere l’arredamento di una camera d’albergo o la luce nel parco una sera che ispira l’ispirazione per il tuo prossimo schema di colori del sito Web. Per quando ciò accade, HueSnap è qui per aiutarti. Puoi scattare una foto e usare HueSnap per estrarre i colori dall’immagine e trasformarli in una tavolozza.
L’app è su misura per l’uso mobile e puoi salvare e condividere le tue tavolozze con gli altri. Ci sono molte funzioni che ti aiutano a modificare una tavolozza, come le opzioni per scegliere i colori complementari e composti, e le tue tavolozze possono avere fino a sei colori ciascuna.
02. Khroma
Khroma è uno strumento di colore AI che ha lo scopo di aiutarti a sfogliare e confrontare facilmente le combinazioni di colori originali. Con esso, gli utenti addestrano un algoritmo AI per agire come un’estensione del loro cervello. Gli utenti iniziano scegliendo 50 colori che preferiscono e questi colori vengono utilizzati per addestrare una rete neurale in grado di riconoscere centinaia di migliaia di altri colori simili.
03. Coolors
Coolors offre una vasta gamma di strumenti per regolare la palette nel modo desiderato. Inoltre, puoi esportare la tua creazione finale in molti formati diversi in modo da poterla utilizzare praticamente ovunque tu voglia.
Coolors non è solo uno strumento per creare una tavolozza di colori, ma consente anche di visualizzare altre creazioni completate da altri utenti in modo da poter trarre ispirazione. La sezione Esplora contiene centinaia (se non migliaia) di tavolozze che puoi visualizzare, salvare e modificare te stesso. Ancora meglio, Coolors è disponibile su computer desktop e come applicazione iOS, un componente aggiuntivo Adobe Photoshop e Illustrator – e persino un’estensione di Google Chrome per un facile accesso.
04. Adobe Color CC
Lo strumento gratuito Adobe Color CC è in circolazione da un po ‘di tempo ed è uno dei migliori strumenti a colori per scegliere una tavolozza di colori. Non solo puoi creare le tue combinazioni di colori, ma puoi anche esplorare ciò che altri hanno creato.
Seleziona un colore dalla ruota o da un’immagine e applica le regole del colore, ad esempio utilizzando solo colori complementari, colori monocromatici o sfumature del colore selezionato, per generare una tavolozza di colori. Oppure, fai clic su ciascun colore ed esplora la ruota dei colori per personalizzare la selezione. Come bonus aggiuntivo, puoi salvare i temi che crei nella tua libreria Adobe.
05. Colordot
Colordot di Hailpixel è un eccellente strumento online gratuito per la creazione di una tavolozza di colori. Utilizzando semplici gesti del mouse, è possibile selezionare e salvare i colori. Muovi il mouse avanti e indietro per la tonalità; su e giù per leggerezza; scorrere per la saturazione e fare clic per salvare un colore nella tavolozza. Fare clic sull’icona insieme per visualizzare i valori RGB e HSL di ciascun colore. Ha anche un’app iOS da $ 0,99 / £ 0,99 che ti consente di catturare i colori con la tua fotocamera.
06. Eggradients
Eggradients offre idee per bellissime sfumature da utilizzare nel tuo lavoro di progettazione, messe insieme da qualcuno con un grande occhio per il colore e un interessante senso dell’umorismo. Ogni sfumatura, visualizzata a forma di uovo, ha il suo nome stimolante. Gli esempi includono “Cuore spezzato di Wozniak” per un blu pallido e “Nemico misericordioso” per una transizione da giallo a verde.
07. 147 Colors
Quando sei responsabile della generazione di CSS di facile lettura , a volte utilizzare i colori standard e i nomi dei colori è la strada da percorrere. Grazie a 147 colors di Brian Maier Jr, puoi dare un’occhiata a tutti loro e scegliere quelli che funzionano per te.
Contiene i 17 colori standard, oltre a 130 altri nomi di colori CSS. Filtra i risultati per sfumature di blu, verde e così via, oppure scegli dall’arcobaleno completo di 147 colori.
08. Canva Color Palette Generator
Il generatore di tavolozze di colori di Canva è perfetto se stai cercando di creare una tavolozza di colori basata su un’immagine particolare. Sebbene altri strumenti offrano opzioni simili, Canva’s è semplicissimo da usare: si carica un’immagine e il generatore restituirà una tavolozza dei cinque colori principali in essa contenuti. Puoi fare clic sui colori che ti piacciono e copiare il valore esadecimale negli appunti.
Sfortunatamente, è qui che finisce l’utilità dell’offerta Canva, poiché questo è tutto ciò che puoi fare con il suo generatore di tavolozze: non puoi regolare i colori della tavolozza. Le uniche altre opzioni che hai sono copiare i valori esadecimali forniti o caricare un’altra foto.
09. Material Design Palette
Con Material Design Palette è possibile selezionare due colori, che vengono poi convertiti in una tavolozza di colori completa da scaricare, completa di un’anteprima.
L’azienda offre anche Material Design Colours , che consente ai designer di vedere le diverse tonalità di un colore, insieme ai corrispondenti valori HEX.
10. ColourCode
ColourCode di Tamino Martinius e Andreas Storm è simile a Colordot, ma offre un po ‘più di guida. Questo strumento gratuito ti colpisce proprio in faccia, mostrando uno sfondo che cambia colore con il movimento del cursore. Oltre a ciò, questo strumento offre diverse categorie per la tavolozza (analogica, triade, quad, monocromatica, monocromatica, ecc.).
Con ColourCode, puoi impostare diverse opzioni lungo la ruota dei colori per creare una combinazione originale. È inoltre possibile salvare la tavolozza o esportarla come file SCSS o LESS. Puoi anche esportare in PNG, se lo desideri.
11. Color Calculator
Seleziona un colore e un’opzione di armonia dei colori. In cambio, si ottengono i risultati della combinazione di colori consigliata.
La cosa bella di questo sito, tuttavia, è che entra anche un po ‘di dettagli sulla teoria del colore e su come si collega alle tue scelte di colore.
12. HTML Color Code
Questa suite di strumenti rigonfiamenti gratuita di Dixon & Moe include un selettore di colori approfondito con molte spiegazioni delle regole di colore; una serie di cartelle colori con colori di design piatto, lo schema di progettazione dei materiali di Google e la classica tavolozza di colori sicura per il web; e un elenco di nomi e codici di colori HTML standard.
Questo sito offre anche tutorial e altre risorse per i web designer e opzioni per esportare risultati dai suoi strumenti come codici HEX, HTML, CSS e stili SCSS.
13. W3Schools: Colors Tutorial
Se stai cercando una soluzione all-in-one che includa una guida ai colori, nonché una serie di strumenti diversi, il Tutorial Colori di W3Schools è la scelta perfetta.
Non solo puoi conoscere la teoria dei colori, le ruote dei colori e le tonalità dei colori, ma sarai anche in grado di utilizzare gli altri strumenti che ha, come il Convertitore di colori . Con questo strumento, sei in grado di convertire qualsiasi colore da e verso nomi, codici HEX, RGB, HSL, HWB e CMYK.
14. Digital Color Meter (Mac)
OK, utenti Mac … questo è per te. Con lo strumento Digital Color Meter integrato nella tua macchina, puoi “prendere” un colore da qualsiasi punto dello schermo, quindi ottenere i valori per quel colore come decimale, esadecimale o percentuale. Inoltre, puoi persino “copiare” il colore selezionato come testo o immagine.
