Logo in negativo: come renderlo bianco per sfondi scuri

Un logo per la modalità scura è una versione del tuo logo pensata per restare ben visibile sul nero o sul grigio scuro: di solito tutta bianca, oppure con i colori del brand e le parti scure schiarite. Per crearlo, ricolora di bianco le parti scure del logo in un editor vettoriale, oppure trascina il logo nello strumento gratuito Logo bianco; poi salvalo in SVG o in PNG trasparente e usalo ovunque lo sfondo sia scuro.

Prima ti serve il logo di un'azienda? Il Logo Finder gratuito lo trova dall'indirizzo del sito e lo scarica in bianco, in nero o in qualsiasi colore, pronto per uno sfondo scuro. Fonti verificate: 4 novembre 2026.

Cos'è un logo per la modalità scura?

Un logo per la modalità scura è la versione chiara su fondo scuro di un logo, usata ogni volta che lo sfondo è scuro: un sito o un'app in modalità scura, una T-shirt nera, una card nera opaca o una slide scura. I grafici lo chiamano anche logo in negativo. Mantiene le forme del logo e sostituisce le parti che sparirebbero sul nero, come un testo nero o blu navy, con il bianco o una tinta chiara.

Le persone scelgono un tema scuro nelle impostazioni del sistema operativo o del browser, e i siti web leggono questa scelta attraverso la media feature prefers-color-scheme, che serve «a rilevare se l'utente ha richiesto un tema a colori chiari o scuri» (MDN). Un logo pensato solo per sfondi bianchi su quelle pagine sembra rovinato, ed è per questo che un brand ha bisogno di entrambe le versioni.

Quando serve un logo per la modalità scura?

Ti serve un logo per la modalità scura ovunque il tuo logo stia su uno sfondo scuro: un sito o un'app con tema scuro, un'email aperta in modalità scura, una slide, un video o un banner social scuri, e prodotti scuri come magliette nere, card nere opache, lamina su un colore intenso o inchiostro bianco su una borsa scura. La tabella abbina a ogni sfondo la versione che si legge meglio.

Per vedere un logo bianco o in lamina su una card nera opaca prima di produrla, trascinalo nel generatore gratuito di mockup 3D di carte di credito, oppure premi Provalo su una card in 3D nel Logo Finder: con un clic il logo diventa lamina oro o vernice UV selettiva su una card a grandezza naturale, sotto luci da studio. Gli account Proofscene conservano un logo per gli sfondi scuri e uno per quelli chiari, e i pulsanti Salva come mio logo del Logo Finder inseriscono l'uno o l'altro direttamente nelle impostazioni del logo della tua azienda.

Come si crea una versione bianca di un logo?

Il modo più rapido per creare una versione bianca di un logo è ricolorare di bianco ogni sua forma: basta un clic in uno strumento per rendere bianco un logo, o circa un minuto in un editor vettoriale. Scegli il metodo adatto al file che hai: uno strumento che funziona con un clic per qualsiasi file, un programma di grafica per un originale vettoriale, oppure una riga di CSS per un logo già presente in una pagina web.

1. Con un clic, gratis

Trascina il tuo logo nello strumento Logo bianco e scegli «Bianco», «Nero» o «Qualsiasi colore»: tutto il logo assume quel colore su sfondo trasparente. Accetta file PNG, JPG, WebP, GIF, AVIF, SVG, PDF, AI e PSD, funziona nel tuo browser, così il file non lascia mai il tuo dispositivo, e scarica il risultato in SVG, PDF, EPS o PNG trasparente fino a 4096 px.

2. In Illustrator, Figma o Inkscape

Apri il file vettoriale, seleziona tutte le forme e imposta il riempimento su bianco (#FFFFFF), e anche le tracce, se il logo ne ha. Per mantenere a colori un accento vivace, seleziona invece solo le forme scure. Guarda il risultato su una tavola da disegno nera, poi salva un SVG per lo schermo e un PDF o un EPS per la stampa. Formati di file del logo, spiegati chiarisce quale file usare dove.

3. Con il CSS, su un sito web

In una pagina web, una riga rende bianca qualsiasi immagine di un logo. brightness(0) rende un'immagine «completamente nera» (MDN) e invert(1) «applica un'inversione completa» (MDN), che trasforma quel nero in bianco. Poiché rende bianco ogni colore, è più adatto ai loghi a un solo colore.

.logo-on-dark {
  filter: brightness(0) invert(1);
}

Per un logo inserito inline come SVG, imposta le sue forme su fill="currentColor". La parola chiave currentColor «rappresenta il valore della proprietà color di un elemento» (MDN), quindi il logo prende il colore del testo della pagina intorno: con il testo chiaro della modalità scura arriva anche un logo chiaro.

Come rendere bianco un logo in Canva, Photoshop o PowerPoint?

Ognuna di queste app può rendere bianco un logo in meno di un minuto: Canva ricolora i loghi di cui può modificare i colori, Photoshop rende bianco il livello del logo con una sovrapposizione colore, e PowerPoint lo fa con la luminosità dell'immagine. Per un logo che l'app non può ricolorare, crea una volta la versione bianca con lo strumento gratuito Logo bianco e inserisci quel file.

In Canva

Seleziona il logo nel tuo design. Se i suoi colori compaiono come riquadri colore nella barra degli strumenti, clicca su ciascun riquadro e scegli il bianco nel pannello «Colore» che si apre (Centro assistenza Canva). Canva precisa che, quando non compaiono riquadri colore, i colori dell'elemento non si possono modificare, come nel caso di un logo caricato come immagine PNG o JPG. In questi casi, importa il PNG o l'SVG bianco: apri la scheda «Caricamenti», seleziona «Carica file» e sceglilo (Centro assistenza Canva).

In Photoshop

Metti il logo su un livello a sé con sfondo trasparente, poi rendi bianco ogni suo pixel: lo stile di livello «Sovrapposizione colore» in bianco lo fa in un solo passaggio, e una regolazione «Tonalità/saturazione» con la «Luminosità» al massimo dà lo stesso risultato. Controllalo su un livello scuro sottostante, poi esporta un PNG con trasparenza, mai un JPG, così il logo bianco mantiene lo sfondo trasparente.

In PowerPoint

Seleziona il logo, apri la scheda «Formato immagine», scegli «Correzioni», poi «Opzioni correzioni immagini», e porta il cursore «Luminosità» al massimo (Supporto Microsoft). Un logo su un PNG trasparente diventa bianco mentre lo sfondo resta trasparente, pronto per una slide scura. Lo stesso pulsante «Correzioni» si trova nella scheda «Formato immagine» di Word.

Per il movimento, lo strumento gratuito GIF del logo che gira trasforma la versione bianca in un logo che ruota su sfondo scuro, come GIF in loop o come MP4.

Un logo per la modalità scura deve essere bianco puro?

Un logo per la modalità scura non deve per forza essere bianco puro: il tutto bianco è la scelta più sicura su foto, video e sfondi pieni di dettagli, mentre una versione bicolore che mantiene un colore del brand vivace spesso rappresenta meglio il brand su un nero uniforme. Conta che ogni parte resti visibile: le parti nere, blu navy e marrone scuro devono diventare chiare, mentre un accento vivace come il giallo o l'azzurro può restare com'è.

Lo standard di accessibilità lascia a te la scelta: le WCAG dicono che «il testo che fa parte di un logo o di un marchio non ha requisiti di contrasto» (W3C). Il rapporto 3:1 che lo stesso standard fissa per il testo grande resta comunque una soglia minima sensata per un logo che si deve leggere a colpo d'occhio. Tre verifiche aiutano:

• Linee sottili e testi piccoli, come uno slogan sotto il marchio, richiedono il contrasto più forte; per loro il bianco è la scelta sicura.
• Gli sfondi grigio scuro, comuni nei temi scuri, sono più vicini ai colori di tono medio rispetto al nero, quindi controlla il logo sullo sfondo reale, non solo sul nero puro.
• I colori del brand che ne esprimono l'identità, come un marchio rosso, spesso possono restare; controlla ciascuno sullo sfondo scuro, usando il logo alle dimensioni minime previste.

Il Logo Finder ti permette di mostrare l'anteprima di qualsiasi logo su nero, grigio, bianco, scacchiera o colore del brand, così ogni versione si valuta sul fondo su cui starà.

Come mostrare un logo per la modalità scura su un sito web?

Per mostrare un logo per la modalità scura su un sito web, dai al browser entrambi i file in un elemento <picture> e lascia scegliere alla media feature prefers-color-scheme: chi naviga in modalità scura vede la versione bianca, tutti gli altri l'originale. GitHub supporta lo stesso schema per le immagini chiare e scure nei file README (changelog di GitHub). Il markup:

<picture>
  <source srcset="/logo-white.svg" media="(prefers-color-scheme: dark)">
  <img src="/logo.svg" alt="Company name" width="200" height="50">
</picture>

Altre due strade si adattano ad altre configurazioni. Un sito con un proprio selettore di tema chiaro e scuro può cambiare il logo con la stessa classe CSS che cambia il tema. E un SVG inserito con un tag <img> può contenere i propri stili @media (prefers-color-scheme: dark), che seguono lo schema di colori della pagina che lo incorpora, come spiega MDN:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 50">
  <style>
    .mark { fill: #0e1b2c; }
    @media (prefers-color-scheme: dark) { .mark { fill: #ffffff; } }
  </style>
  <path class="mark" d="M10 10h40v30H10z"/>
</svg>

Come funzionano i loghi per la modalità scura nelle email?

I programmi di posta gestiscono la modalità scura in tre modi diversi, quindi un logo per la modalità scura nelle email deve resistere a tutti e tre: alcuni lasciano i colori invariati, altri invertono solo gli sfondi chiari e altri ancora invertono tutto. La guida di Litmus alla modalità scura per chi fa email marketing, con una tabella dei client aggiornata a febbraio 2025, raggruppa i programmi così:

Litmus suggerisce tre soluzioni: usare PNG trasparenti, aggiungere «un alone o un contorno bianco pieno intorno a un'icona o a un logo» perché un logo scuro si legga su qualsiasi sfondo, e sostituirlo con la versione bianca tramite @media (prefers-color-scheme: dark), che la sua tabella indica come supportato in Apple Mail su macOS e su iPhone e iPad (Litmus). Le misure del logo per la firma sono in dimensioni del logo per web, social, email e stampa.

Una favicon ha bisogno di una versione per la modalità scura?

Una favicon ha bisogno di una versione per la modalità scura quando è scura su sfondo trasparente, perché anche le schede del browser con un tema scuro sono scure. Una favicon SVG può contenere i propri stili @media (prefers-color-scheme: dark) e cambiare colore con il tema, cosa che secondo la guida di web.dev alle favicon adattive funziona nei browser basati su Chromium e in Firefox; tieni accanto una favicon.ico per tutti gli altri browser (web.dev).

<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">

La favicon più semplice resta leggibile in entrambi i temi senza dover cambiare: il marchio su un quadrato pieno nel colore del brand. Il pacchetto di favicon del Logo Finder crea da qualsiasi logo l'ICO, le icone PNG da 16 a 512 px e il site.webmanifest, lo strumento Scarica favicon mostra come le fanno gli altri siti e la guida alle dimensioni dei loghi elenca ogni misura delle favicon e dove si usa. Per trovare prima a mano il logo di un'azienda, leggi come trovare il logo di un'azienda.