Scala di un colore da 50 a 950 (come Tailwind)
Scrivi il colore principale (per esempio quello del logo) e ottieni la scala completa da 50 (quasi bianco) a 950 (quasi nero), calcolata in OKLCH come le palette di Tailwind 4: il tuo colore resta uno dei passi. Per ogni passo vedi se ci va sopra il testo bianco o nero.
★ = il tuo colore. Sotto ogni passo: il testo che si legge meglio e il suo contrasto (AA = almeno 4,5:1). Tocca un passo per copiarlo.
Tinte, ombre e toni
Esporta
Come si usa
- Scrivi il colore e il nome della scala.
- Guarda i passi (il tuo colore ha la stellina) e il testo che ci sta sopra.
- Esporta per Tailwind, CSS, SCSS o JSON.
Perché nel browser
Tutto si calcola nel tuo browser: i colori e le immagini non vengono mandati a nessun server, niente registrazione e niente pubblicità. I calcoli seguono le regole dei CSS moderni (CSS Color 4), quindi i risultati sono gli stessi che vedrai nel browser.
Domande frequenti
Che cosa vogliono dire 50, 100… 950?
È il modo di Tailwind e di molti sistemi di design: 50 è il più chiaro (sfondi), 500 il colore pieno, 900-950 i più scuri (testi). Avere tutta la scala permette di fare pulsanti, sfondi e bordi coerenti con un colore solo.
Il mio colore diventa il 500?
No: va al passo con la chiarezza più vicina (un azzurro chiaro può essere il 300). Così la scala resta regolare e il tuo colore c’è esatto.
Che differenza c’è tra tinte, ombre e toni?
Le tinte sono il colore schiarito con il bianco, le ombre scurito con il nero, i toni smorzato con il grigio. Sono calcolati in OKLab, quindi senza le sfumature sporche delle miscele classiche.
Le immagini e i colori finiscono su un server?
No: tutto avviene nel browser, sul tuo computer o sul telefono. Puoi anche staccare internet dopo aver aperto la pagina.
Strumenti correlati
Ti serve uno strumento che qui non c'è, o un'app per la tua scuola? Scrivimi: valuto i nuovi strumenti e costruisco app su misura.
Scrivimi