Go Toolstack

Generatore Palette Colori Tailwind CSS 50-950

Genera palette armoniose a 11 tonalità di Tailwind CSS (50-950) con esportazione della configurazione in un clic.

Generatore Palette Colori Tailwind CSS 50-950

Genera palette armoniose a 11 tonalità di Tailwind CSS (50-950) con esportazione della configurazione in un clic.

Come funziona

1
Set Criteria & Options
Select length, format, or generation parameters for your output.
2
Generate Instantly
Generate secure, random, or custom data entirely in your browser.
3
Copy or Export
Copy the generated output to your clipboard or download the file.

Scopri altre utilità lato client in questa categoria

Hub Immagini e Design • Flussi di lavoro e guida comparativa

Esplora tutti gli strumenti di immagini e design, i limiti tecnici e la guida alla scelta.

Esplora hub →
Formattatore e Validatore JSON

Formatta, comprimi e valida dati JSON con precisione a 64 bit e regole JSON Schema (Draft-07 / 2020-12).
Codificatore e Decodificatore Base64

Codifica testi e file in formato Base64 e decodificali in testo non crittografato.
Formattatore e Minificatore SQL

Formatta, indenta, converti parole chiave in maiuscolo e minifica query SQL localmente.

Guide correlate del blog

Guide tecniche, risoluzione dei problemi e tutorial sulle migliori pratiche

Centro Concetti e Conoscenza

Generatore Palette Colori Tailwind CSS, Scale di Tonalità da 50 a 950

Nel framework CSS utility-first Tailwind CSS, la coerenza cromatica dell'interfaccia utente si fonda su una scala predefinita a dieci livelli per ciascuna famiglia di colore, spaziando dalla sfumatura più chiara (50) alla tonalità più scura e satura (950). Quando si progetta un'applicazione web basata su un colore aziendale specifico del brand, costruire a mano un'intera scala bilanciata che mantenga la corretta luminosità e saturazione percepita su tutti i livelli è un'operazione complessa che richiede avanzate competenze colorimetriche.

Immaginiamo un designer che deve integrare il colore istituzionale del brand #0EA5E9 (azzurro oceano vivo) all'interno della configurazione tailwind.config.js del proprio progetto. Inserendo il codice esadecimale di partenza, lo strumento calcola istantaneamente l'interpolazione cromatica nello spazio colore percettivo OKLCH generando l'intera scala: dalla tinta chiarissima per sfondi 50: '#f0f9ff' fino al colore di profondità 950: '#082f49', collocando esattamente la tinta di base sul gradino 500. L'interfaccia permette di regolare finemente la brillantezza, visualizza l'anteprima su componenti reali (pulsanti, badge, alert) e fornisce il blocco JavaScript pronto per essere copiato nella sezione theme.extend.colors.

Tutti i calcoli colorimetrici, le conversioni negli spazi colore CIE LAB/OKLCH e la generazione del codice operano al 100% all'interno del tuo browser web. I tuoi codici colore del brand e le tue palette grafiche rimangono confinati nel tuo dispositivo senza alcuna trasmissione telematica esterna.

Architettura di Base e Formula Matematica

Scala Cromatica = Interpolazione Spazio Colore OKLCH tra Luce (Tonalità 50) e Ombra (Tonalità 950) con Ancoraggio Punto Base (500)

Applica curve di compensazione percettiva non lineari nello spazio OKLCH per mantenere uniforme il contrasto e la vivacità visiva lungo l'intera scala cromatica.

Migliori Pratiche e Linee Guida Essenziali

  • Utilizza lo spazio colore OKLCH per evitare cambi di tinta indesiderati: L'interpolazione nello spazio RGB ordinario produce colori intermedi fangosi o desaturati; OKLCH preserva la fedeltà cromatica a tutte le luminosità.
  • Assegna il colore del brand alla tonalità 500 o 600: Questa convenzione garantisce che classi standard come bg-brand-500 o text-brand-600 abbiano la corretta visibilità e coerenza con i componenti predefiniti di Tailwind.
  • Verifica il contrasto tra sfumature estreme per i testi: Assicurati che l'uso di un testo con classe 900 su uno sfondo 50 o 100 rispetti il rapporto di contrasto minimo 4.5:1 richiesto dalle linee guida WCAG.
  • Esporta direttamente nell'oggetto tailwind.config.js: Incolla la scala generata all'interno di module.exports = { theme: { extend: { colors: { brand: { ... } } } } } per renderla disponibile in tutte le classi utility.

Domande Frequenti (FAQ)

Perché Tailwind CSS include anche i livelli 50 e 950 oltre a quelli classici da 100 a 900?
Il livello 50 è stato introdotto per fornire sfondi estremamente tenui ideali per schede e tabelle; il livello 950 è indispensabile per creare modalità scure (dark mode) ricche di contrasto e profondità visiva.
Posso esportare la palette generata anche come variabili CSS native?
Sì. Oltre alla configurazione JavaScript per Tailwind, puoi copiare i valori come variabili CSS (:root { --color-brand-500: #...; }) compatibili con qualsiasi framework web.
Cosa rende lo spazio colore OKLCH superiore all'ordinario HSL?
OKLCH è percettivamente uniforme: due colori con la stessa luminosità numerica appaiono effettivamente identici all'occhio umano, cosa che in HSL non avviene (il giallo appare molto più luminoso del blu).
I codici colore inseriti o le palette salvate vengono condivisi sui vostri server?
No. Tutte le conversioni e l'elaborazione dei colori avvengono interamente nel motore locale del browser senza alcuna condivisione di dati all'esterno.