Generatori di palette di colori: come ottenere palette che funzionano

Un generatore di palette di colori è uno strumento che propone un insieme di colori che stanno bene insieme, usando regole della teoria del colore, il caso, una foto o un testo scritto. Usalo per sbloccarti, poi correggi il risultato: aggiungi uno sfondo neutro e un colore per il testo, dai a ogni colore un compito e provalo su un design vero. I cinque campioni del generatore sono un punto di partenza. La palette che funziona è quella che ricavi modellandoli.

I tipi principali di generatore di palette

Ogni generatore, sotto il cofano, fa una di quattro cose. Sapere quale usi ti dice in che cosa è bravo e che cosa dovrai correggere.

Se vuoi capire le regole dietro i cerchi delle armonie, leggi l’armonia dei colori. Per l’approccio da foto, palette di colori da un’immagine spiega come scegliere campioni migliori, e i generatori di palette di colori con AI trattano i prompt.

Perché le palette generate spesso falliscono nei design veri

Un generatore mostra i colori come cinque strisce uguali. I design veri sono tutt’altro: un colore copre quasi tutto lo spazio, uno porta le parole e gli altri compaiono in piccole quantità. Ecco un tipico risultato casuale accanto alla stessa idea dopo le correzioni.

Cinque ritocchi che rendono utilizzabile qualsiasi palette generata

1. 1

   Tieni l’unico colore che ti piace davvero

   Bloccalo e trattalo come colore principale. Tutto il resto esiste per sostenerlo. Se niente spicca, genera di nuovo invece di accontentarti.

2. 2

   Aggiungi uno sfondo e un inchiostro

   I generatori raramente li includono. Scegli uno sfondo chiaro (un bianco caldo o freddo) o scuro, e un colore d’inchiostro per il testo che contrasti forte. Sfumali leggermente verso il colore principale perché appartengano alla palette.

3. 3

   Distribuisci la luminosità

   Immagina i campioni in scala di grigi, oppure convertili a schermo. Vuoi valori chiari, medi e scuri, non cinque medi. Regola la luminosità finché ogni colore è nettamente separato.

4. 4

   Abbassa la saturazione di tutti tranne uno

   Lascia vivace l’accento e calma gli altri. Un colore di supporto più morbido del principale fa sembrare il principale più ricco.

5. 5

   Assegna le proporzioni

   Un buon punto di partenza è la regola 60 30 10: sfondo circa 60%, colore principale circa 30%, accento circa 10%. Aggiusta a occhio quando lo vedi in un layout.

Per fare queste correzioni con precisione, lavora in un formato colore che separi luminosità e tinta. HSL è facile da leggere; OKLCH è più bravo a mantenere onesta la luminosità tra tinte diverse.

Prova la palette su un layout reale

I campioni nascondono problemi che emergono appena arrivano le parole. Metti la palette su qualcosa che faresti davvero, come un post, un menu o una sezione hero, e guardala alla dimensione in cui la vedranno le persone. Poi controlla ogni coppia di testo con un verificatore di contrasto.

Un gradiente è una prova rapida in più. Fondi insieme sfondo, colore principale e supporto: se la miscela diventa grigia al centro, due colori stanno litigando, come spiegano i gradienti fangosi.

Salvala come token, non come screenshot

Quando la palette funziona, dai ai colori il nome del loro compito e non della loro tinta, così potrai cambiare il verde acqua più avanti senza rinominare tutto. Nel codice significa variabili CSS; negli strumenti di design significa stili con nome; in Gradiently significa il kit del brand, dove palette, font e voce vivono insieme e il Designer li applica a ciò che crea.

:root {
  --color-ground:  #f7f3ec;
  --color-ink:     #1c2321;
  --color-main:    #2a6f68;
  --color-support: #a8c5b8;
  --color-accent:  #e07a5f;
}

.button {
  background: var(--color-main);
  color: var(--color-ground);
}

Cercare per colore invece di generare

A volte ciò che vuoi davvero non sono cinque codici ma uno sfondo finito in una famiglia di colori. Il Mercato di Gradiently ti permette di cercare i Mark con parole di colore come «verde acqua profondo» o «pesca calda» e di filtrare per aspetto. Ogni Mark è uno sfondo vivo di gradienti e materiali con la sua palette e la sua voce tipografica, confrontato con tutti gli altri perché non ce ne siano due uguali, e puoi progettare gratis con qualsiasi Mark non ancora riservato. È un’altra strada verso lo stesso obiettivo: colori che stanno bene insieme, già al lavoro.