Il tuo laboratorio del colore

Un colore.La tua prossima palette.

Trova colori che funzionano insieme. Guardali in azione, verifica il contrasto e falli tuoi.

Parti da un colore

Tipo di armonia

Preset e colori recenti

Gratuito. Tutto nel tuo browser. Palette pronte all’uso

Questo strumento funziona interamente nel browser, quindi richiede JavaScript. Attivalo per generare palette, controllare il contrasto WCAG ed esportare i token. In ogni caso nulla viene inviato a un server.

Palette generata

Clicca un colore per copiare il valore HEX. La scala di tonalità è utile per pulsanti, stati, card e superfici UI.

Le palette salvate restano su questo dispositivo.

Aspetto della palette

Sfondo del canvasAffianca i campioni senza spazi

Cambia solo la visualizzazione. Colori ed esportazioni restano uguali.

Rendi tua questa palette

Blocca i colori da mantenere. Modifica o riordina gli altri. Spazio rigenera quando la palette è visibile; scrittura e pulsanti con focus mantengono il comportamento normale.

Colori e ordine vengono inclusi quando copi il link di condivisione.

shadcn/ui Tailwind v4 · v3

Scala tonalità

Gestione colore delle scale

La riduzione chroma conserva luminosità e tonalità previste prima di arrotondare in HEX. Originale mantiene palette e link precedenti.

Palette pronte all’uso

Scegli un esempio per aprire tutti i suoi colori nel generatore. Modifica, confronta e salva la tua versione.

Dashboard

Dashboard chiara7 coloriApri palette Dashboard scura7 coloriApri palette Grafici categorici7 coloriApri palette

Pastello

Pesca e lavanda6 coloriApri palette Giardino delicato6 coloriApri palette Cielo e rosa6 coloriApri palette

Toni di blu

Blu per prodotti digitali5 coloriApri palette Blu navy e sabbia5 coloriApri palette Blu notturno5 coloriApri palette

Sono punti di partenza. Controlla le coppie reali di testo e sfondo prima di usarle.

Ispettore colore

Visualizza il colore base nei formati pratici. Copia HEX, RGB, HSL e OKLCH per implementazione e documentazione.

#E24B4A

Componi la trasparenza

Incolla RGBA, HSLA, OKLCH con alpha o HEX con alpha. Scegli uno sfondo uniforme e applica al tool il colore opaco risultante.

Colore con trasparenzaSfondo uniforme

HEX opaco risultante

Anteprima visione colore

Simulazioni approssimative per comuni deficit di visione dei colori. Sono anteprime per controlli di design, non diagnosi mediche.

Controllo contrasto WCAG

AA richiede 4.5:1 per testo normale e 3:1 per testo grande. AAA richiede 7:1.

Controllo manuale

TestoHEXSfondoHEX

Rapporto

Testo di interfaccia leggibile

Correggi il contrasto

ModificaObiettivo

La proposta modifica la luminosità e riduce la chroma se necessario. La coppia HEX finale è verificata senza arrotondare il rapporto. Controlla aspetto e dimensione del testo.

Migliori combinazioni

Controlli automatici su bianco, nero e colori della palette.

Matrice contrasti delle tonalità · 13 × 13

Le righe sono sfondi, le colonne testo. Include undici tonalità, bianco e nero. Usa le frecce nella matrice e seleziona una coppia per esaminarla.

Dimensione testo

Seleziona una coppia per leggere il rapporto e usarla nel controllo manuale.

AA: 4,5:1 normale / 3:1 grande. AAA: 7:1 normale / 4,5:1 grande. Le valutazioni valgono per questa coppia e dimensione del testo.

Esporta token

Copia variabili CSS, configurazione Tailwind, SCSS, token JSON e card palette SVG/PNG scaricabili.

Versione Tailwind

Tailwind v4: scale primary, secondary e neutral dai primi due colori della palette. Tailwind v3: scala primary e accento.

Formato JSON

Genera token semantici chiari/scuri dai primi due colori della palette. Mantieni gli import del framework già presenti.

Notazione colore

Scarica card palette

Esporta una card palette 1200x630 condivisibile come PNG o SVG. Utile per documentazione, anteprime social e brand board.

Generata localmente nel browser.

Anteprima della scheda della palette attuale — La stessa scheda che scarichi in PNG o SVG · 1200 × 630

Estrai colori da immagine

Trascina un PNG, JPG o WebP. L'immagine viene elaborata localmente nel browser.

Generatore gradiente

Crea gradienti CSS dalla palette corrente.

Angolo 135°

Anteprima UI

Un piccolo mockup di interfaccia per verificare che la palette funzioni anche in un contesto reale.

Checklist produzione

Una checklist breve per usare la palette in un sito reale.

Usa la tonalità contrassegnata Originale come colore brand. Il suo livello dipende dal colore inserito; scegli hover e stati attivi verificando il contrasto, senza assumere 500/600/700.
Usa le tonalità 50/100 per le superfici, non colori saturi dietro ai paragrafi.
Controlla il testo corpo con rapporto minimo 4.5:1 prima della pubblicazione.
Testa gli stati UI importanti: hover, disabilitato, successo, avviso ed errore.
Mantieni un solo accento forte per conservare coerenza visiva.

Strumenti e guide colore

Pagine dedicate per contrasto, palette Tailwind, variabili CSS, estrazione immagini e gradienti.

Controllo contrasto WCAGVerifica se testo e sfondo rispettano i rapporti di contrasto WCAG AA e AAA.Generatore colori TailwindCrea una scala Tailwind 50-950 da un colore brand.Generatore variabili colore CSSGenera custom properties CSS e design token da una palette colori.Estrattore colori da immagineEstrai i colori dominanti dalle immagini localmente nel browser.Generatore gradienti CSSCrea gradienti CSS lineari, radiali e conici da una palette.Palette colori accessibileProgetta palette che mantengono il testo leggibile e compatibile con WCAG.Generatore palette colori brandCrea una palette brand da un logo o colore primario ed esporta variabili CSS e design token pronti per UI.Generatore palette colori graficiGenera colori distinti per grafici dashboard e data visualization, poi controlla contrasto e rischio daltonismo.Simulatore daltonismo coloriAnteprima palette per deuteranopia, protanopia e tritanopia per trovare combinazioni rischiose prima del rilascio.Convertitore colori HEX, RGB, HSL e OKLCHConverti colori tra HEX, RGB, HSL e OKLCH e copia valori pronti per CSS e documentazione design.Generatore armonia coloriGenera armonie complementari, analoghe, triadiche, split-complementary, tetradiche e monocromatiche.Generatore di palette coloriGenera palette armoniche da un colore base usando regole complementari, analoghe, triadiche e monocromatiche.Generatore sfumature coloreGenera una scala 50-950 da un colore base per superfici UI, bordi, hover e dark mode.Generatore palette dark modeCrea palette dark mode con foreground leggibili, superfici muted, bordi e accenti accessibili.Generatore design tokenCrea design token colore da una palette ed esporta CSS variables, SCSS map, JSON e valori Tailwind.Generatore tema shadcnMappa una palette su variabili CSS stile shadcn per background, foreground, primary, muted, accent e destructive.Generatore schema colori sito webCrea uno schema colori per sito web con colori primari, neutri e accenti per hero, bottoni, card e form.

Come creare una palette accessibile

Parti da un colore brand, scegli un'armonia, verifica il contrasto del testo ed esporta i token.

Complementare o analoga?

La palette complementare usa colori opposti sulla ruota e dà contrasto forte. L'analoga usa tinte vicine e risulta più morbida, adatta a interfacce dense.

Perché conta il contrasto?

Il testo a basso contrasto sta bene nei mockup e diventa illeggibile sullo schermo di chi lo usa davvero. Per il testo di lettura punta almeno a WCAG AA, cioè 4,5:1.

Funziona con Tailwind?

Sì. L'export Tailwind genera la scala del colore primario da 50 a 950, più il colore accento quando c'è.

Le immagini vengono caricate?

No. L'estrazione dei colori usa canvas nel tuo browser. Nessun file esce dal dispositivo.