Logo für dunkle Hintergründe weiß machen: So geht’s

Ein Dark-Mode-Logo ist eine Version Ihres Logos, die auf Schwarz oder Dunkelgrau klar erkennbar bleibt: meist ganz in Weiß oder in Ihren Markenfarben mit aufgehellten dunklen Teilen. Dafür färben Sie die dunklen Teile des Logos in einem Vektorprogramm weiß um oder legen das Logo im kostenlosen Tool Logo weiß machen ab. Speichern Sie es dann als SVG oder transparentes PNG und setzen Sie es überall ein, wo der Hintergrund dunkel ist.

Sie brauchen zuerst ein Firmenlogo? Der kostenlose Logo-Finder findet es über die Website-Adresse und lädt es in Weiß, Schwarz oder jeder beliebigen Farbe herunter, bereit für einen dunklen Hintergrund. Die Quellen wurden am 4. November 2026 geprüft.

Was ist ein Dark-Mode-Logo?

Ein Dark-Mode-Logo ist die helle Version eines Logos für dunklen Grund. Es kommt überall dort zum Einsatz, wo der Hintergrund dunkel ist: auf einer Website oder in einer App im Dark Mode, auf einem schwarzen T-Shirt, einer mattschwarzen Karte oder einer dunklen Folie. Designer nennen es auch Negativlogo. Es behält die Formen des Logos und tauscht die Teile, die auf Schwarz verschwinden würden, etwa schwarze oder marineblaue Schrift, gegen Weiß oder einen hellen Farbton.

Nutzer wählen in den Einstellungen ihres Betriebssystems oder Browsers ein dunkles Design, und Websites lesen diese Wahl über das Media-Feature prefers-color-scheme aus, das dazu dient, „zu erkennen, ob ein Nutzer ein helles oder dunkles Farbschema angefordert hat“ (MDN). Ein Logo, das nur für weiße Hintergründe gemacht ist, wirkt auf diesen Seiten fehlerhaft. Deshalb braucht eine Marke beide Versionen.

Wann brauchen Sie ein Dark-Mode-Logo?

Sie brauchen ein Dark-Mode-Logo überall dort, wo Ihr Logo auf dunklem Hintergrund steht: auf Websites oder in Apps mit dunklem Design, in E-Mails, die im Dark Mode geöffnet werden, auf dunklen Folien, Videos oder Social-Media-Bannern und auf dunklen Produkten wie schwarzen Shirts, mattschwarzen Karten, Folie auf einem satten, dunklen Farbton oder weißer Druckfarbe auf einer dunklen Tasche. Die Tabelle ordnet jedem Hintergrund die Version zu, die darauf am besten wirkt.

Um ein weißes Logo oder ein Folienlogo auf einer mattschwarzen Karte zu sehen, bevor sie produziert wird, legen Sie es im kostenlosen 3D-Kreditkarten-Mockup-Generator ab oder klicken im Logo-Finder auf Auf einer Karte in 3D ausprobieren: Ein Klick verwandelt das Logo in Goldfolie oder partiellen UV-Lack auf einer Karte in Originalgröße unter Studiolicht. Ein Proofscene-Konto speichert ein Logo für dunkle und eines für helle Hintergründe, und die Schaltflächen Als mein Logo speichern im Logo-Finder legen jedes der beiden direkt in den Logo-Einstellungen Ihres Unternehmens ab.

Wie erstellen Sie eine weiße Version eines Logos?

Am schnellsten erstellen Sie die weiße Version eines Logos, indem Sie jede Form darin weiß umfärben. Mit einem Tool, das Logos weiß macht, genügt dafür ein Klick, in einem Vektorprogramm dauert es etwa eine Minute. Wählen Sie die Methode, die zu Ihrer Datei passt: ein Ein-Klick-Tool für jede Datei, ein Grafikprogramm für ein Vektororiginal oder eine Zeile CSS für ein Logo, das bereits auf einer Webseite steht.

1. Mit einem Klick, kostenlos

Legen Sie Ihr Logo im Tool Logo weiß machen ab und wählen Sie „Weiß“, „Schwarz“ oder „Beliebige Farbe“: Das ganze Logo nimmt diese eine Farbe auf transparentem Hintergrund an. Das Tool verarbeitet PNG-, JPG-, WebP-, GIF-, AVIF-, SVG-, PDF-, AI- und PSD-Dateien, arbeitet direkt in Ihrem Browser, sodass Ihre Datei Ihr Gerät nie verlässt, und liefert das Ergebnis als SVG, PDF, EPS oder transparentes PNG mit bis zu 4096 px.

2. In Illustrator, Figma oder Inkscape

Öffnen Sie die Vektordatei, wählen Sie alle Formen aus und setzen Sie ihre Füllung auf Weiß (#FFFFFF), ebenso die Konturen, falls das Logo welche hat. Soll ein leuchtender Akzent farbig bleiben, wählen Sie stattdessen nur die dunklen Formen aus. Sehen Sie sich das Ergebnis auf einer schwarzen Zeichenfläche an und speichern Sie dann ein SVG für Bildschirme und ein PDF oder EPS für den Druck. Welche Datei wohin gehört, zeigt der Ratgeber Logo-Dateiformate erklärt.

3. Mit CSS auf einer Website

Auf einer Webseite macht eine einzige Zeile jedes Logobild weiß. brightness(0) macht ein Bild „vollständig schwarz“ (MDN), und invert(1) „wendet eine vollständige Invertierung an“ (MDN), die aus diesem Schwarz Weiß macht. Weil dabei jede Farbe weiß wird, eignet sich dieser Weg am besten für einfarbige Logos.

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

Bei einem Logo, das als Inline-SVG eingebunden ist, setzen Sie die Formen auf fill="currentColor". Das Schlüsselwort currentColor „steht für den Wert der color-Eigenschaft eines Elements“ (MDN), deshalb übernimmt das Logo die Textfarbe der umgebenden Seite: Heller Text im Dark Mode bringt ein helles Logo mit sich.

Wie machen Sie ein Logo in Canva, Photoshop oder PowerPoint weiß?

Jede dieser Apps macht ein Logo in weniger als einer Minute weiß: Canva färbt Logos um, deren Farben sich dort bearbeiten lassen, Photoshop macht die Ebene mit dem Logo per Überlagerung weiß, und PowerPoint erledigt das über die Helligkeit des Bildes. Für ein Logo, das die App nicht umfärben kann, erstellen Sie die weiße Version einmal im kostenlosen Tool Logo weiß machen und fügen stattdessen diese Datei ein.

In Canva

Wählen Sie das Logo in Ihrem Design aus. Erscheinen seine Farben als Farbfelder in der Symbolleiste, klicken Sie auf jedes Feld und wählen Sie im geöffneten Farbbereich Weiß (Canva-Hilfecenter). Laut Canva lassen sich die Farben eines Elements nicht ändern, wenn keine Farbfelder erscheinen, etwa bei einem Logo, das als PNG- oder JPG-Bild hochgeladen wurde. Holen Sie in diesem Fall das weiße PNG oder SVG in Ihr Design: Öffnen Sie den Tab „Uploads“, wählen Sie „Dateien hochladen“ und dann die Datei (Canva-Hilfecenter).

In Photoshop

Legen Sie das Logo auf eine eigene Ebene mit transparentem Hintergrund und machen Sie dann jedes Pixel davon weiß: Der Ebenenstil „Farbüberlagerung“ in Weiß erledigt das in einem Schritt, und eine Korrektur „Farbton/Sättigung“ mit der Helligkeit auf dem Höchstwert führt zum selben Ergebnis. Prüfen Sie das Logo auf einer dunklen Ebene darunter und exportieren Sie dann ein PNG mit Transparenz, niemals ein JPG, damit das weiße Logo seinen transparenten Hintergrund behält.

In PowerPoint

Markieren Sie das Logo, öffnen Sie die Registerkarte „Bildformat“, wählen Sie „Korrekturen“ und dann „Optionen für Bildkorrekturen“, und stellen Sie den Regler „Helligkeit“ auf den Höchstwert (Microsoft-Support). Ein Logo auf transparentem PNG wird weiß, während sein Hintergrund transparent bleibt, bereit für eine dunkle Folie. In Word finden Sie dieselbe Schaltfläche „Korrekturen“ ebenfalls auf der Registerkarte „Bildformat“.

Für Bewegung sorgt der kostenlose GIF-Maker für drehende Logos: Er macht aus der weißen Version ein drehendes Logo auf dunklem Hintergrund, als GIF in Endlosschleife oder als MP4.

Sollte ein Dark-Mode-Logo reinweiß sein?

Ein Dark-Mode-Logo muss nicht reinweiß sein: Ganz in Weiß ist es auf Fotos, Videos und unruhigen Hintergründen die sicherste Wahl, während eine zweifarbige Version, die eine leuchtende Markenfarbe behält, auf schlichtem Schwarz oft mehr nach der Marke aussieht. Entscheidend ist, dass jeder Teil sichtbar bleibt: Schwarze, marineblaue und dunkelbraune Teile müssen hell werden, ein leuchtender Akzent wie Gelb oder Hellblau kann bleiben, wie er ist.

Der Standard für Barrierefreiheit lässt Ihnen die Wahl. Die WCAG halten fest: „Text, der Teil eines Logos oder Markennamens ist, unterliegt keiner Kontrastanforderung“ (W3C). Das Kontrastverhältnis von 3:1, das derselbe Standard für großen Text vorgibt, ist dennoch eine sinnvolle Untergrenze für ein Logo, das auf einen Blick lesbar sein muss. Drei Prüfpunkte helfen:

• Dünne Linien und kleine Schrift, etwa ein Slogan unter der Bildmarke, brauchen den stärksten Kontrast; Weiß ist für sie die sichere Wahl.
• Dunkelgraue Hintergründe, wie sie in dunklen Designs üblich sind, liegen näher an mittleren Farbtönen als Schwarz. Prüfen Sie das Logo deshalb auf dem echten Hintergrund, nicht nur auf reinem Schwarz.
• Markenfarben, die die Identität prägen, etwa eine rote Bildmarke, können oft bleiben; testen Sie jede davon in der kleinsten Logogröße auf dem dunklen Hintergrund.

Im Logo-Finder schalten Sie die Vorschau jedes Logos zwischen Schwarz, Grau, Weiß, Schachbrettmuster und Markenfarbe um, sodass Sie jede Version auf dem Untergrund beurteilen, auf dem sie später steht.

Wie zeigen Sie ein Dark-Mode-Logo auf einer Website an?

Um ein Dark-Mode-Logo auf einer Website anzuzeigen, geben Sie dem Browser beide Dateien in einem <picture>-Element und lassen das Media-Feature prefers-color-scheme entscheiden: Besucher im Dark Mode erhalten die weiße Version, alle anderen das Original. GitHub unterstützt dasselbe Muster für helle und dunkle Bilder in README-Dateien (GitHub-Changelog). Der Code dazu:

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

Für andere Setups gibt es zwei weitere Wege. Eine Website mit eigenem Umschalter zwischen hellem und dunklem Design kann das Logo über dieselbe CSS-Klasse austauschen, die das Design umschaltet. Und ein SVG, das mit einem <img>-Tag eingebunden ist, kann eigene Stile mit @media (prefers-color-scheme: dark) enthalten, die dem Farbschema der Seite folgen, in die es eingebettet ist, wie MDN erklärt:

<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>

Wie funktionieren Dark-Mode-Logos in E-Mails?

E-Mail-Programme gehen auf drei verschiedene Arten mit dem Dark Mode um, deshalb muss ein Dark-Mode-Logo in E-Mails alle drei überstehen: Manche lassen die Farben unverändert, manche invertieren nur helle Hintergründe, und manche invertieren alles. Der Dark-Mode-Leitfaden von Litmus für E-Mail-Marketer, mit einer Tabelle der E-Mail-Programme vom Februar 2025, teilt die Programme so ein:

Litmus schlägt drei Lösungen vor: transparente PNG-Dateien verwenden, „einen Leuchteffekt oder eine durchgehende weiße Kontur um ein Icon oder Logo“ hinzufügen, damit ein dunkles Logo auf jedem Hintergrund lesbar bleibt, und per @media (prefers-color-scheme: dark) auf die weiße Version umschalten, was laut der Tabelle von Litmus in Apple Mail unter macOS und auf iPhone und iPad unterstützt wird (Litmus). Die passenden Größen für Signaturlogos stehen in Logogrößen für Web, Social Media, E-Mail und Druck.

Braucht ein Favicon eine Dark-Mode-Version?

Ein Favicon braucht eine Dark-Mode-Version, wenn es dunkel auf transparentem Hintergrund ist, denn Browser-Tabs sind in einem dunklen Design ebenfalls dunkel. Ein SVG-Favicon kann eigene Stile mit @media (prefers-color-scheme: dark) enthalten und seine Farben mit dem Design wechseln, was laut dem Leitfaden von web.dev zu adaptiven Favicons in Chromium-basierten Browsern und in Firefox funktioniert; legen Sie für alle anderen Browser eine favicon.ico daneben (web.dev).

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

Das einfachste Favicon ist in beiden Designs ganz ohne Umschalten gut erkennbar: die Bildmarke auf einem vollflächigen Quadrat in der eigenen Markenfarbe. Das Favicon-Paket des Logo-Finders erstellt aus jedem Logo die ICO-Datei, PNG-Icons von 16 bis 512 px und das site.webmanifest, der Favicon-Grabber zeigt, wie andere Websites ihre Favicons lösen, und der Ratgeber Logogrößen nennt jede Favicon-Größe und ihren Einsatzort. Sie möchten ein Firmenlogo zuerst von Hand suchen? Die Anleitung finden Sie unter So finden Sie das Logo eines Unternehmens.