Generatore di palette di colori

Come usare il generatore di palette di colori

1. Scegli un Colore di base con il campione colore oppure scrivi un codice qualsiasi in Codice del colore di base (#4F46E5, rgb(79 70 229), hsl(243 75% 59%), un nome CSS…).
2. Scegli un’Armonia: Complementare, Analoga, Triadica, Complementare divisa, Tetradica (rettangolo), Quadrata o Monocromatica.
3. Scegli la Ruota dei colori: HSL (classica) o OKLCH (percettiva). La palette si aggiorna a ogni modifica; anche Genera palette la rigenera.
4. Copia un singolo colore con il pulsante Copia sotto il suo campione, oppure scegli un formato in Esporta come (Elenco HEX, Variabili CSS, Variabili SCSS, Array JSON o Colori Tailwind) e usa Copia o Scarica per l’intera palette.

Ogni campione mostra il suo codice HEX in nero o in bianco, a seconda di quale contrasta meglio, e la sua posizione rispetto al colore di base (per esempio +120°).

Le armonie di colore

Le armonie di colore sono angoli fissi sulla ruota dei colori. Partendo dalla tonalità di base, lo strumento ruota la tonalità e mantiene la saturazione e la luminosità del colore di partenza.

• Complementare (0°, 180°): il colore opposto. Massimo contrasto, ottimo per un pulsante di invito all’azione accanto al colore principale del brand.
• Analoga (−60°, −30°, 0°, +30°, +60°): i vicini sulla ruota. Combinazioni calme e naturali, perfette per sfondi e illustrazioni.
• Triadica (0°, 120°, 240°): tre tonalità equidistanti. Vivace ed equilibrata; di solito un colore domina e gli altri due fanno da accento.
• Complementare divisa (0°, 150°, 210°): i due vicini del complementare. Contrasto forte ma con meno tensione di una coppia complementare pura.
• Tetradica (rettangolo) (0°, 60°, 180°, 240°): due coppie complementari. Palette ricche che richiedono un colore dominante per restare coerenti.
• Quadrata (0°, 90°, 180°, 270°): quattro tonalità equidistanti.
• Monocromatica: una sola tonalità in cinque gradi di luminosità, dal scuro al chiaro. Ideale per gli stati dell’interfaccia, i grafici e i design sobri.

Ruota HSL o OKLCH?

La ruota HSL (classica) è quella tradizionale, usata dalla maggior parte dei software di grafica e dei tutorial. Il suo limite è che ad angoli uguali non corrisponde una luminosità percepita uguale: il giallo a 60° sembra molto più chiaro del blu a 240° con la stessa luminosità HSL.

La ruota OKLCH (percettiva) ruota la tonalità nel modello di colore Oklab, progettato perché la luminosità appaia costante. Le palette costruite così hanno colori di peso visivo simile, il che aiuta a ottenere un contrasto accessibile. Alcuni colori ruotati possono uscire da ciò che uno schermo è in grado di mostrare; in quel caso lo strumento ne riduce leggermente la crominanza per renderli visualizzabili.

Usare la palette esportata

Variabili CSS produce un blocco :root con --color-1, --color-2… da incollare in un foglio di stile. Variabili SCSS genera righe $color-1: …;, Array JSON un elenco di stringhe HEX per gli script e Colori Tailwind un oggetto colors con chiavi 100, 200, 300… da incollare nella configurazione di Tailwind.

Prima di pubblicare, controlla il contrasto del testo: un’armonia garantisce tonalità piacevoli, non un testo leggibile. Usa neutri scuri o chiari per il testo corrente e riserva i colori saturi della palette ad accenti, pulsanti e grafica.