colorize
ColorKit
CK

Generatore di Tavolozze di Colori

Premi la barra spaziatrice per generare infinite combinazioni. Blocca i tuoi colori preferiti ed esplora schemi armonici.

#6A3B47

#8B4630

#89AEBD

#8A1717

#20938C

A cosa serve il Generatore di Tavolozze?

Genera istantaneamente combinazioni a 5 colori secondo la teoria del colore, aiutando designer e sviluppatori a definire identità cromatiche equilibrate per il web.

Come si usa

  • Genera: Premi la Barra spaziatrice o clicca su "Genera tavolozza".
  • Blocca: Clicca sull'icona del lucchetto per fissare i colori che preferisci.
  • Copia: Clicca sul codice HEX per copiarlo negli appunti.
Knowledge Base & FAQ

Domande Frequenti (FAQ)

Risposte dirette e soluzioni a dubbi comuni, sfide tecniche e standard di settore.

Che cos'è la regola 60-30-10 nella teoria del colore per il web design?expand_more
La regola 60-30-10 è un principio di proporzione per garantire equilibrio visivo:
  • 60% Colore dominante: Di norma lo sfondo neutro (bianco puro, ardesia o sfondo scuro).
  • 30% Colore secondario: Utilizzato per card, barre laterali e intestazioni per dare profondità.
  • 10% Colore d'accento: Una tonalità vivace ad alto contrasto riservata esclusivamente agli elementi di conversione: pulsanti CTA, badge di stato e link prioritari.
Come posso garantire che la tavolozza generata rispetti le norme di accessibilità?expand_more
Per rispettare i requisiti di accessibilità web (WCAG 2.1 AA):
  • Verifica che il testo posizionato su ogni sfondo raggiunga un rapporto di contrasto minimo di 4.5:1.
  • Non posizionare mai testo bianco su giallo puro (#FFFF00) o verde chiaro (rapporto inadeguato di appena 1.2:1).
  • Utilizza il nostro Verificatore di Contrasto WCAG prima di distribuire in produzione.
Come esportare la palette in Tailwind CSS o in variabili CSS native?expand_more
Puoi definire i campioni generati come variabili CSS nel foglio di stile globale: 
:root {
  --color-primary: #4F46E5;
  --color-secondary: #06B6D4;
  --color-accent: #F43F5E;
  --color-neutral: #1E293B;
  --color-surface: #F8FAFC;
}
Oppure dichiararli in tailwind.config.js sotto theme.extend.colors.
Qual è la differenza psicologica tra palette calde e fredde?expand_more
Le palette calde (rossi, arancioni, tonalità ambrate) suscitano passione, urgenza e dinamismo (food delivery, e-commerce). Le palette fredde (blu, azzurri, verdi profondi) trasmettono affidabilità, calma e sicurezza aziendale (fintech, software cloud, sanità).
Quanti colori deve comprendere un design system completo?expand_more
Un design system scalabile include generalmente:
  • 1 colore primario del brand (con scala tonale da 50 a 950).
  • 1 tonalità secondaria.
  • 1 colore d'accento ad alto impatto.
  • 1 scala di neutri (8-10 sfumature di grigio per sfondi, bordi e testi).
  • 4 colori semantici: Successo (verde), Avviso (ambra), Errore (rosso) e Info (blu).