Generatore Palette Colori gratis

Esempio pratico

Apri la pagina e la casella «Colore base» contiene già #14b8a6, con «Palette del brand» selezionata. Sotto «Palette del brand · 7 colori» compaiono sette campioni: #14B8A6 (Base), #EE66BA (Accento), #E5FAF8 (Tinta chiara), #14524A (Sfumatura scura) e tre neutri con la stessa tonalità, #F3F6F6, #63837F e #1A2322. La scheda Base dice «Su bianco 2.5» con «Non idoneo», e «Su nero 8.4» con «AAA». Premi «Complementare» e la striscia scende a due colori, #14B8A6 e #EF7381. Sotto «Formato di copia» scegli RGB, poi premi «Copia tutti». Un avviso dice «Copiato 2 colori» e gli appunti contengono rgb(20, 184, 166), rgb(239, 115, 129). In «Verifica testo e sfondo» il colore del testo parte come #000000 sullo sfondo #14B8A6 e dice 8.44:1, «Testo normale AAA», «Testo grande AAA».

Quali impostazioni usare, e i limiti

• Digita il colore nella forma che hai. La casella «Colore base» accetta un codice hex con o senza #, di 3 o 6 cifre, un nome CSS come teal o tomato, un valore rgb() o hsl() (qualsiasi alfa viene ignorato), oppure numeri semplici come 20 184 166. Gli spazi nei nomi vengono ignorati, quindi «rebecca purple» funziona. Un hex completo di 6 cifre si applica mentre digiti. Qualsiasi altra cosa si applica quando premi Invio o esci dalla casella. L'hex a 8 cifre e oklch() non vengono letti. I punti rotondi impostano uno di otto colori iniziali e il quadrato apre il selettore di colore del sistema.
• Scegli il tipo di palette adatto al lavoro. «Palette del brand» dà 7 colori con dei ruoli: Base, Accento, Tinta chiara, Sfumatura scura e tre neutri. «Complementare» ne dà 2, «Analoga» 4, «Triadica» 3, «Complementare Divisa» 3, «Tetradica» 4, «Monocromatica» 5 e «Sfumature» 7. Monocromatica mantiene il tuo colore e varia la luminosità a gradini. Sfumature è una scala fissa dal 10 al 90 percento di luminosità con la tua tonalità e saturazione, e non include il tuo colore esatto. I tipi che ruotano la tonalità (Complementare, Analoga, Triadica, Complementare Divisa, Tetradica) puntano a una luminosità percepita simile, mantenuta in una gamma media.
• Blocca ciò che ti piace, poi rimescola. Premi «Blocca questo colore» su un campione, poi premi «Mescola» oppure scegli una nuova base. I campioni bloccati mantengono il loro colore e gli altri cambiano. «Mescola» sceglie una base casuale con saturazione HSL da 50 a 84 e luminosità da 40 a 57, quindi cade sui toni medi. I blocchi seguono la posizione del campione, non il colore: blocca il campione 1, cambia la base, e il campione 1 mantiene il vecchio colore. «Modifica questo colore» apre un selettore di colore per un campione e aggiunge «(modificato)» all'intestazione. Un campione modificato che non hai bloccato viene sostituito alla prossima rigenerazione della palette.
• Controlla il contrasto prima di pubblicare. Ogni scheda mostra i rapporti «Su bianco» e «Su nero» con un badge: «AAA» da 7:1, «AA» da 4.5:1, «AA grande» da 3:1, altrimenti «Non idoneo». I rapporti usano la formula WCAG della luminanza relativa. In «Verifica testo e sfondo» scegli un colore del testo e uno sfondo dalla palette più bianco e nero. La riga «Testo normale» assegna AAA a 7 e AA a 4.5. La riga «Testo grande» assegna AAA a 4.5 e AA a 3. Prova le coppie esatte che intendi usare, perché una palette non è leggibile solo perché lo è ciascun colore.
• Scegli il formato di copia, poi l'esportazione. «Formato di copia» stabilisce cosa copiano un clic su un campione, su un chip di tinta o sfumatura e «Copia tutti»: hex, rgb, hsl o oklch. Per la base risulta #14B8A6, rgb(20, 184, 166), hsl(173, 80%, 40%) e oklch(70.4% 0.123 182.5). Sotto «Esporta:» i pulsanti salvano palette.css, palette.scss, tailwind-colors.js, tailwind-scales.js («Tailwind 50-950»), palette.json, palette.png, palette.svg, palette.gpl, palette.ase e palette.aco. I file di testo contengono valori hex e JSON aggiunge stringhe rgb, hsl e oklch. Il PNG è largo 200 px per campione, l'SVG 160 px. «Etichette hex su PNG/SVG» è selezionata per impostazione predefinita.
• Condividi il link, oppure parti da un preset. «Condividi risultato» crea un link che mantiene il colore base, il tipo, le modifiche e i blocchi dopo il # nell'indirizzo; su un dispositivo tattile che lo supporta apre il menu di condivisione. Una palette condivisa può contenere da 1 a 12 colori. Sotto «Prova queste», «Pastello», «Toni terra», «Neon» e «Sicura per il brand (AA)» caricano ciascuna 5 colori come palette «Personalizzata», e cambiare la base in seguito riporta a «Palette del brand». «Preleva dallo schermo» compare solo nei browser che hanno la funzione EyeDropper, soprattutto quelli basati su Chromium.

Problemi comuni e come risolverli

Dice «Colore non riconosciuto. Prova #14b8a6, teal o rgb(20, 184, 166).»

Il testo non è stato letto come colore, e la casella torna alla base corrente. Le cause comuni sono un hex di 4 o 8 cifre come #14b8a680, un valore oklch(), un nome di colore che non è un nome CSS e numeri fuori intervallo come rgb(300, 0, 0) o hsl(10, 120%, 50%). Riscrivilo come hex di 3 o 6 cifre, nome CSS, oppure rgb() o hsl() con valori nell'intervallo, poi premi Invio.

Hai scelto un nuovo colore base, ma un campione ha mantenuto il vecchio colore.

Quel campione è bloccato. Il pulsante del lucchetto sulla scheda diventa verde acqua, e la sua descrizione dice «Sblocca questo colore». I campioni bloccati vengono mantenuti ogni volta che la palette si rigenera, anche dopo una nuova base, un nuovo tipo o «Mescola». Premi di nuovo il lucchetto per sbloccarlo. I blocchi sono legati alla posizione del campione, quindi un blocco sul campione 1 vale ancora dopo il passaggio da «Palette del brand» a «Triadica».

Un avviso dice «Copia non riuscita».

Entrambi i percorsi degli appunti sono falliti: l'API degli appunti del browser, poi una casella di testo nascosta con un comando di copia. L'API degli appunti manca nelle pagine non sicure e in alcuni frame isolati, e un browser può anche rifiutarla quando la pagina non è in primo piano. Fai clic una volta sulla pagina e riprova, oppure apri la pagina in una normale scheda del browser. Se la copia resta bloccata, usa i pulsanti di esportazione CSS, JSON o Tailwind per salvare invece un file.

Non c'è il pulsante «Preleva dallo schermo».

Il pulsante viene aggiunto solo quando il browser ha la funzione EyeDropper, e le FAQ della pagina dicono che sono soprattutto i browser basati su Chromium. Dove manca, usa il riquadro di colore quadrato accanto al campo di testo, oppure digita il codice hex che leggi da un'altra app. Premere Esc durante una scelta la annulla in silenzio, e una scelta che fallisce per un altro motivo non mostra alcun messaggio nella pagina.

Il PNG o SVG salvato non ha i codici hex sui campioni.

La casella «Etichette hex su PNG/SVG» è deselezionata. È selezionata quando la pagina si apre, quindi qualcuno l'ha tolta. Con la casella selezionata, ogni campione porta il suo codice hex in maiuscolo, con un inchiostro scuro o chiaro scelto per il contrasto. La casella riguarda solo i file PNG e SVG. Le altre esportazioni contengono i valori di colore stessi e non hanno etichette. Seleziona la casella, poi premi di nuovo PNG o SVG.

Come si confronta

Questa pagina costruisce una palette da un solo colore con regole fisse della ruota dei colori, valuta il contrasto con i rapporti WCAG ed esporta in file di codice e di design. Non estrae colori da una foto (per questo la pagina rimanda all'estrattore di colori dalle immagini), non simula il daltonismo, non dà nomi ai colori e non conserva le palette in un account. Il tuo lavoro resta nella barra degli indirizzi dopo il #, quindi un ricaricamento o un segnalibro lo riportano. Le regole di armonia danno un punto di partenza, non un brand finito. Un'app di design o una guida del brand restano il posto dove decidere i ruoli e provare la palette su layout reali.