Color Palette Generator

Genera palette colori armoniose - complementari, analoghe, triadiche, monocromatiche.

Configurazione

Colore base

#58A6FF

Regola armonica

Formato export

Tinte del colore base

Palette - analogous

#57FFB0rgb(87, 255, 176)hsl(152, 100%, 67%)
#57F9FFrgb(87, 249, 255)hsl(182, 100%, 67%)
#57A5FFrgb(87, 165, 255)hsl(212, 100%, 67%)
#5C57FFrgb(92, 87, 255)hsl(242, 100%, 67%)
#B057FFrgb(176, 87, 255)hsl(272, 100%, 67%)

Codice Export

:root {
  --color-1: #57ffb0;
  --color-2: #57f9ff;
  --color-3: #57a5ff;
  --color-4: #5c57ff;
  --color-5: #b057ff;
}

Contrast Checker WCAG

on
1:1Fail
on
2:1Fail
on
3.8:1AA Large
on
2.9:1Fail
on
2:1Fail
Tutti gli strumenti

Come utilizzare Color Palette Generator

Scegli il colore base

Seleziona un colore con il color picker, digita direttamente il codice HEX, oppure clicca "palette casuale" per generare un colore base con luminosità e saturazione bilanciate.

Seleziona la regola armonica

Scegli tra complementare, analoga, triadica, split-complementare, tetradica o monocromatica: ogni regola applica un diverso schema di rotazione della tonalità (hue) sulla ruota dei colori.

Controlla il contrasto WCAG

Il pannello "Contrast Checker" mostra automaticamente il rapporto di contrasto tra le coppie di colori della palette, con il livello WCAG raggiunto (AAA, AA, AA Large o Fail).

Esporta il codice pronto all'uso

Scegli il formato di export (CSS custom properties, SCSS variables o config Tailwind) e copia il codice generato direttamente nel tuo progetto.

Suggerimenti

  • Per interfacce testuali privilegia la regola monocromatica o complementare: sono più semplici da rendere accessibili rispetto a triadiche o tetradiche con troppe tonalità in contrasto tra loro.
  • Verifica sempre il contrast checker prima di usare due colori della palette insieme per testo su sfondo: un colore esteticamente gradevole non è automaticamente leggibile.

Domande frequenti

Che differenza c'è tra le regole armoniche disponibili?

Complementare usa colori opposti a 180 gradi per il massimo contrasto. Analoga usa colori vicini (entro 60 gradi) per un look armonioso. Triadica e tetradica distribuiscono i colori a 120 o 90 gradi per palette vivaci ma bilanciate. Monocromatica varia solo la luminosità mantenendo la stessa tonalità.

Cosa significano i livelli AAA, AA e AA Large nel contrast checker?

Sono le soglie WCAG 2.1 per l'accessibilità del testo: AAA richiede un rapporto di contrasto di almeno 7:1 (testo normale), AA richiede almeno 4.5:1, AA Large si applica al testo grande (18pt+) con soglia 3:1. "Fail" indica un contrasto insufficiente per la leggibilità.

Le tinte del colore base a cosa servono?

La sezione "Tinte del colore base" genera una scala di luminosità (dal 10% all'80%) dello stesso colore, utile per creare varianti hover, disabled, background o bordi mantenendo coerenza cromatica con il colore principale.

Posso usare l'export Tailwind direttamente nel mio progetto?

Sì, il formato Tailwind genera un blocco pronto da incollare nella sezione theme.extend.colors di tailwind.config.js, con nomi automatici palette-1, palette-2, ecc. che puoi rinominare secondo la convenzione del tuo design system.