Generatore di palette di colori

Scegli un colore di base e ti proponiamo colori che si abbinano secondo la teoria del colore, oltre a una scala completa di tonalità chiare e scure (da 50 a 950) da usare nel tuo sito o nella tua app.

Armonie di colore

Le armonie si basano sulla posizione dei colori nel cerchio cromatico. La complementare usa il colore opposto (180°) e offre il massimo contrasto; l'analoga i colori vicini (±30° e ±60°), tranquilli e naturali; la triadica tre colori a 120°; la complementare divisa i due vicini dell'opposto, più facile da bilanciare; e la tetradica quattro colori a 90°. La monocromatica mantiene la tonalità e varia la luminosità.

Un consiglio classico è la regola 60-30-10: un colore dominante nel 60% del design, uno secondario nel 30% e un colore d'accento nel restante 10%.

Scala di tonalità 50-950

I design system come Tailwind CSS, Material o Bootstrap usano per ogni colore una scala da 50 (quasi bianco) a 950 (quasi nero): le tonalità chiare per gli sfondi, quelle medie per pulsanti e link e quelle scure per testi e stati attivi.

Calcoliamo la palette nello spazio colore OKLCH, percettivamente uniforme: ruotando la tonalità o cambiando la luminosità, i colori mantengono la stessa chiarezza apparente, cosa che non succede con HSL (in HSL un giallo e un blu con la stessa «luminosità» appaiono molto diversi).