Readdy logo

Generatore di palette HEX

Parti da un colore HEX e genera una palette completa con scala tonale, armonie, token semantici e variabili CSS pronte da copiare.

Colore base (HEX)
Supporta #RGB o #RRGGBB, ad esempio #0EA5E9

Preset rapidi

Panoramica palette
Scopri le relazioni del colore base e crea prima un sistema coerente.

Colore base (HEX)

#2563EB

Tonalità: 221Saturazione: 83%Luminosità: 53%

Armonie cromatiche

Analogo A
#45C7E4
Analogo B
#6345E4
Complementare
#E6AB2A
Triadico A
#E2386D
Triadico B
#6DE238
Scala tonale (50-900)
Tonalità dal chiaro allo scuro per sfondi, bordi, stati e contrasto del testo.
50
#F4F6FB
100
#D1DBF1
200
#ABBFEB
300
#82A2E7
400
#5583E8
500
#2563EB
600
#124BC7
700
#0D3794
800
#082462
900
#04112F
Token semantici
Usa questi ruoli nella UI per mantenere coerenti prodotto e brand.
Primario

Primario

Colore principale del brand e delle CTA

#2563EB
Secondario

Secondario

Colore di supporto del brand

#6C59D5
Accento

Accento

Elementi in forte contrasto

#E3AA2D
Sfondo

Sfondo

Tonalità di sfondo della pagina

#F7F7F8
Superficie

Superficie

Schede e contenitori

#E8E9EE
Testo

Testo

Colore predefinito del testo

#1B212C
Variabili CSS
Copia e incolla nel foglio di stile.
:root {
  --color-primary: #2563EB;
  --color-secondary: #6C59D5;
  --color-accent: #E3AA2D;
  --color-background: #F7F7F8;
  --color-surface: #E8E9EE;
  --color-text: #1B212C;
  --color-primary-50: #F4F6FB;
  --color-primary-100: #D1DBF1;
  --color-primary-200: #ABBFEB;
  --color-primary-300: #82A2E7;
  --color-primary-400: #5583E8;
  --color-primary-500: #2563EB;
  --color-primary-600: #124BC7;
  --color-primary-700: #0D3794;
  --color-primary-800: #082462;
  --color-primary-900: #04112F;
}

Come creare un sistema colore da un codice HEX

Inserisci, seleziona o genera un colore e ottieni subito armonie, scale tonali, token semantici e variabili CSS.

1

Passaggio 1: scegli un colore base

Inserisci un HEX, usa il selettore o fai clic su "Colore casuale".

2

Passaggio 2: guarda la palette

Visualizza il colore base e le armonie generate automaticamente.

3

Passaggio 3: esplora scala e token

Valuta tonalità 50-900 per sfondi, bordi, stati e contrasto, più token semantici per l'interfaccia.

4

Passaggio 4: copia variabili o token

Copiali con un clic e incollali nel foglio di stile.

Palette strutturate per progetti reali

Non semplici campioni: crea palette strutturate e pronte per interfacce, design system e branding.

  • Generazione basata sulle armonie

    Genera automaticamente colori complementari con equilibrio e contrasto.

  • Scala tonale (50-900)

    Tonalità dal chiaro allo scuro per livelli, stati, sfondi e contrasto leggibile.

  • Token semantici per un'interfaccia coerente

    Ruoli predefiniti mantengono coerenza tra azioni, successi, avvisi ed elementi neutri.

  • Variabili CSS pronte da copiare

    Esporta l'intera palette come variabili CSS con un clic.

Domande frequenti

Crea una palette completa da un solo HEX, incluse variazioni tonali e armonie.
Sì. Inserisci un HEX valido, selezionalo o generane uno casuale.
La scala 50-900 offre tonalità per sfondi, bordi, hover e contrasto accessibile.
Copiale nel file CSS o nella configurazione del design system.

Crea una palette scalabile in pochi secondi