HedgieTools

Generatore di palette

Parti dal tuo colore principale e ottieni una palette completa per l’interfaccia: secondario, terziario, successo, avviso, pericolo e neutri, con le loro sfumature e i controlli di contrasto.

Il tuo colore principale

Digita un valore o scegli un colore: il resto della palette si costruisce attorno a questo.

Secondario e terziario
Formato del valore

Digita un valore HEX, ad esempio #2563EB, oppure clicca sul quadrato per scegliere il colore.

La tua palette

Per copiare un valore o una sfumatura (da 50 a 950), cliccaci sopra. La matita sostituisce un colore suggerito con il tuo: resta fisso quando cambi il colore principale.

  • —

    Primario

    il tuo colore
  • —

    Secondario

    complementare
  • —

    Terziario

    quasi complementare
  • —

    Info

    blu
  • —

    Successo

    verde
  • —

    Attenzione

    arancione
  • —

    Pericolo

    rosso
  • —

    Neutro

    grigio colorato

Token per tema chiaro e scuro

I colori funzionali della tua interfaccia, pronti per il tema chiaro e per quello scuro. Ognuno rimanda a una sfumatura della palette. Clicca per copiare.

  • --backgroundSfondo della pagina
  • --surfaceSchede e pannelli
  • --surface-mutedAree secondarie
  • --borderBordi e separatori
  • --textTesto principale
  • --text-mutedTesto secondario
  • --primaryPulsanti e link
  • --primary-hoverAl passaggio del mouse
  • --on-primaryTesto sul primario
  • --focus-ringContorno del focus
  • --secondaryAccento secondario
  • --tertiaryAccento terziario
  • --infoInformazioni
  • --info-softSfondo informativo
  • --successSuccesso
  • --success-softSfondo di successo
  • --warningAttenzione
  • --warning-softSfondo di avviso
  • --dangerPericolo, errore
  • --danger-softSfondo di errore

Colori abbinati

Le armonie classiche attorno al tuo colore principale, per illustrazioni, grafici o accenti.

  • Complementare

    il colore opposto

  • Complementare diviso

    più morbido dell’opposto

  • Analogo

    i colori vicini

  • Triade

    tre colori in equilibrio

  • Tetrade

    quattro colori a quadrato

  • Monocromatico

    una sola tinta, più intensità

Anteprima e contrasto

La palette applicata ad alcuni elementi dell’interfaccia, e la leggibilità di ogni abbinamento secondo le regole WCAG.

Tema dell’anteprima
Titolo della paginaTesto secondario, meno importante, sotto il titolo.
Una scheda con un link e dei pulsanti.
PrimarioSecondarioTerziario
Info · È disponibile un aggiornamento.
Successo · Le modifiche sono state salvate.
Attenzione · Il tuo abbonamento scade a breve.
Errore · Il pagamento non è andato a buon fine.
  • Testo sullo sfondo
    Rapporto—Testo normale—Testo grande—AAA—
  • Testo secondario sullo sfondo
    Rapporto—Testo normale—Testo grande—AAA—
  • Link sullo sfondo
    Rapporto—Testo normale—Testo grande—AAA—
  • Pulsante primario
    Rapporto—Testo normale—Testo grande—AAA—
  • Pulsante secondario
    Rapporto—Testo normale—Testo grande—AAA—
  • Testo terziario sullo sfondo
    Rapporto—Testo normale—Testo grande—AAA—
  • Messaggio informativo
    Rapporto—Testo normale—Testo grande—AAA—
  • Messaggio di successo
    Rapporto—Testo normale—Testo grande—AAA—
  • Messaggio di avviso
    Rapporto—Testo normale—Testo grande—AAA—
  • Messaggio di pericolo
    Rapporto—Testo normale—Testo grande—AAA—

Esporta

Ottieni la palette nel formato scelto sopra (HEX).

Inserisci un colore principale per generare il codice.

Variabili CSS per la palette (--color-primary-500…). I token rimandano a queste variabili; attiva il tema scuro con data-theme="dark" sull’elemento html.

Informazioni sul generatore di palette

Scegli il colore principale del tuo brand e ottieni tutto ciò che serve a un’interfaccia: colori abbinati, colori di stato, neutri, sfumature, token per tema chiaro e scuro, controlli di contrasto e codice da incollare, il tutto senza uscire dal browser.

Una palette completa da un solo colore

Lo strumento ricava dal tuo colore principale un colore secondario e uno terziario, i colori di stato (info, successo, avviso, pericolo) in linea con il suo stile, e grigi leggermente colorati per sfondi e testi.

Sfumature pronte all’uso

Ogni colore è disponibile in undici sfumature, dalla più chiara (50) alla più scura (950), per sfondi, bordi, effetti al passaggio del mouse e testi. Se un colore suggerito non ti convince, sostituiscilo con il tuo: le sue sfumature si adeguano.

Token per tema chiaro e scuro

Sfondo, superficie, bordo, testo, passaggio del mouse, focus e sfondi dei messaggi: ogni colore funzionale rimanda a una sfumatura della palette, con un valore per il tema chiaro e uno per il tema scuro.

Contrasto verificato

Ogni abbinamento di testo e sfondo viene valutato secondo le regole WCAG: 4,5:1 per il testo normale, 3:1 per il testo grande e 7:1 per il livello AAA.

Esporta in CSS, Tailwind, JSON

Copia ogni valore in HEX, RGB, HSL o OKLCH, oppure scarica un file di variabili CSS, un tema Tailwind v4, una configurazione Tailwind v3, un file JSON o un semplice elenco. Tutto avviene nel tuo browser: nulla viene inviato o salvato.

Strumenti correlati