Generatore di sfumature di colore
Trasforma un colore HEX di base in una scala OKLCH, HSL o RGB con livelli regolabili, suggerimenti di contrasto WCAG per livello ed esportazione in CSS, Tailwind e JSON.
Generatore di sfumature di colore — Inserisci un singolo colore di base in HEX e crea all'istante una scala completa con un'interpolazione percettivamente uniforme in OKLCH o HSL — tonalità stabile con luminosità distribuita in modo uniforme — oppure con la classica miscelazione lineare RGB, con il numero di livelli che preferisci. Regola tonalità e saturazione, leggi per ogni livello un suggerimento di contrasto WCAG che indica quali tonalità restano leggibili come testo su bianco e su nero, e copia l'intera scala come proprietà personalizzate CSS, una configurazione di colore Tailwind o JSON. Tutto viene eseguito interamente nel tuo browser; nessun colore viene mai inviato a un server.
Cos'è Generatore di sfumature di colore?
Il Generatore di sfumature di colore trasforma un colore HEX di base in una scala completa di tinte e sfumature pronta per un design system. Invece di miscelare solo in modo lineare in RGB, può interpolare in OKLCH o HSL così la tonalità resta stabile e la luminosità è distribuita in modo uniforme, dando una scala percettivamente equilibrata senza livelli spenti o slavati. Scegli quanti livelli produce — da 2 a 24, o un elenco personalizzato di etichette separate da virgola —, sposti la tonalità o scali la saturazione e leggi per ogni livello un suggerimento di contrasto WCAG che mostra quali tonalità funzionano come testo su bianco e su nero. La scala finita si copia come proprietà personalizzate CSS, un oggetto di configurazione colore Tailwind o JSON con un clic.
Come usare Generatore di sfumature di colore
- Digita un colore di base nel campo Colore di base (HEX) in formato #rrggbb o #rgb, oppure fai clic sul campione grande per sceglierlo visivamente.
- Scegli uno spazio colore: OKLCH o HSL per una scala percettivamente uniforme a tonalità stabile, oppure RGB per la classica miscelazione lineare.
- Imposta quanti livelli vuoi (2–24), oppure apri le Impostazioni per inserire un elenco di livelli personalizzato separato da virgola, spostare la tonalità, scalare la saturazione e definire il nome di colore dell'esportazione.
- Leggi le due celle di contrasto di ogni riga — la lettera A su bianco e su nero —, evidenziate quando quella tonalità raggiunge il WCAG AA per il testo.
- Copia l'HEX di un singolo livello, o copia l'intera scala come variabili CSS, una config Tailwind o JSON con i pulsanti di copia.
Esempi
Scala OKLCH uniforme da un blu del brand
Scegli OKLCH e mantieni 11 livelli: la scala 50–950 distribuisce la luminosità in modo uniforme mantenendo la tonalità blu, così nessun livello appare spento o slavato come può capitare con la miscelazione lineare RGB.
Config Tailwind personalizzata a cinque livelli
Inserisci 100, 300, 500, 700, 900 come elenco di livelli personalizzato per emettere solo cinque campioni, poi copiali come oggetto colore Tailwind con esattamente quelle etichette come chiavi, oppure come variabili CSS e JSON.
Domande frequenti
- Qual è la differenza tra le opzioni RGB, HSL e OKLCH?
- RGB miscela il tuo colore linearmente verso il bianco e il nero, il che è rapido ma può apparire irregolare nei mezzitoni. HSL e OKLCH invece mantengono la tonalità stabile e distribuiscono la luminosità in modo uniforme; OKLCH è percettivamente uniforme, quindi ogni livello sembra un salto di luminosità identico. Scegli OKLCH per la scala più equilibrata.
- Quante tonalità posso generare e posso nominarle?
- Imposta un numero di livelli qualsiasi da 2 a 24. Un valore di 11 usa la numerazione Tailwind familiare (50, 100…900, 950); altri valori sono distribuiti in modo uniforme da 50 a 950. Nelle Impostazioni puoi anche digitare un elenco personalizzato di etichette separate da virgola, che sovrascrive il numero di livelli e nomina ogni livello esattamente come lo scrivi.
- Come viene calcolato il suggerimento di contrasto WCAG?
- Per ogni tonalità lo strumento calcola il rapporto di contrasto WCAG rispetto al bianco puro e al nero puro dalla luminanza relativa. Le due piccole celle in ogni riga mostrano la lettera A su bianco e su nero e sono evidenziate quando il rapporto raggiunge 4.5:1 (AA per testo normale); passa il cursore per vedere il rapporto esatto e se è AA o AAA.
- I miei dati di colore vengono caricati da qualche parte?
- No. I calcoli di colore, i controlli di contrasto e le tre esportazioni vengono eseguiti interamente nel tuo browser, quindi nessun valore di colore viene mai inviato a un server. Funziona offline e mantiene privata la tua palette.
Strumenti correlati
Codice in immagine
Trasforma uno snippet di codice in un'immagine con evidenziazione della sintassi nel tuo browser, con oltre 20 linguaggi, temi e sfondi personalizzati, numeri di riga ed esportazione PNG o SVG.
Verificatore di contrasto dei colori
Controlla il contrasto WCAG 2.1 e il punteggio APCA Lc tra testo e sfondo, vedi i badge AA, AAA e 3:1 e applica il colore conforme più vicino.
Miscelatore di colori
Mescola due colori HEX nel rapporto scelto, nello spazio RGB o Lab, e ottieni il colore intermedio come campione e valore HEX copiabile.
Simulatore di daltonismo
Carica un'immagine e visualizza l'anteprima di come appare con protanopia, deuteranopia, tritanopia o daltonismo totale, poi scarica il risultato simulato.