Generatore di Palette di Colori

Perché una buona palette di colori regge tutto il design

Scegli i colori sbagliati e le persone lo sentono prima ancora di riuscire a spiegarlo. Una pagina sembra economica, un logo appare torbido, un grafico diventa rumore. Scegli quelli giusti e il lavoro si incastra da solo: sembra intenzionale, calmo, facile da leggere. Il colore svolge un enorme lavoro silenzioso, definendo l'umore, guidando lo sguardo e dicendo al lettore cosa conta di più. Quindi una palette non è decorazione che aggiungi alla fine. È una decisione che prendi all'inizio, e quasi tutto il resto si appoggia su di essa.

La buona notizia è che non hai bisogno di una laurea in belle arti per ottenere uno schema solido. Ti servono una manciata di regole dalla teoria dei colori e un modo rapido per provare le idee. È esattamente per questo che esiste un generatore: ti permette di scorrere decine di combinazioni nel tempo in cui prima ti saresti arrovellato su una sola.

Teoria del colore, senza il gergo

La maggior parte delle armonie deriva da un'idea semplice: dove si trovano i colori sulla ruota cromatica rispetto agli altri. Impara quattro schemi e potrai leggere o costruire quasi qualsiasi combinazione.

• Complementare usa due colori direttamente opposti tra loro, come il blu e l'arancione. È pieno di energia e ottimo per attirare l'attenzione, anche se troppo di entrambi compete per il focus, quindi lascia che uno predomini e usa l'altro come accento.
• Analogo usa tre colori adiacenti sulla ruota, come rosso, arancione e giallo. Ha poco contrasto, è calmo, ed è il tipo di armonia che si vede ovunque in natura. Piacevole per gli occhi, ma potresti dover aggiungere contrasto da qualche parte per evitare che tutto risulti piatto.
• Triadico usa tre colori equidistanti sulla ruota, come rosso, giallo e blu. Vivace e bilanciato, funziona meglio quando un colore domina e gli altri due fanno da supporto.
• Monocromatico si attiene a una sola tonalità variando luminosità e saturazione. È lo schema più infallibile in assoluto, pulito e coerente, e un buon ripiego quando nient'altro sembra giusto.

Un generatore casuale è utile per l'ispirazione, ma le modalità di armonia sono dove risiede il valore reale. Mantengono i tuoi colori matematicamente correlati, quindi sembrano appartenere insieme anche prima di qualsiasi ritocco.

HEX, RGB e HSL in parole semplici

Ogni colore che copi viene fornito in alcune notazioni, e descrivono tutte la stessa cosa in modo diverso.

HEX è il codice a sei caratteri che vedi più spesso, come #3A7BD5. È semplicemente rosso, verde e blu compressi in una stringa, due caratteri ciascuno. È compatto ed è quello che incollerai nel CSS o in uno strumento di design.

RGB indica quegli stessi tre canali come numeri da 0 a 255, come rgb(58, 123, 213). Stesso colore, più comodo da leggere, e utile quando si vuole un canale alfa per la trasparenza.

HSL descrive il colore come le persone effettivamente pensano: hue (quale colore, da 0 a 360 gradi intorno alla ruota), saturation (quanto è vivido) e lightness (quanto è luminoso). È il formato più facile da ritoccare a mano, poiché variare la luminosità o la saturazione fa esattamente quello che ti aspetti senza dover indovinare. Se hai mai bisogno di passare da un formato all'altro, una rapida conversione con il nostro strumento HEX in RGB rende tutto semplice.

Non dimenticare il contrasto e l'accessibilità

Una palette può sembrare splendida e fallire nel momento in cui qualcuno tenta di leggere il testo sopra di essa. Il contrasto è dove il bello incontra l'usabile. Le Linee guida per l'accessibilità dei contenuti web (WCAG) fissano un limite chiaro: il testo del corpo normale dovrebbe avere un rapporto di contrasto di almeno 4,5:1 rispetto allo sfondo, e il testo grande almeno 3:1. Non è burocrazia: è la differenza tra un lettore che scorre agevolmente la tua pagina e uno che strizza gli occhi, si arrende e se ne va.

La mossa pratica è testare le coppie di primo piano e sfondo mentre costruisci, non dopo. Un grigio chiaro su bianco potrebbe sembrare elegante in un mockup e diventare invisibile su un telefono alla luce del giorno. Quando una combinazione non supera il test, di solito basta spingere un colore verso il più scuro o il più chiaro, senza buttare via l'intero schema. Tieni i tuoi colori accentuati vivaci per pulsanti, link e highlight piuttosto che per lunghi blocchi di testo, e eviterai la maggior parte dei problemi di contrasto prima che inizino.

Un flusso di lavoro pratico

Ecco un approccio che regge in tutti i progetti. Inizia con un colore di riferimento su cui sei sicuro, spesso un colore del brand o una tonalità che si abbina all'umore desiderato. Bloccalo, poi lascia che il generatore costruisca un'armonia attorno a esso. Passa tra complementare, analogo e triadico finché qualcosa non sembra giusto, e non pensarci troppo al primo giro: stai cercando una direzione, non la risposta definitiva.

Una volta individuato un candidato, assegna i ruoli. Scegli un colore dominante per sfondi e aree ampie, uno secondario per la struttura, e un accento vivace per le parti che devono risaltare. Una ripartizione approssimativa di 60-30-10, dominante, secondario e accento, mantiene le cose bilanciate senza sembrare rigida. Poi controlla il contrasto su ogni coppia testuale, copia i codici esadecimali e hai finito. Salva quelli che funzionano, perché una palette riuscita per un progetto è spesso il seme per il prossimo. Quando sei pronto a continuare a costruire, il resto della nostra raccolta di generatori può occuparsi degli altri elementi.

Domande frequenti