Trasforma un colore in scale complete di tinte, ombre e toni ed esportale come variabili CSS, nel tuo browser.
Un design system raramente ha bisogno di un solo colore: gli serve una famiglia. Tinte, ombre e toni sono i tre modi classici di costruire quella famiglia a partire da un unico colore. Una tinta è il colore mescolato con il bianco, e dà versioni più chiare e morbide usate per sfondi, superfici in hover e stati disattivati. Un'ombra è il colore mescolato con il nero, e dà versioni più scure usate per il testo su sfondi chiari, i bordi e gli stati premuti. Un tono è il colore mescolato con il grigio, che abbassa la saturazione senza cambiare la luminosità in modo altrettanto netto — il meno conosciuto dei tre e quello che produce il look smorzato ed editoriale che tinte e ombre pure non riescono a dare.
La matematica qui è volutamente semplice e prevedibile: ogni passaggio è un'interpolazione lineare dei canali RGB tra il tuo colore base e il bersaglio (bianco #ffffff, nero #000000 o grigio medio #808080), a incrementi del 10%, così che il decimo passaggio cada esattamente sul bersaglio. È la stessa convenzione usata dai classici generatori di tinte e ombre, e rende ogni valore riproducibile: puoi ricalcolare a mano qualsiasi campione. Vale la pena conoscere il compromesso: poiché l'interpolazione avviene in sRGB e non in uno spazio percettivo come OKLCH, i passi di luminosità percepita non sono perfettamente uniformi, soprattutto per gialli e ciano molto saturi. Per le scale di interfaccia di solito va benissimo, ed è spesso preferibile, perché i risultati restano vicini alla tonalità originale.
L'esportazione è ciò che rende tutto questo pratico. Un clic copia la palette come proprietà personalizzate CSS, pronte da incollare in un blocco :root, oppure come semplice elenco di codici esadecimali per uno strumento di design. Attivando i nomi in stile Tailwind la palette viene rimappata sulla familiare scala da 50 a 900 — da 50 a 400 schiarendo, 500 come colore base, da 600 a 900 scurendo — che si incastra direttamente in un tema Tailwind o in qualsiasi file di token che segua la stessa convenzione. Puoi anche scaricare la palette come file .css. Ogni calcolo e il file stesso sono prodotti al 100% nel tuo browser; il colore che scegli non viene mai inviato a un server.
Una tinta è il tuo colore mescolato con il bianco, un'ombra è il tuo colore mescolato con il nero e un tono è il tuo colore mescolato con il grigio. Tinte e ombre cambiano la luminosità; i toni riducono soprattutto la saturazione, dando un risultato smorzato a una luminosità simile.
Ogni passaggio è una semplice miscela lineare dei canali RGB tra il tuo colore base e il bianco, il nero o il grigio al 50%, a incrementi del 10% — così la decima tinta è bianco puro e la decima ombra è nero puro. I valori sono completamente riproducibili.
Sì. Attiva i nomi in stile Tailwind e l'esportazione userà la scala da 50 a 900, con 500 come colore base, pronta da incollare nella configurazione del tema o in un file di variabili CSS.
Non automaticamente. La scala è matematicamente uniforme, non percettivamente uniforme, quindi devi comunque verificare le coppie testo/sfondo rispetto alle soglie di contrasto WCAG — come regola pratica, abbina le tinte più chiare alle ombre più scure.
No. La palette, l'esportazione CSS e il file scaricato sono tutti generati in locale in JavaScript sul tuo dispositivo: niente viene trasmesso o salvato su alcun server.
Vai.la trasforma qualsiasi URL in un link breve con statistiche dei clic, QR Code e il tuo biolink personale.
Vai.la non è responsabile dell'uso degli strumenti né delle decisioni prese in base ai loro risultati.