Design / Colore
Generatore di scale cromatiche Tailwind
Trasforma un colore del tuo brand in una palette CSS completa per Tailwind da 50 a 950, realizzata in OKLCH come i colori originali di Tailwind, e copiala come CSS per il tema Tailwind 4, configurazione Tailwind 3 o variabili CSS.
Generatore di scale cromatiche Tailwind: Ogni tonalità riprende la luminosità, la cromaticità e la leggera variazione di tonalità delle palette originali di Tailwind a quel livello, misurate nello spazio colore OKLCH, e le sposta in modo che il tuo colore corrisponda esattamente alla tonalità scelta. I grigi seguono invece le famiglie di grigi di Tailwind. I colori che la gamma sRGB non riesce a mostrare vengono adattati con il metodo di mappatura della gamma di CSS Color 4, come fanno i browser; l'output Tailwind 4 mantiene i valori OKLCH, mentre gli altri formati usano codici esadecimali. Funziona al 100% localmente nel browser, senza caricare file sul server.
- Categoria
- Strumenti quotidiani
- Esecuzioni
- Nel browser
- Costo
- Gratuito · senza registrazione
- Disponibilità
- Pronto all'uso
Funziona interamente nel browser
#f2f8ffoklch(97.6% 0.012 250.3)#dfecffoklch(93.9% 0.029 258.1)#bcd9ffoklch(87.6% 0.061 255.8)#8fbeffoklch(79.3% 0.106 256.6)#5e9cffoklch(69.6% 0.16 259.5)#3b82f6oklch(62.3% 0.188 259.8)#2668daoklch(54.2% 0.187 260.6)#1f57b6oklch(47.7% 0.163 260.6)#1f4997oklch(42.3% 0.137 261.4)#20417coklch(38.4% 0.109 261.4)#15274coklch(27.9% 0.073 263.2)CSS (@theme)
@theme {
--color-brand-50: oklch(97.6% 0.012 250.3);
--color-brand-100: oklch(93.9% 0.029 258.1);
--color-brand-200: oklch(87.6% 0.061 255.8);
--color-brand-300: oklch(79.3% 0.106 256.6);
--color-brand-400: oklch(69.6% 0.16 259.5);
--color-brand-500: oklch(62.3% 0.188 259.8);
--color-brand-600: oklch(54.2% 0.187 260.6);
--color-brand-700: oklch(47.7% 0.163 260.6);
--color-brand-800: oklch(42.3% 0.137 261.4);
--color-brand-900: oklch(38.4% 0.109 261.4);
--color-brand-950: oklch(27.9% 0.073 263.2);
}
Le tonalità seguono le variazioni di luminosità, croma e tonalità delle palette di Tailwind, misurate in OKLCH, quindi una scala creata a partire dal blue-500 di Tailwind si discosta dal blu di Tailwind di appena poche differenze percettibili. I colori fuori dalla gamma sRGB vengono ricondotti al suo interno con il metodo di gamut mapping di CSS Color 4.
Usare la scala
Un modello comune usa 50–100 per gli sfondi delle pagine e delle schede, 200–300 per i bordi, 500–600 per pulsanti e link, 700 per gli stati al passaggio del mouse e 800–950 per il testo su sfondi chiari. Verifica le combinazioni di testo e sfondo con lo strumento di verifica del contrasto dei colori.
Per convertire un singolo colore tra hex, RGB, HSL e OKLCH, usa il convertitore di colori; per partire da una foto, l'estrattore di palette di colori.
Tailwind 4 e OKLCH
Tailwind CSS 4 definisce i colori in OKLCH, che può descrivere colori oltre sRGB sugli schermi con gamut ampio. L'output Tailwind 4 qui resta all'interno di sRGB, quindi i colori appaiono uguali su ogni schermo.
Come usarlo
- Scegli il tuo colore oppure incolla il codice esadecimale.
- Scegli quale tonalità deve rappresentare, di solito 500, oppure lascia che sia il generatore a posizionarla.
- Copia il codice per Tailwind 4, Tailwind 3 o per semplici variabili CSS.
Privacy e limitazioni
Tutto viene generato nel tuo browser.
Strumenti correlati
Domande frequenti
Perché OKLCH?
Passaggi uguali nella luminosità OKLCH appaiono uguali all'occhio, indipendentemente dalla tonalità. Così una scala gialla e una blu create nello stesso modo hanno un contrasto coerente, cosa che HSL non riesce a garantire.
Quale tonalità dovrebbe rappresentare il colore del mio brand?
Di solito 500 o 600, dove Tailwind mantiene i colori più intensi. Un colore molto chiaro, come un pastello, si adatta meglio a 200 o 300; scegli Automatico per posizionarlo in base alla sua luminosità.
Il testo sarà leggibile su queste tonalità?
In genere, il testo bianco richiede 600 o una tonalità più scura, mentre il testo scuro richiede 400 o una tonalità più chiara. Verifica comunque ogni combinazione con uno strumento di verifica del contrasto.
Strumento gratuito · nel browser esecuzioni · senza account