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.
Ricava una scala scura da una chiara rispecchiandola: il passo 50 diventa 950, il 100 diventa 900 e così via. È l’unica derivazione che mantiene il *contratto* dei nomi dei token, così una coppia che passava il WCAG in tema chiaro passa con lo stesso rapporto in tema scuro e un componente scritto contro la scala non richiede alcuna modifica. Questa è la stessa pagina della scala di tinte e ombre, aperta sulla scheda scura.
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
Scuro
50
100
200
300
400
500
600
700
800
900
950
Perché specchiare: il contrasto di una coppia di token si conserva
- 50 su 900: chiaro 8,93 · scuro 12,73
- 100 su 800: chiaro 6,68 · scuro 7,19
- 200 su 950: chiaro 11,16 · scuro 7,19
I nomi dei token mantengono il loro significato, quindi un componente scritto sulla scala non ha bisogno di alcuna modifica.
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
Un colore solo. Prima viene costruita la scala chiara e da quella si ricava la scura, così escono entrambe dallo stesso seme invece di essere mantenute separatamente.
Scegliere la strategia
Il rispecchiamento è il valore predefinito ed è quello con l’argomento sul contrasto alle spalle. Lo scorrimento verso il buio abbassa invece ogni passo di tre posizioni, il che conserva l’ordinamento — così un gradiente da chiaro a scuro non si inverte — al prezzo dei passi più scuri. Rispecchiare e attenuare è il rispecchiamento con il croma tirato ulteriormente giù.
Smorzare il croma per i riempimenti ampi
Il colore saturo su una superficie scura sfavilla e vibra, e l’effetto peggiora quanto più la superficie è ampia. Tirare giù il croma è la scelta prudente; lo si può lasciare vicino al 100% se la scala serve solo per accenti piccoli e per il testo.
Leggere il pannello di verifica
Con il rispecchiamento attivo, stampa affiancato il rapporto WCAG di tre coppie di token nei due temi. È l’affermazione controllata sotto gli occhi di chi legge, invece che soltanto dichiarata.
Esportare entrambe le scale in una volta
Le forme CSS emettono la scala chiara in `:root` e quella scura dentro un blocco `prefers-color-scheme: dark`, così l’intero tema è un solo incolla.
Domande frequenti
Posso incollare la tavolozza chiara che ho già?
Non come insieme. Questa pagina prende un colore e da quello costruisce entrambe le scale, quindi una tavolozza esistente con passi regolati a mano non sopravvive a essere immessa un colore alla volta: si otterrebbero undici passi regolari, non i propri undici. Dove la tavolozza esistente conta più della regolarità, conviene convertirla un token alla volta e controllare ogni coppia nella verifica del contrasto.
Il rispecchiamento conserva il contrasto in modo esatto?
Da vicino, non in modo esatto. La scala è simmetrica nella luminosità OKLCH, e il contrasto WCAG si calcola sulla luminanza relativa, che non ne è una funzione lineare: i rapporti escono vicini fra loro anziché identici. Il pannello di verifica stampa entrambi i numeri, così si vede lo scarto per il proprio colore invece di prendere l’affermazione sulla fiducia.
Conviene usare il nero puro come sfondo scuro?
Di solito no. Il nero puro sotto un testo chiaro massimizza il contrasto, e su un LCD l’alone che ne deriva rende il testo piccolo più difficile da leggere, non più facile. Per questo la striscia scura qui è mostrata su un grigio molto scuro. Un telefono OLED è l’unico caso in cui il nero vero porta qualcosa di reale, in consumo.
Perché questa è una pagina separata dalla scala di tinte e ombre?
Non lo è: è lo stesso strumento con la scheda scura già aperta, perché «fammi una tavolozza scura» e «fammi una scala 50-950» arrivano come domande diverse da persone diverse. Tutto quello che c’è su una pagina c’è anche sull’altra.
Può ricevere da
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.
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.
Estrattore di token CSS
CSS Token Extractor
Tira fuori da un foglio di stile colori, spaziature, raggi e caratteri e propone un insieme di proprietà personalizzate.
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.
Dopo
Questi accettano ciò che produce questo strumento, così il risultato può passare direttamente.
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.
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.
Estrattore di token CSS
CSS Token Extractor
Tira fuori da un foglio di stile colori, spaziature, raggi e caratteri e propone un insieme di proprietà personalizzate.
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.
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.