Generatore di tinte

Creare una scala di colori chiari

I sistemi di design ricavano spesso i passaggi più chiari miscelando il colore con il bianco; tint-color() di Bootstrap funziona in questo modo. Le tinte con una percentuale di bianco dell'80–95% creano sfondi per avvisi, righe selezionate e badge, mentre il 20–40% produce una versione più morbida del colore del brand per riempimenti al passaggio del mouse e illustrazioni. Genera ogni passaggio dal colore di base originale invece di applicare una tinta a un'altra tinta, così le percentuali restano significative, e conserva il colore di base per il testo o le icone sui passaggi più chiari.

Perché le tinte possono sembrare gessose

Aggiungere bianco riduce la saturazione oltre ad aumentare la luminosità, quindi le tinte pallide possono sembrare lattiginose e i blu, in particolare, possono virare verso il lavanda. Se un passaggio chiaro non convince, prova una base leggermente più satura oppure imposta direttamente la luminosità nel convertitore di colori e fai un confronto. Il testo scuro supera più facilmente il test di contrasto su una tinta man mano che questa diventa più chiara; verifica la coppia che usi nello strumento di verifica del contrasto.

Come usarlo

1. Inserisci valori #RGB o #RRGGBB validi e la percentuale desiderata.
2. Esegui l'operazione cromatica fissa localmente nel browser.
3. Controlla i campioni di colore e copia il risultato o i valori della palette.

Privacy e limitazioni

I valori dei colori restano su questo dispositivo. Il risultato del contrasto è uno strumento di verifica matematico, non una garanzia generale di conformità alle WCAG; contesto, rendering dei caratteri, contrasto degli elementi non testuali e stati dell'interfaccia utente devono comunque essere verificati.