Come usare Palette colori e contrasto
- 1
Parti da un colore
Scrivi o scegli un Colore di base, poi seleziona un'armonia come analoga, triade o complementare divisa – oppure genera una palette casuale.
- 2
Blocca e perfeziona
Blocca i campioni che ti piacciono prima di generarne altri, modifica direttamente ogni campione oppure estrai i cinque colori dominanti da una foto.
- 3
Verifica la leggibilità
Apri Contrasto per testare testo e sfondo secondo WCAG 2.2 AA e AAA, applica una correzione suggerita e controlla la palette con la simulazione del daltonismo.
- 4
Esporta
Copia variabili CSS, un tema Tailwind v4 o una configurazione v3, SCSS o JSON con sfumature 50–950, oppure scarica i campioni PNG.
Limiti e Pro
Tutto è gratuito: palette di 5 colori, 6 armonie, generazioni ed esportazioni illimitate, immagini fino a 50 MB per l'estrazione dei colori, campioni PNG larghi 1600 pixel.
Informazioni su Palette colori e contrasto
Il generatore di palette crea uno schema di cinque colori e tutto ciò che serve a un design system intorno a esso. Le armonie ruotano la tonalità di base sul cerchio cromatico HSL: l'analoga si sposta di 30° per lato, la complementare aggiunge la tonalità opposta, la complementare divisa prende le due tonalità accanto all'opposta, la triade distanzia tre tonalità di 120°, la tetrade usa un quadrato a 90° e la monocromatica mantiene una sola tonalità in cinque livelli di luminosità. La modalità casuale rispetta i campioni bloccati, mentre l'opzione da immagine raggruppa i pixel di una foto in OKLab per trovare i suoi cinque colori distinti più frequenti.
Per ogni colore la scheda Sfumature produce una scala di 11 gradini 50–950 in OKLCH, dove il gradino più vicino al tuo colore ha il valore esatto, oppure i 13 toni del sistema HCT di Material 3 insieme alle cinque palette chiave che un tema Material ricaverebbe. Il verificatore di contrasto usa la formula di luminanza di WCAG 2.2, non arrotonda mai un rapporto per eccesso e suggerisce il colore conforme più vicino cambiando solo la luminosità e mantenendo la tonalità. Una griglia mostra il rapporto di ogni coppia della palette rispetto a bianco e nero.
Le simulazioni coprono protanopia, deuteranopia, tritanopia e acromatopsia con le matrici di Machado e segnalano i campioni che si confondono tra loro. Le esportazioni assegnano ai colori nomi basati sulla tonalità e accettano nomi personalizzati. Lo strumento non valuta se i colori si adattino a un brand e le simulazioni approssimano il modo in cui vedono le persone con deficit della visione dei colori: non sostituiscono i test con loro.
Privacy
Tutti i calcoli sui colori, le verifiche di contrasto e l'analisi delle immagini avvengono in questa scheda: una foto usata per ricavare i colori viene letta dal tuo disco in un piccolo canvas e non viene mai caricata. La palette può essere salvata nell'indirizzo della pagina, così un link copiato la riapre; sul server non viene salvato nulla.
Funzionalità
Sei armonie e colori da immagine
Da analoga a tetrade partendo da un colore, generazioni casuali con blocchi o i colori dominanti di una foto.
Contrasto WCAG 2.2 con correzioni
AA e AAA per testo normale e grande e per gli elementi grafici dell'interfaccia, con il colore conforme più vicino a un clic.
Esportazioni pronte per sviluppatori
Variabili CSS, Tailwind v4 e v3, SCSS e JSON in HEX, RGB, HSL o OKLCH, più campioni PNG.