Generatore di tinte e sfumature

Come usare il generatore di tinte e sfumature

1. Scegli un Colore di base con il campione oppure scrivi un valore in Codice colore: #1E90FF, rgb(30 144 255), hsl(210 100% 56%) o un nome CSS come teal.
2. Scegli un Passo: 5 %, 10 %, 20 % o 25 %. Con il 10 % ottieni tinte al 10 %, 20 % … 100 % e altrettante sfumature scure.
3. Scegli come miscelare in Miscela in: OKLCH (percettivo) o sRGB (classico). Le due righe si aggiornano subito: Tinte (miscelate con il bianco) e Sfumature scure (miscelate con il nero), entrambe a partire dal colore di base.
4. Clicca su Copia sotto un campione qualsiasi per copiarne il codice HEX.
5. In Esporta come, scegli Variabili CSS, Configurazione Tailwind (v3), Tailwind @theme (v4), Variabili SCSS o JSON, imposta un Nome come primary o brand, poi usa Copia o Scarica per il codice.

Tinte, sfumature e toni

Nella teoria del colore, una tinta (tint) è un colore miscelato con il bianco, una sfumatura scura (shade) è un colore miscelato con il nero e un tono (tone) è un colore miscelato con il grigio. La percentuale indica quanto bianco o nero viene aggiunto: una tinta al 30 % è composta per il 70 % dal colore di base e per il 30 % da bianco. Al 100 % si arriva al bianco o al nero puro, ed è per questo che l’ultimo campione di ogni riga è sempre #FFFFFF o #000000: segna la fine della scala.

Tinte e sfumature sono il modo più rapido per costruire una scala coerente da un solo colore del brand: sfondi chiari e stati hover dalle tinte, bordi, stati premuti e testo scuro dalle sfumature.

Miscela OKLCH o sRGB?

sRGB (classico) miscela direttamente i valori di rosso, verde e blu. È ciò che fa la maggior parte dei generatori più vecchi e corrisponde al CSS color-mix(in srgb, …). La formula di una tinta è semplicemente canale + (255 − canale) × p, quella di una sfumatura canale × (1 − p). È prevedibile, ma i passi non sono percettivamente uniformi: i blu tendono a virare verso il viola man mano che si schiariscono, e le sfumature scure sembrano spesso fangose.

OKLCH (percettivo) miscela nello spazio colore OKLCH ideato da Björn Ottosson nel 2020, come il CSS color-mix(in oklch, …). Luminosità, crominanza e tonalità vengono interpolate separatamente. Bianco e nero non hanno tonalità, quindi la tonalità di base viene mantenuta fino in fondo e ogni passo cambia la luminosità di una quantità visivamente simile. I colori che uscirebbero dalla gamma sRGB vengono riportati dentro riducendo la crominanza, non tagliando i canali, così la tonalità resta stabile. Per i design system questo dà di solito scale più pulite e uniformi.

Usare l’esportazione

• Variabili CSS produce un blocco :root con variabili come --primary-tint-20 e --primary-shade-40, pronte da incollare in un foglio di stile.
• Configurazione Tailwind (v3) genera un oggetto colors per theme.extend.colors; poi scrivi classi come bg-primary-tint-20 o text-primary-shade-60. DEFAULT contiene il colore di base, quindi funziona anche bg-primary.
• Tailwind @theme (v4) genera variabili --color-… per la configurazione CSS-first di Tailwind 4.
• Variabili SCSS e JSON sono adatti ad altri strumenti di build e ai design token.

I nomi vengono convertiti in minuscolo e gli spazi diventano trattini, quindi “Brand Blue” diventa brand-blue.