Softonic

Generatore di Palette Monocromatiche

Passaggio 1 / 3 Crea la scala

Colori e tavolozze vengono generati in questo browser. Nella modalità guidata il progetto resta per un massimo di 30 minuti nella memoria di sessione di questa scheda; nessun colore passa ai nostri server o nell’URL.

Crea una scala monocromatica

Inserisci un colore, quindi scegli trasformazione, spazio di interpolazione e numero di campioni.

Formati accettati: #RGB, #RRGGBB, rgb(0–255) e hsl() con percentuali. I canali alfa non sono accettati.

Usato nelle esportazioni di variabili CSS, Tailwind, SCSS e token di design.

Scegli un colore di base e il generatore costruirà una palette monocromatica attorno ad esso: tonalità (mescolate progressivamente con il bianco per una scala più chiara), ombre (mescolate progressivamente con il nero per una scala più scura) e toni (mescolati con il grigio per ridurre la saturazione). Utile per sistemi di design che necessitano di una scala coerente da un colore del marchio, come la scala 50–950 di Tailwind, ma regolabile, o per scegliere stati di hover e attivi senza lasciare la palette.

Come viene generata la palette

  1. 1

    Inserisci un colore di base

    Usa #RGB, #RRGGBB, canali rgb() interi o percentuali hsl().

  2. 2

    Scegli il tipo di palette

    Scegli una scala chiara e scura completa, tinte verso il bianco, ombre verso il nero o toni verso il neutro.

  3. 3

    Scegli il numero di passaggi

    5, 9 o 11 passaggi. Nove usa le comuni etichette 100–900 in stile Material; 11 aggiunge 50 e 950 per una scala in stile Tailwind.

  4. 4

    Copia o esporta

    Copia HEX, RGB, HSL o OkLCH, oppure esporta CSS, Tailwind, SCSS e JSON del Design Tokens Community Group.

Tonalità vs. ombre vs. toni

  • Tonalità = colore di base + bianco. Più chiaro, più pastello. mix(base, #fff, p%) dove p è la percentuale di bianco.
  • Ombra = colore di base + nero. Più scuro, più cupo. mix(base, #000, p%).
  • Tono = colore di base + grigio. Stessa luminosità, saturazione inferiore, più attenuato.

Le tre trasformazioni producono caratteri visivi diversi: le tonalità sembrano ariose e ottimiste, le ombre sembrano radicate e serie, i toni sembrano sobrii e sofisticati.

Una scala a 9 passaggi da un colore di base

Passaggio Descrizione Uso tipico
100 Molto chiaro Superfici, sfondi chip
200 Chiaro Stati disabilitati
300 Medio-chiaro Bordo, divisori
400 Leggermente attenuato Testo secondario (sfondo chiaro)
500 Colore di base Marchio predefinito, la tua base
600 Medio-scuro Stati hover su azioni primarie
700 Scuro Stati attivi, intestazioni
800 Molto scuro Testo forte su sfondo chiaro
900 Ombra più scura Testo a massimo contrasto

Le etichette numeriche si ispirano alle comuni convenzioni dei token; i colori generati non sono valori ufficiali Material o Tailwind.

Perché il monocromatico funziona per le interfacce

  • Familiarità. Ogni elemento sembra indiscutibilmente correlato.
  • Coerenza. Riutilizzare una sola tonalità rende facili da riconoscere le relazioni, ma non rende automaticamente l’interfaccia accessibile alle persone daltoniche.
  • Semplicità. Una decisione, il colore di base, guida l’intera palette.

Abbinamento con neutri

Una palette monocromatica ha bisogno anche di grigi. Schema comune:

  • Scala primaria dal tuo colore di marchio (9 passaggi).
  • Scala neutra da una versione desaturata del primario (9 passaggi).
  • Forse un colore di accento (un singolo passaggio ben scelto per avvisi e CTA).

Considera questa una struttura iniziale, non una regola fissa. Il numero di palette dipende da stati, visualizzazioni dati, colori semantici e requisiti di accessibilità del prodotto.

Punti di controllo del contrasto

Per il testo su uno sfondo, la WCAG richiede 4.5:1 per il testo normale e 3:1 per il testo grande. Etichette come 100, 500 o 900 non implicano un rapporto di contrasto preciso; il risultato dipende dal colore base, dal tipo di tavolozza e dallo spazio di interpolazione.

Controlla sempre le combinazioni specifiche che intendi utilizzare con un controllore di contrasto.

Esportazione nel tuo sistema di design

Formati di output:

  • Proprietà personalizzate CSS: --primary-50: #f0f9ff; --primary-100: ...
  • Configurazione Tailwind: oggetto JS pronto per essere incollato in tailwind.config.js → theme.extend.colors.
  • Mappa SCSS per progetti Sass.
  • JSON di token di design nella struttura $type e $value del Design Tokens Community Group.

Domande frequenti

Le tinte si avvicinano volutamente al bianco, quindi una base molto satura può diventare pastello in fretta. Confronta HSL e OkLCH, usa meno campioni o scegli una base meno satura.

Puoi scegliere HSL o OkLCH. HSL modifica gli assi di luminosità e saturazione; OkLCH modifica luminosità percettiva e croma, riducendo il croma quando serve per mantenere il risultato nello spazio sRGB.

Nella scala completa, il colore base è il token 500 centrale. La scala delle tinte termina sulla base, quella delle ombre parte dalla base e quella dei toni termina sulla base. Le etichette non promettono una luminosità precisa.

Non esiste un’integrazione diretta con Figma. Copia i singoli valori oppure usa il testo CSS, Tailwind, SCSS o JSON del Design Tokens Community Group come punto di partenza per il tuo flusso di lavoro.

Strumenti correlati

Generatore di codici QR

Genera localmente nel browser un codice QR da URL, testo semplice o payload QR formattato correttamente e scaricalo come PNG.

Creatore di GIF

Trasforma una sequenza di immagini o un breve video in una GIF animata. Regola frame rate, loop e dimensioni prima dell’esportazione.

Generatore di meme

Aggiungi testo in alto e in basso a un’immagine JPG, PNG o WebP. Regola font, colore e contorno, quindi scarica il meme in PNG.

Vettorializzatore da PNG a SVG

Trasforma immagini raster PNG in tracciati SVG nel browser. Ideale per loghi, icone e disegni al tratto. Regola soglia, numero di colori e smussatura.

Ridimensionatore di immagini per social media

Ridimensiona un’immagine con preset integrati per Instagram, Facebook, X, LinkedIn, YouTube, Pinterest e TikTok. Visualizza ogni PNG e scarica i formati che ti servono.

Lavagna online

Disegna idee e organizza forme, note e immagini locali su una lavagna privata nel browser. Esporta in PNG, JPEG, SVG o JSON modificabile.