Generatore di palette colori
Palette di colore che concordano
Questo generatore di palette colori parte da un colore, da un nome o da una foto. Quindi ottieni palette complementari, analoghe, triadiche e monocromatiche. Ognuna arriva con i suoi codici hex, le variabili CSS e una lettura del contrasto. La ruota gira nel tuo browser, e non carichiamo nulla.
- GratisPrezzo
- SeiArmonie
- NessunaRegistrazione
- NessunaCaricamenti
Generatore di palette colori
Un colore in ingresso, sei armonie in uscita — con una tabella del contrasto e cinque formati di export
Un codice hex, rgb(), hsl() o un nome di colore funzionano tutti. Niente viene caricato — l’intera pagina gira in questa scheda.
Il lettore nomina l’armonia che si adatta meglio. Anche un quasi centro riceve una risposta.
L’immagine viene letta su un canvas in questa scheda, quindi un file non ancora pubblicato resta non pubblicato. Tornano fino a cinque colori, i più usati per primi; un’immagine piatta ne dà meno.
Un passo di luminosità è la riparazione abituale quando un’armonia è giusta sulla ruota e illeggibile sulla pagina.
| Testo su sfondo | Rapporto | Testo normale | Testo grande |
|---|
Le soglie sono quelle WCAG: 4,5 a 1 per il testo normale e 3 a 1 per il testo grande.
Pronto. Digita un colore, scegline uno, o premi Blu del sito.
Che cosa fa un generatore di palette colori
Un colore è un punto di partenza più che un piano. Una pagina ha bisogno di uno sfondo, di un colore di testo, di un bordo e di un accento che stiano insieme. Quindi un generatore di palette colori prende il colore che hai già e lavora sul resto.
Quattro cose tornano da una scelta sola. Prima le serie di armonie: complementare, analoga, triadica, complementare divisa, tetradica e monocromatica. Poi una scala di tinte dal quasi nero al quasi bianco. Dopodiché una tabella del contrasto che dice quale coppia può portare testo. Infine i formati di export, pronti da incollare.
Questa tabella del contrasto conta più di quanto sembri. Una palette carina che fallisce la regola del contrasto diventa un ticket per l’assistenza. Quindi ogni coppia riceve una lettura, e ogni riga che fallisce lo dice a parole.
Il senso funziona anche al contrario. Poiché puoi incollare una palette che possiedi già e chiedere quale armonia le si adatta meglio, la pagina aiuta quando erediti un progetto e devi estenderlo senza uno stacco visibile.
Come un generatore di palette colori costruisce una palette
La matematica è più vecchia del web. Una ruota dei colori ordina le tinte in cerchio, e ogni armonia è una figura disegnata su quel cerchio. Due punti opposti danno una coppia complementare. Tre punti a distanza uguale danno una triadica.
Quindi la prima passata converte il tuo colore in HSL. La tinta è l’angolo, la saturazione dice quanto il colore sta lontano dal grigio, e la luminosità dice quanto bianco o nero porta. In HSL gli angoli si sommano in modo pulito, ed è per questo che ogni armonia lavora lì invece che in hex.
La seconda passata ruota la tinta. La complementare aggiunge 180 gradi. L’analoga aggiunge 30 e toglie 30. La triadica aggiunge 120 e 240. La complementare divisa aggiunge 150 e 210. La tetradica aggiunge 90, 180 e 270. Ogni risultato rientra nel cerchio, quindi una tinta di 350 più 30 cade su 20 invece che su 380.
La terza passata sistema il resto. Poiché una rotazione pura può lasciare due colori alla stessa luminosità, il generatore offre anche una versione con la luminosità spostata. Altrimenti un banner e il suo accento si confondono su un proiettore.
Qui nulla ha bisogno di una chiamata di rete. Quindi la pagina funziona offline, e funziona su un colore di marca che preferisci non digitare in uno strumento ospitato.
Perché decide la ruota, non l’occhio
L’occhio si adatta. Due colori che sembrano diversi su una pagina bianca possono sembrare identici su una pagina scura. L’aritmetica delle tinte non si adatta, e questo è il suo pregio.
Poiché la rotazione gira su numeri, lo stesso ingresso dà la stessa uscita ogni volta. Quindi una palette che ti piaceva il mese scorso torna esattamente come l’hai lasciata.
Il contrasto è l’altro motivo. Un rapporto di contrasto dipende dalla luminanza relativa invece che dalla tinta. Quindi due colori dai lati opposti della ruota possono ancora fallire la regola quando entrambi stanno a una luminosità simile.
Da qui il passo di luminosità. È la leva che ripara un’armonia corretta sulla ruota e inutilizzabile sulla pagina.
Le sei armonie, una per una
La complementare mette due tinte una di fronte all’altra. La coppia strilla, e va bene per un invito all’azione o per un prezzo. Tuttavia la stessa coppia fa male come testo normale su uno sfondo, perché i bordi vibrano dove i due si incontrano.
L’analoga tiene tre vicine entro circa 60 gradi. Poiché le tinte sono vicine, la serie sembra calma, e va bene per un grafico con più serie. Però non ti dà alcun accento naturale.
La triadica prende tre tinte a distanza uguale. Il risultato è vivo ed equilibrato insieme. Però una delle tre deve spesso ridursi ad accento, altrimenti la pagina diventa una bandiera.
La complementare divisa prende una tinta e le due vicine del suo opposto. Quindi tieni il mordente di una coppia complementare con meno tensione. È la più facile delle sei da usare su una landing page.
La tetradica, a volte chiamata quadrata, prende quattro tinte a distanza uguale. Infatti chiede la disciplina maggiore, perché due delle quattro devono portare il grosso della pagina e il resto deve restare piccolo.
La monocromatica resta su una tinta e muove solo luminosità e saturazione. Infatti è la serie più sicura per un’interfaccia di prodotto, perché nulla in lei si contende l’attenzione.
Leggere un colore da una foto
Un colore di marca arriva spesso come logo, screenshot o fotografia invece che come codice. Quindi la pagina ne legge uno anche così. Trascina il file, e il campionatore restituisce le tinte che coprono più pixel.
La lettura gira su un canvas nella tua scheda. Poiché il file non lascia mai il browser, una foto di prodotto non ancora pubblicata resta non pubblicata.
Il campionamento raggruppa i pixel simili prima di contarli. Altrimenti la fotografia di una foglia restituisce quattrocento sfumature di verde e nulla di utile. Il raggruppamento tiene la lista abbastanza corta da poter scegliere.
Da lì valgono le stesse sei armonie. Quindi la fotografia di una vetrina può produrre un intero schema in un passo, con il colore dell’insegna come base.
Che cosa esce: i formati di export
Ogni serie parte nel formato che serve al tuo passo successivo. La lista semplice di codici hex va bene per un messaggio a un designer. Le proprietà personalizzate CSS vanno bene per un foglio di stile, poiché le variabili sono il modo abituale di tenere un tema.
Un blocco di proprietà personalizzata CSS viene per primo, perché un tema vive spesso dentro variabili. Poi un blocco Tailwind, poiché un file di tema porta gli stessi valori sotto nomi propri. Dopodiché le variabili SCSS e un oggetto JSON coprono i casi rimasti.
Ogni campione porta anche le sue letture. Cioè l’angolo di tinta, la saturazione, la luminosità, il codice hex, e il contrasto contro il bianco e contro il nero.
Infine l’intero schema si scarica come file JSON. Quindi una palette sopravvive a un blocco note svuotato, e può finire in un repository di progetto accanto alle schermate da cui viene.
In questa pagina
- Lo strumento
- Che cosa fa un generatore di palette colori
- Come usare il generatore di palette colori
- Perché usare questo generatore di palette colori
- Ottenere una palette che regge
- Sei modi in cui una palette generata va storta
- Domande sul generatore di palette colori
- Gli strumenti che vanno con questo
Continua
Come usare il generatore di palette colori
Quattro passi, e nessuno chiede un account.
- 1
Parti da un colore
Quindi digita un codice hex, scegli un nome dalla lista, o trascina il segnaposto sulla ruota. Una qualsiasi delle tre fissa il colore di base, e il resto della pagina si aggiorna subito.
- 2
Leggi le armonie
Poi scorri le sei serie. Ognuna mostra i suoi campioni con il codice hex sotto. Poiché il colore di base resta in ogni serie, le confronti senza perdere il segno.
- 3
Controlla la tabella del contrasto
Poi passa in rassegna le coppie. Una coppia che fallisce la regola del testo normale funziona ancora per un titolo grande. La tabella dice quale è quale. Quindi ripara la coppia che fallisce prima che arrivi in un foglio di stile.
- 4
Prendi il formato che ti serve
Infine copia le variabili CSS, il blocco Tailwind, la lista SCSS o i codici hex semplici. Dopodiché scarica il JSON se vuoi tutto lo schema in un file solo.
Perché usare questo generatore di palette colori
Cinque motivi, e ognuno riguarda il colore più che il codice.
Sei armonie, non una
Quindi confronti una triadica con una complementare divisa senza aprire un secondo strumento. Poiché ogni serie condivide il colore di base, il confronto resta onesto.
L’aritmetica gira nella tua scheda
Quindi un colore di marca ancora riservato resta sulla tua macchina. Nulla viene caricato, e nessun account si mette fra te e il risultato.
Il contrasto arriva con la palette
Allora i numeri stanno accanto ai colori. Altrimenti scegli una palette qui e scopri il guasto in un audit tre settimane dopo. A quel punto il layout è già costruito.
Una foto vale come ingresso
Poiché un logo è spesso l’unica fonte di un colore di marca, il campionatore ne legge uno direttamente. Quindi salti il passo in cui indovini un codice hex a occhio da un JPEG.
Cinque formati di export
Infine l’uscita va bene per un foglio di stile, un tema Tailwind, una build SCSS o un fixture JSON. Quindi il pulsante di copia ti lascia raramente riformattare a mano.
Ottenere una palette che regge
Sei abitudini che separano una palette che parte da una palette che si ridisegna.
- Prendere la base dal marchio Parti quindi dal colore che devi tenere. Un generatore che inventa la base ti consegna uno schema senza proprietario, e il progettista dopo lo butta.
- Spostare la luminosità prima di consegnare Poiché una rotazione di tinta pura può lasciare due colori ugualmente chiari, alza o abbassa uno dei due. Allora la coppia si separa su un proiettore come sul tuo schermo.
- Tenere un solo accento In una serie triadica o tetradica, lascia che un solo colore porti gli accenti. Altrimenti ogni pulsante si contende la stessa attenzione, e nessuno vince.
- Provare contro entrambi gli sfondi Controlla ogni colore di testo sul bianco e sulla superficie più scura della serie. Di conseguenza trovi la coppia che fallisce prima che un lettore debba strizzare gli occhi.
- Nominare le variabili dal ruolo Scrivi quindi un nome come inchiostro di marca invece di blu settecento. Poiché un valore hex cambia e un ruolo non cambia, il nome sopravvive a un restyling.
- Controllare la serie in scala di grigi Infine togli la tinta e guarda ancora. Se la pagina si legge ancora con chiarezza, la palette porta una gerarchia vera invece di un trucco di colore.
Sei modi in cui una palette generata va storta
Ognuno di questi errori è bello sulla ruota e fa male sulla pagina.
Usare la coppia complementare per il testo normale
Attenzione qui. Poiché due tinte opposte vibrano dove si incontrano, il testo piccolo su quella coppia stanca l’occhio. Usa invece la coppia per un pulsante o per un titolo.
Credere che la ruota conosca il tuo marchio
Una rotazione dà armonia più che senso. Quindi una triadica corretta può ancora essere sbagliata per una banca, perché la ruota non sa leggere il tuo brief.
Lasciare che la tinta porti tutto il messaggio
Circa un uomo su dodici legge il rosso e il verde in modo diverso. Quindi non lasciare mai che la sola tinta segni un errore o un successo. La forma, la parola o la posizione devono ripetere il messaggio.
Dimenticare il tema scuro
Una serie che funziona sul bianco può crollare sul quasi nero. Quindi la tabella del contrasto elenca una lettura contro entrambi, invece di quella che hai controllato per caso.
Lasciare che la palette superi cinque colori
Ogni colore in più aggiunge una decisione a ogni schermata. Poiché un lettore ne tiene in mente circa cinque alla volta, uno schema di dieci colori diventa rumore.
Incollare i codici hex in un foglio di stile a mano
Copia invece le variabili. Una cifra digitata male dà un colore che sembra quasi giusto. È più difficile da trovare di un colore palesemente sbagliato.
Domande sul generatore di palette colori
Questo generatore di palette colori è gratis?
Sì. Non ci sono account, limiti né piano a pagamento. Quindi costruisci tutte le palette che vuoi.
Il mio colore viene inviato da qualche parte?
No. Poiché la ruota e il campionatore girano entrambi nel browser, il colore di base non lascia mai la tua macchina. Quindi un colore di marca ancora riservato resta privato.
Posso partire da un solo colore?
Sì. Basta un codice hex. Poi tutte e sei le armonie si costruiscono intorno a lui. Il colore di base resta lo stesso in ogni serie.
Sa leggere un colore da un’immagine?
Sì. Trascina una foto, un logo o uno screenshot, e il campionatore restituisce le tinte che coprono più pixel. Poiché la lettura gira su un canvas nella tua scheda, il file non viene mai caricato.
Quali armonie costruisce?
Sei. Complementare, analoga, triadica, complementare divisa, tetradica e monocromatica. Ognuna tiene il colore di base e ruota la tinta di un angolo fisso.
Controlla il contrasto?
Sì. Ogni coppia testo su sfondo riceve un rapporto e un verdetto per il testo normale e per il testo grande. Quindi una palette che sembra giusta e si legge male salta fuori qui.
Quali formati posso esportare?
Cinque. I codici hex semplici, le proprietà personalizzate CSS, un blocco tema Tailwind, le variabili SCSS e un file JSON. Inoltre il pulsante di copia mette ognuno di questi negli appunti con un clic.
Posso incollare una palette che ho già?
Sì. Incolla i codici hex e la pagina nomina l’armonia che si adatta meglio. Serve quando erediti un progetto e vuoi estenderlo senza uno stacco visibile.
Un’armonia generata è accessibile?
Armonia e accessibilità rispondono a due domande diverse. Una coppia complementare può fallire il contrasto, e una serie monocromatica può passarlo. Quindi leggi la tabella del contrasto invece della ruota.
Quali sono le soglie di contrasto WCAG?
La tabella nomina due soglie: 4,5 a 1 per il testo normale e 3 a 1 per il testo grande. Tutto ciò che sta sotto la sua soglia fallisce, e la riga lo dice a parole.
Funziona su un telefono?
Sì. La ruota si restringe, i campioni vanno a capo e i pulsanti di copia stanno sotto l’output. Quindi una palette funziona da un telefono quando sei lontano dalla scrivania.
Posso usare la palette per scopi commerciali?
Sì. I valori di colore non portano alcuna licenza. Quindi i codici hex sono tuoi, e qui nulla chiede un credito.
Servono un account o un’estensione?
No. La pagina gira da sola, senza registrazione e senza installazione. Quindi chiudi la scheda quando la palette è pronta.
Che cos’è un generatore di palette colori?
È una pagina che trasforma un colore in una famiglia di colori che gli si accordano. In breve, la ruota fa l’aritmetica e tu tieni i codici.
Che cos’è un colore complementare?
Il colore opposto al tuo sulla ruota, quindi a mezzo giro. Poiché i due sono i più lontani, una coppia complementare si legge forte. Va bene per un pulsante, e raramente per una pagina.
Come sceglie un angolo la ruota?
Ogni armonia porta un insieme fisso di rotazioni. Prima la ruota legge la tua tinta di base, poi avanza di quegli angoli e legge di nuovo. Quindi una triadica cade sempre a 120 gradi di distanza.
Posso inserire un colore con il suo nome?
Sì. Nomi come teal, corallo o blu notte sono accettati accanto al codice hex. Quindi puoi partire dalla parola del brief invece che da un codice che hai cercato.
Che cos’è uno schema di colori triadico?
Tre colori distribuiti in modo uguale sulla ruota, quindi a 120 gradi di distanza. Poiché i tre sono equidistanti, una triadica si legge equilibrata. Chiede anche che uno dei tre guidi, altrimenti l’occhio non sa dove posarsi.
Che cos’è uno schema complementare diviso?
Una relazione più morbida fra un colore e le due vicine del suo opposto. Quindi tieni il contrasto senza lo strillo. Allo stesso tempo la coppia sta a 150 gradi invece che a 180.
Quanti colori contiene ogni serie?
Da tre a cinque, secondo l’armonia. Poiché ogni serie tiene il colore di base, un campione resta fermo e gli altri ruotano.
Che differenza c’è fra schema di colori e palette?
Uno schema è la relazione, e una palette è la lista di codici che ne esce. In questo modo la ruota sceglie lo schema e l’export ti consegna la palette.
Quale modello di colore usa la ruota?
Tinta, saturazione e luminosità. Un angolo è facile da immaginare su un cerchio. Quindi la ruota ruota la tinta. Lascia stare le altre due finché un passo non le chiede.
Che cosa mostra la lettura dell’angolo?
La rotazione che ogni campione ha preso dal tuo colore di base. Per esempio più 180 per una coppia complementare. Quindi vedi perché due serie differiscono invece di indovinarlo.
Posso usare una palette come variabili CSS?
Sì. La scheda CSS scrive proprietà personalizzate, una per campione. Poi incolla il blocco in un foglio di stile e ogni campione diventa un nome invece di un codice.
Un’armonia garantisce un buon design?
No. Un’armonia promette solo che le tinte sono legate. Il contrasto, la proporzione e il senso decidono ancora se la pagina funziona. Quindi controlla la tabella prima di approvare.
Posso scaricare la palette invece di copiarla?
Sì. Il pulsante di download salva il formato corrente in un file. Quindi una palette può viaggiare verso un collega o in un repository senza copia e incolla.
Serve una connessione veloce?
No. Una volta caricata la pagina, la ruota e il campionatore girano nella tua scheda. Quindi una linea lenta rallenta il primo caricamento e nulla dopo.
Gli strumenti che vanno con questo
Quattro pagine verso cui porta spesso lo stesso lavoro.
Poi leggi un campione in tutti i formati insieme. Un foglio di stile, una chiamata canvas e un token di progetto vogliono ognuno una scrittura diversa. Quindi il selettore li mostra fianco a fianco.
Apri lo strumento →Prima di campionare un logo, cambia qui il suo formato. Un file più piccolo cade più in fretta nel campionatore. Uno sfondo piatto si legge più pulito di uno compresso.
Apri lo strumento →Per un logo disegnato in vettoriale, questo toglie prima i metadati dell’editor. Quindi l’illustrazione e la palette restano insieme in un solo file piccolo.
Apri lo strumento →Una volta che le variabili sono arrivate in un foglio di stile, riduci il file che parte. Allora l’intera palette costa qualche byte invece di qualche kilobyte.
Apri lo strumento →
Costruisci una palette da una sola tinta
Scegli il colore di base. Leggi le sei armonie. Controlla la tabella del contrasto e prendi il formato che ti serve. Niente esce dal browser. Quindi un colore di marca ancora riservato resta tuo.