Come si usa
- Inserisci un colore di base o scegline uno. “Nuovo colore di base casuale” ne seleziona uno per te.
- Scegli un'armonia. “Sfumature e tinte” crea una scala di 11 passaggi, dal più chiaro al più scuro.
- Blocca i colori che vuoi mantenere, poi continua a esplorare altre combinazioni.
- Scegli HEX, proprietà personalizzate CSS o JSON, imposta un nome e copia il codice.
Come funziona
Le armonie si ottengono ruotando la tonalità sulla ruota dei colori: la complementare aggiunge la tonalità opposta (180°), l'analoga aggiunge le tonalità vicine a 30° e 60° su ciascun lato, la triadica usa tre tonalità a 120° l'una dall'altra, la tetradica quattro tonalità a 90° l'una dall'altra e la complementare divisa le due tonalità vicine alla complementare (150° e 210°).
La rotazione avviene in OKLCH, non in HSL. OKLCH mantiene costante la luminosità percepita, così un giallo e un blu nella stessa palette appaiono altrettanto luminosi e il giallo non risulta abbagliante. Se un colore ruotato supera la gamma visualizzabile sugli schermi sRGB, la sua cromaticità viene ridotta finché rientra nella gamma, mantenendo invariati luminosità e tonalità.
La scala di sfumature e tinte usa passaggi di luminosità OKLCH fissi, etichettati da 50 a 950, con una nomenclatura simile a quella di Tailwind CSS. La cromaticità si riduce vicino al bianco e al nero, così le tinte più chiare non risultano fluorescenti. Le armonie sono un punto di partenza: prima di usarle nei contenuti, verifica il contrasto tra testo e sfondo con un verificatore di contrasto.
Esempi
Un colore di marca con un accento
Il colore di base #3366cc con “Complementare” aggiunge #8c6500, un ocra caldo con la stessa luminosità OKLCH. Le combinazioni di blu e giallo-arancio sono una scelta comune per gli accenti accanto a un colore di marca blu.
Token di design per una libreria di componenti
Scegli “Sfumature e tinte”, imposta il nome su “primary” ed esporta le variabili CSS. Otterrai da --primary-50 a --primary-950, pronte per sfondi (50–100), bordi (200–300) e testo (700–900).
Esplora nuove combinazioni senza cambiare un colore
Blocca il secondo colore di una palette triadica, poi prova colori di base diversi. Il campione bloccato mantiene il suo valore HEX mentre gli altri cambiano.
Domande frequenti
Perché i miei colori sono diversi da quelli di uno strumento basato sulla ruota HSL?
Questo strumento ruota la tonalità in OKLCH, uno spazio colore percettivo. I suoi angoli di tonalità non corrispondono esattamente a quelli di HSL, quindi il colore “opposto” potrebbe essere leggermente diverso da quello restituito da uno strumento basato su HSL.
Posso usare il JSON in Tailwind CSS?
Il JSON associa i nomi ai valori HEX, nello stesso formato che Tailwind accetta per i colori nella configurazione del tema. Con Tailwind 4 puoi anche incollare le variabili CSS in un blocco @theme dopo averle rinominate in --color-…
Le palette generate sono accessibili?
Non automaticamente. Un'armonia non garantisce il contrasto tra testo e sfondo. Verifica ogni combinazione che intendi usare con il verificatore di contrasto.
Privacy
Le palette vengono generate nel browser. I tuoi colori non vengono inviati né salvati.