Zo maak je een logo wit voor donkere achtergronden

Een logo voor de donkere modus is een versie van je logo die duidelijk zichtbaar blijft op zwart of donkergrijs: meestal helemaal wit, of in je merkkleuren met de donkere delen licht gemaakt. Zo'n logo maak je door de donkere delen van het logo wit te kleuren in een vectorprogramma, of door het logo naar de gratis tool Logo wit maken te slepen. Sla het daarna op als SVG of transparante PNG en gebruik het overal waar de achtergrond donker is.

Heb je eerst het logo van een bedrijf nodig? De gratis Logo Finder vindt het via het websiteadres en je downloadt het in wit, zwart of elke kleur, klaar voor een donkere achtergrond. De bronnen zijn gecontroleerd op 4 november 2026.

Wat is een logo voor de donkere modus?

Een logo voor de donkere modus is de versie van een logo in licht op donker, voor elke plek waar de achtergrond donker is: een website of app in de donkere modus, een zwart T-shirt, een matzwarte kaart of een donkere dia. Ontwerpers noemen het ook een diapositief logo. De vormen van het logo blijven gelijk, maar de delen die op zwart zouden verdwijnen, zoals zwarte of marineblauwe tekst, worden wit of een lichte tint.

Gebruikers kiezen een donker thema in de instellingen van hun besturingssysteem of browser, en websites lezen die keuze uit via de mediafeature prefers-color-scheme, die dient “om te detecteren of een gebruiker om een licht of donker kleurthema heeft gevraagd” (MDN). Een logo dat alleen voor witte achtergronden gemaakt is, ziet er op die pagina's niet goed uit. Daarom heeft een merk beide versies nodig.

Wanneer heb je een logo voor de donkere modus nodig?

Je hebt een logo voor de donkere modus nodig overal waar je logo op een donkere achtergrond staat: een website of app met een donker thema, een e-mail die in de donkere modus wordt geopend, een donkere dia, video of banner voor social media, en donkere producten zoals zwarte shirts, matzwarte kaarten, folie op een diepe kleur of witte inkt op een donkere tas. De tabel laat per achtergrond zien welke versie het best uitkomt.

Wil je een wit logo of een logo in folie op een matzwarte kaart zien voordat die gemaakt wordt? Sleep het naar de gratis creditcard-mockup in 3D, of klik in de Logo Finder op Probeer het op een kaart in 3D: met één klik wordt het logo goudfolie of spot-UV op een kaart op ware grootte, onder studiolicht. Een Proofscene-account bewaart één logo voor donkere en één voor lichte achtergronden, en met de knoppen Opslaan als mijn logo in de Logo Finder zet je elk van beide direct in de logo-instellingen van je bedrijf.

Hoe maak je een witte versie van een logo?

De snelste manier om een witte versie van een logo te maken, is elke vorm erin wit te kleuren. Dat kost één klik met een tool die logo's wit maakt, of ongeveer een minuut in een vectorprogramma. Kies de methode die past bij het bestand dat je hebt: een tool met één klik voor elk bestand, een ontwerpprogramma voor het originele vectorbestand, of één regel CSS voor een logo dat al op een webpagina staat.

1. Met één klik, gratis

Sleep je logo naar de tool Logo wit maken en kies “Wit”, “Zwart” of “Elke kleur”: het hele logo krijgt die ene kleur, op een transparante achtergrond. De tool leest PNG-, JPG-, WebP-, GIF-, AVIF-, SVG-, PDF-, AI- en PSD-bestanden, werkt in je browser zodat het bestand je apparaat nooit verlaat, en je downloadt het resultaat als SVG, PDF, EPS of transparante PNG tot 4096 px.

2. In Illustrator, Figma of Inkscape

Open het vectorbestand, selecteer alle vormen en zet de vulling op wit (#FFFFFF), en ook de lijnen als het logo die heeft. Wil je een fel accent in kleur houden? Selecteer dan alleen de donkere vormen. Bekijk het resultaat op een zwart tekengebied en sla daarna een SVG op voor schermen en een PDF of EPS voor drukwerk. In bestandsformaten voor logo's uitgelegd lees je welk bestand waarvoor dient.

3. Met CSS, op een website

Op een webpagina maak je met één regel code elke logoafbeelding wit. brightness(0) maakt een afbeelding “volledig zwart” (MDN) en invert(1) “past een volledige inversie toe” (MDN), waardoor dat zwart wit wordt. Omdat zo elke kleur wit wordt, werkt dit het best voor eenkleurige logo's.

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

Staat het logo als inline SVG in de pagina, zet de vormen dan op fill="currentColor". Het sleutelwoord currentColor “staat voor de waarde van de color-eigenschap van een element” (MDN), dus het logo neemt de tekstkleur van de omringende pagina over: lichte tekst in de donkere modus levert vanzelf een licht logo op.

Hoe maak je een logo wit in Canva, Photoshop of PowerPoint?

Met elk van deze apps maak je een logo in minder dan een minuut wit: Canva kleurt logo's om waarvan de kleuren bewerkbaar zijn, Photoshop maakt een logolaag wit met een kleurbedekking, en PowerPoint doet het met de helderheid van de afbeelding. Kan de app een logo niet omkleuren? Maak de witte versie dan één keer met de gratis tool Logo wit maken en voeg in plaats daarvan dat bestand in.

In Canva

Selecteer het logo in je ontwerp. Verschijnen de kleuren als kleurvakjes op de werkbalk? Klik dan op elk vakje en kies wit in het kleurenpaneel dat opent (helpcentrum van Canva). Volgens Canva kun je de kleuren van een element niet wijzigen als er geen kleurvakjes verschijnen, zoals bij een logo dat als PNG- of JPG-afbeelding is geüpload. Haal in dat geval de witte PNG of SVG binnen: open het tabblad “Uploads”, selecteer “Bestanden uploaden” en kies het bestand (helpcentrum van Canva).

In Photoshop

Zet het logo op een eigen laag met een transparante achtergrond en maak daarna elke pixel ervan wit: een witte kleurbedekking als laagstijl doet dat in één stap, en een aanpassing “Kleurtoon/verzadiging” met “Lichtheid” op het maximum geeft hetzelfde resultaat. Controleer het resultaat op een donkere laag eronder en exporteer daarna een PNG met transparantie, nooit een JPG, zodat het witte logo zijn transparante achtergrond houdt.

In PowerPoint

Selecteer het logo, open het tabblad “Afbeeldingsopmaak”, kies “Correcties” en daarna “Opties voor afbeeldingscorrecties”, en zet de schuifregelaar “Helderheid” op het maximum (Microsoft Ondersteuning). Een logo op een transparante PNG wordt wit en de achtergrond blijft doorzichtig, klaar voor een donkere dia. In Word staat dezelfde knop “Correcties” op het tabblad “Afbeeldingsopmaak”.

Wil je beweging? De gratis GIF-maker voor draaiende logo's maakt van de witte versie een draaiend logo op een donkere achtergrond, als GIF in een loop of als MP4.

Moet een logo voor de donkere modus puur wit zijn?

Een logo voor de donkere modus hoeft niet puur wit te zijn: helemaal wit is de veiligste keuze op foto's, video en drukke achtergronden, terwijl een tweekleurige versie die een felle merkkleur behoudt op effen zwart vaak herkenbaarder is als het merk. Waar het om gaat, is dat elk deel zichtbaar blijft: zwarte, marineblauwe en donkerbruine delen moeten licht worden, maar een fel accent zoals geel of lichtblauw mag blijven zoals het is.

De toegankelijkheidsnorm laat de keuze aan jou. WCAG zegt: “Tekst die onderdeel is van een logo of merknaam heeft geen contrasteis” (W3C). De contrastverhouding van 3:1 die dezelfde norm voor grote tekst vastlegt, is toch een verstandige ondergrens voor een logo dat mensen in één oogopslag moeten kunnen lezen. Drie controles helpen daarbij:

• Dunne lijnen en kleine tekst, zoals een slogan onder het beeldmerk, hebben het sterkste contrast nodig; wit is daarvoor de veilige keuze.
• Donkergrijze achtergronden, gebruikelijk in donkere thema's, liggen dichter bij middentonen dan zwart, dus controleer het logo op de echte achtergrond, niet alleen op puur zwart.
• Merkkleuren die de identiteit dragen, zoals een rood beeldmerk, kunnen vaak blijven; test elke kleur tegen de donkere achtergrond op het kleinste formaat van het logo.

In de Logo Finder kies je voor het voorbeeld van elk logo een achtergrond: zwart, grijs, wit, een dambordpatroon of de merkkleur. Zo beoordeel je elke versie op de ondergrond waarop die komt te staan.

Hoe toon je een logo voor de donkere modus op een website?

Om een logo voor de donkere modus op een website te tonen, geef je de browser beide bestanden in een <picture>-element en laat je de mediafeature prefers-color-scheme kiezen: bezoekers in de donkere modus krijgen de witte versie, alle anderen het origineel. GitHub ondersteunt hetzelfde patroon voor lichte en donkere afbeeldingen in README-bestanden (GitHub changelog). De code:

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

Voor andere opstellingen zijn er nog twee routes. Een site met een eigen schakelaar tussen een licht en een donker thema kan het logo wisselen met dezelfde CSS-klasse die het thema wisselt. En een SVG die met een <img>-tag is geplaatst, kan eigen stijlen met @media (prefers-color-scheme: dark) bevatten, die het kleurenschema volgen van de pagina waarin de SVG is ingesloten, zoals MDN uitlegt:

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

Hoe werken logo's voor de donkere modus in e-mail?

E-mailprogramma's gaan op drie verschillende manieren om met de donkere modus, dus een logo voor de donkere modus moet in e-mail alle drie doorstaan: sommige laten de kleuren met rust, sommige inverteren alleen lichte achtergronden en sommige inverteren alles. De gids van Litmus over de donkere modus voor e-mailmarketeers, met een overzicht van e-mailclients uit februari 2025, deelt de programma's zo in:

Litmus stelt drie oplossingen voor: gebruik transparante PNG's, voeg “een gloed of een effen witte lijn rond een icoon of logo” toe zodat een donker logo op elke achtergrond leesbaar blijft, en wissel naar de witte versie met @media (prefers-color-scheme: dark), wat volgens het overzicht van Litmus wordt ondersteund in Apple Mail op macOS en op iPhone en iPad (Litmus). Welk formaat een logo in een e-mailhandtekening heeft, lees je in logoformaten voor web, social media, e-mail en drukwerk.

Heeft een favicon een versie voor de donkere modus nodig?

Een favicon heeft een versie voor de donkere modus nodig als hij donker is op een transparante achtergrond, want browsertabbladen in een donker thema zijn ook donker. Een SVG-favicon kan eigen stijlen met @media (prefers-color-scheme: dark) bevatten en zo met het thema van kleur wisselen; volgens de gids van web.dev over adaptieve favicons werkt dat in browsers op basis van Chromium en in Firefox. Zet voor alle andere browsers een favicon.ico ernaast (web.dev).

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

De eenvoudigste favicon is in beide thema's leesbaar zonder te wisselen: het beeldmerk op een vierkant in de eigen, effen merkkleur. Het faviconpakket van de Logo Finder maakt van elk logo het ICO-bestand, PNG-iconen van 16 tot 512 px en het site.webmanifest. De favicon-downloader laat zien hoe andere sites het doen, en de gids met logoformaten geeft elk faviconformaat en waar het wordt gebruikt. Wil je eerst met de hand het logo van een bedrijf zoeken? Lees dan zo vind je het logo van een bedrijf.