Generatore di tema chiaro e scuro (variabili CSS)
Scegli il colore principale. Il generatore crea le due palette, controlla il contrasto di ogni coppia e mostra l’anteprima affiancata.
Come si usaModalità scura dal colore del brand
Disponibile in: 
Generatore di tema chiaro e scuro (variabili CSS): a cosa serve
Un tema scuro fatto bene non è l’inversione di quello chiaro. A partire dal colore principale del tuo brand, il generatore crea le variabili CSS dei due temi (sfondo, superficie, bordo, testo, testo secondario, colore principale e il testo sopra di esso) con grigi neutri o tendenti al colore del brand.
Ogni coppia di colori ha il contrasto calcolato con la formula WCAG ed è segnata come AAA, AA o insufficiente, e il colore principale viene regolato per superare 4,5:1 in entrambi i temi. Il codice cambia tema in base alla modalità del sistema (prefers-color-scheme) e, se vuoi, anche tramite un pulsante con data-theme.
Come si usa
- Scegli il colore principale.
- Controlla l’anteprima e la tabella dei contrasti.
- Copia le variabili CSS.
Quando usarlo
- Creare la modalità scura di un sito.
- Costruire la palette di un nuovo progetto.
- Verificare l’accessibilità dei colori.
Domande frequenti
Perché la modalità scura non è solo l’inversione dei colori?
Invertire lascia lo sfondo nero puro e i colori del brand troppo accesi, affaticando la vista. Un buon tema scuro usa uno sfondo grigio molto scuro, testo quasi bianco e una versione più chiara del colore principale, per mantenere il contrasto senza abbagliare.
Cosa significano AA e AAA nel contrasto?
Sono livelli delle linee guida di accessibilità WCAG. AA richiede un contrasto di almeno 4,5:1 per il testo normale; AAA, 7:1. Il generatore mostra il rapporto di ogni coppia di colori e ti avvisa quando scende sotto 4,5:1.
Come cambio tema con un pulsante?
Il codice risponde alla modalità del sistema (prefers-color-scheme) e anche all’attributo data-theme su html. Un pulsante che imposta data-theme=dark o light forza il tema scelto; lo strumento Pulsante modalità scura di questo sito genera quel pulsante.
È davvero gratis?
Sì, 100% gratis. Senza registrazione, senza abbonamento e senza limiti d’uso. Tutti gli strumenti di Tools123 sono gratuiti.