Tinte e Sfumature
Il generatore di tinte e sfumature crea tinte più chiare (miscelate con il bianco) e sfumature più scure (miscelate con il nero) di qualsiasi colore base in 5, 10 o 20 passaggi, con output in variabili CSS.
Informazioni su questo strumento
Il generatore di tinte e sfumature crea tinte più chiare (miscelate con il bianco) e sfumature più scure (miscelate con il nero) di qualsiasi colore base in 5, 10 o 20 passaggi, con output in variabili CSS.
Come si usa
- Scegli un colore base.
- Scegli 5, 10 o 20 passaggi.
- Clicca un campione per copiarne il valore esadecimale.
- Clicca Copy as CSS Variables per esportare l'intera scala.
Da sapere
- Una tinta è un colore miscelato con il bianco; una sfumatura è un colore miscelato con il nero.
- Il generatore miscela con passaggi RGB uguali, quindi ogni passaggio cambia il colore della stessa quantità.
- Design system come Tailwind usano una scala 50–900 costruita con tinte e sfumature di ogni colore del brand.
- Verifica il contrasto dei colori del testo presi da una scala, perché i passaggi intermedi spesso non superano WCAG AA su bianco.
Funziona interamente nel tuo browser: nulla di ciò che inserisci viene caricato o salvato.
Domande frequenti
Che differenza c'è tra tinta e sfumatura?
Una tinta schiarisce un colore aggiungendo bianco; una sfumatura lo scurisce aggiungendo nero. Un tono aggiunge grigio.
Quante sfumature dovrebbe avere un colore in un design system?
Circa 10 passaggi è la scelta più comune, per esempio 50, 100 … 900 in Tailwind. Offre abbastanza varietà per sfondi, bordi, testo e stati hover.
Come uso la scala in CSS?
Copia la scala come proprietà personalizzate e richiamale con var(--color-name), per esempio su sfondi, bordi o stati hover.
Perché alcune tinte sembrano sbiadite?
Miscelare con il bianco riduce la saturazione oltre ad aumentare la luminosità. Per varianti chiare più vivaci, regola la saturazione separatamente in HSL.