Scala di tinte e ombre
Tint & Shade Scale
Genera da un colore solo una scala di luminosità da 50 a 950 con passi percettivamente regolari, pronta come insieme di token.
Costruisce una scala da 50 a 950 a partire da un colore, come la vuole un sistema di design. Gli obiettivi di luminosità sono la media delle famiglie cromatiche di Tailwind, misurata sul pacchetto installato invece che scelta a mano, così il risultato cade dove l’occhio si aspetta già ogni passo. Un cursore fa passare da quella curva familiare a una spaziata in modo uniforme.
Colore di base
La sua tonalità e il suo croma seminano la scala; la sua luminosità decide quale passo viene segnato come quello che hai scelto.
Scala
I valori di luminosità puntati sono la media delle famiglie cromatiche di Tailwind stesso, misurate dal pacchetto installato invece che scelte qui.
Modalità scura
Il passo 50 diventa il 950, il 100 diventa il 900, e così via. I nomi dei token mantengono il loro significato — 500 resta il tono medio — e un componente scritto sulla scala non ha bisogno di alcuna modifica.
Chiaro
50
P3
100
P3
200
P3
300
P3
400
P3
500
P3
600
700
800
900
950
Esporta
Cerchi un insieme di tonalità invece della scala di una sola? Il generatore di tavolozze costruisce armonie. Per trovare il token Tailwind più vicino a una di queste, la ricerca del colore più vicino lo misura in ΔE.
Come si usa
Inserire il colore di base
La sua tonalità e il suo croma danno il seme alla scala. La sua luminosità decide quale passo riceve l’anello intorno: quello più vicino al colore portato.
Decidere quanto si vuole familiare la curva
Al 100% i passi stanno dove li mette Tailwind, cioè dove tutti in squadra li hanno già in testa. A 0 la scala è una linea retta da 0,97 a 0,25: più regolarmente spaziata e meno familiare. Non esiste una risposta giusta; il motivo abituale per restare al 100% è allinearsi a un prodotto esistente.
Aggiungere una deriva di tonalità se l’estremo scuro non convince
Le famiglie reali derivano: il rosso di Tailwind va da 17° al passo 50 a 26° al 950, perché un rosso scuro si legge meglio un po’ più caldo. Di solito bastano pochi gradi; il cursore arriva a 40 in entrambe le direzioni.
Decidere se restare dentro l’sRGB
Attivo, ogni passo è un colore che qualunque schermo sa mostrare e l’esadecimale è esatto. Disattivo, i passi centrali di una tonalità satura mantengono il croma, uno schermo P3 li mostra e l’esadecimale diventa un’approssimazione: i passi che sforano sono contrassegnati.
Esportare come variabili, come tema Tailwind o come JSON
Il prefisso lo si sceglie. La forma JSON porta con sé anche gli ancoraggi di luminosità, utili se a valle qualcosa deve ricostruire la stessa scala.
Domande frequenti
L’esadecimale del mio marchio non compare da nessuna parte nella scala. È un difetto?
No, ed è il comportamento onesto. La scala è costruita su obiettivi di luminosità e non viene fatta passare per il colore fornito, quindi, a meno che quel colore non cada esattamente su uno degli undici obiettivi, non comparirà tale e quale. Il passo con l’anello è il più vicino. Se l’esadecimale esatto deve esserci, conviene usarlo direttamente per quel token e lasciare che la scala fornisca il resto.
Sono colori di Tailwind?
No. Da Tailwind viene la *forma* della curva: gli undici valori di luminosità, mediati sulle sue famiglie cromatiche. La tonalità e il croma sono quelli forniti. Per sapere quale token di Tailwind sia il più vicino a un colore che si ha, la ricerca del colore più vicino lo misura in ΔE.
«Percettivamente uniforme» vuol dire che ogni passo differisce della stessa quantità?
Solo con l’ancoraggio a 0%. Al 100% la scala segue deliberatamente la curva di Tailwind, che non è spaziata in modo uniforme: addensa l’estremo chiaro perché ci siano abbastanza tinte di sfondo utilizzabili. Quello che l’OKLCH garantisce in entrambi i casi è che i numeri significhino qualcosa dal punto di vista percettivo, così due famiglie costruite in questo modo procedono di pari passo.
I passi passano il WCAG l’uno contro l’altro?
Questa pagina non lo verifica, se non nel pannello di verifica della scheda del tema scuro. Passi di luminosità uguali non sono passi di contrasto uguali, perché il contrasto WCAG si calcola sulla luminanza relativa e la luminosità OKLCH non ne è una funzione lineare. La coppia che si intende usare davvero va portata alla verifica del contrasto.
Può ricevere da
Selettore di colore
Colour Picker
Sceglie un colore su un campo OKLCH, con il contagocce sullo schermo o da un’immagine caricata, e lo copia nella notazione che vuoi.
Convertitore di codici colore
Colour Format Converter
Converte un colore tra HEX, RGB, HSL, HWB, LAB, LCH e OKLCH e dice qual è il colore con nome più vicino.
Verifica del contrasto
Contrast Checker
Dà un punteggio alla coppia testo/sfondo secondo WCAG 2 e APCA e propone il colore più vicino che passa.
Generatore di tavolozze
Palette Generator
Costruisce una tavolozza armonica a partire da un colore di base, con le regole del complementare, della triade e degli analoghi.
Dopo
Questi accettano ciò che produce questo strumento, così il risultato può passare direttamente.
Verifica del contrasto
Contrast Checker
Dà un punteggio alla coppia testo/sfondo secondo WCAG 2 e APCA e propone il colore più vicino che passa.
Tavolozza per il tema scuro
Dark Mode Palette
Costruisce da un colore la rampa 50–950 e la rispecchia in una scura, così ogni coppia di token conserva il proprio contrasto.
Generatore di tavolozze
Palette Generator
Costruisce una tavolozza armonica a partire da un colore di base, con le regole del complementare, della triade e degli analoghi.
Colore Tailwind più vicino
Nearest Tailwind Colour
Trova la voce della tavolozza Tailwind più vicina a un colore qualsiasi e mostra la distanza percepita.
Convertitore di codici colore
Colour Format Converter
Converte un colore tra HEX, RGB, HSL, HWB, LAB, LCH e OKLCH e dice qual è il colore con nome più vicino.
Selettore di colore
Colour Picker
Sceglie un colore su un campo OKLCH, con il contagocce sullo schermo o da un’immagine caricata, e lo copia nella notazione che vuoi.