Comment mettre un logo en blanc pour les fonds sombres

Un logo en mode sombre est une version de votre logo conçue pour rester bien lisible sur du noir ou du gris foncé : en général tout en blanc, ou aux couleurs de votre marque avec les parties sombres passées en clair. Pour le créer, recolorez en blanc les parties sombres du logo dans un logiciel de dessin vectoriel, ou déposez le logo dans l'outil gratuit Logo en blanc ; enregistrez-le ensuite en SVG ou en PNG transparent et utilisez-le partout où le fond est sombre.

Il vous faut d'abord le logo d'une entreprise ? Le Logo Finder gratuit le trouve à partir de l'adresse de son site web et le télécharge en blanc, en noir ou dans la couleur de votre choix, prêt pour un fond sombre. Sources vérifiées le 4 novembre 2026.

Qu'est-ce qu'un logo en mode sombre ?

Un logo en mode sombre est la version claire d'un logo, utilisée chaque fois que le fond est foncé : un site ou une application en mode sombre, un tee-shirt noir, une carte noire mate ou une diapositive sombre. Les graphistes l'appellent aussi logo en négatif. Il garde les formes du logo et remplace les parties qui disparaîtraient sur du noir, comme un texte noir ou bleu marine, par du blanc ou une teinte claire.

Les internautes choisissent un thème sombre dans les réglages de leur système d'exploitation ou de leur navigateur, et les sites web lisent ce choix grâce à la caractéristique média prefers-color-scheme, qui sert à « détecter si un utilisateur a demandé un thème clair ou sombre » (MDN). Un logo conçu uniquement pour les fonds blancs s'affiche mal sur ces pages : voilà pourquoi une marque a besoin des deux versions.

Quand faut-il un logo en mode sombre ?

Il vous faut un logo en mode sombre partout où votre logo se trouve sur un fond sombre : un site ou une application avec un thème sombre, un e-mail ouvert en mode sombre, une diapositive, une vidéo ou une bannière de réseau social sur fond sombre, ainsi que des produits foncés comme des tee-shirts noirs, des cartes noires mates, une dorure sur une couleur profonde ou une encre blanche sur un sac foncé. Le tableau associe chaque fond à la version qui s'y lit le mieux.

Pour voir un logo blanc ou en dorure sur une carte noire mate avant sa fabrication, déposez-le dans le générateur de mockup 3D de carte bancaire gratuit, ou cliquez sur Essayer sur une carte en 3D dans le Logo Finder : un clic transforme le logo en dorure or ou en vernis sélectif sur une carte à taille réelle, sous un éclairage de studio. Les comptes Proofscene gardent un logo pour les fonds sombres et un autre pour les fonds clairs, et le bouton Enregistrer comme mon logo du Logo Finder place l'un ou l'autre directement dans les paramètres de logo de votre entreprise.

Comment créer une version blanche d'un logo ?

Le moyen le plus rapide de créer une version blanche d'un logo est de recolorer chacune de ses formes en blanc : un clic dans un outil qui met les logos en blanc, ou environ une minute dans un logiciel de dessin vectoriel. Choisissez la méthode qui correspond à votre fichier : un outil en un clic pour tout fichier, un logiciel de création pour un original vectoriel ou une ligne de CSS pour un logo déjà présent sur une page web.

1. En un clic, gratuitement

Déposez votre logo dans l'outil Logo en blanc et choisissez « Blanc », « Noir » ou « Couleur au choix » : tout le logo prend cette seule couleur, sur fond transparent. Il accepte les fichiers PNG, JPG, WebP, GIF, AVIF, SVG, PDF, AI et PSD. Tout se passe dans votre navigateur, si bien que le fichier ne quitte jamais votre appareil, et le résultat se télécharge en SVG, PDF, EPS ou PNG transparent jusqu'à 4096 px.

2. Dans Illustrator, Figma ou Inkscape

Ouvrez le fichier vectoriel, sélectionnez toutes les formes et passez leur remplissage en blanc (#FFFFFF), ainsi que leurs contours si le logo en a. Pour garder un accent vif en couleur, sélectionnez plutôt les seules formes sombres. Vérifiez le résultat sur un plan de travail noir, puis enregistrez un SVG pour les écrans et un PDF ou un EPS pour l'impression. Pour savoir quel fichier utiliser où, consultez les formats de fichier de logo expliqués.

3. En CSS, sur un site web

Sur une page web, une seule ligne met n'importe quelle image de logo en blanc. brightness(0) rend une image « complètement noire » (MDN) et invert(1) « inverse complètement l'image » (MDN), ce qui transforme ce noir en blanc. Comme ce filtre passe toutes les couleurs en blanc, il convient surtout aux logos monochromes.

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

Pour un logo intégré directement en SVG dans la page, appliquez fill="currentColor" à ses formes. Le mot-clé currentColor « représente la valeur de la propriété color d'un élément » (MDN) : le logo prend donc la couleur du texte de la page qui l'entoure, et un texte clair en mode sombre entraîne un logo clair.

Comment mettre un logo en blanc dans Canva, Photoshop ou PowerPoint ?

Chacune de ces applications peut mettre un logo en blanc en moins d'une minute : Canva recolore les logos dont il peut modifier les couleurs, Photoshop passe un calque de logo en blanc avec une incrustation et PowerPoint y parvient en jouant sur la luminosité de l'image. Pour un logo que l'application ne peut pas recolorer, créez une fois pour toutes la version blanche avec l'outil gratuit Logo en blanc et insérez plutôt ce fichier.

Dans Canva

Sélectionnez le logo dans votre design. Si ses couleurs apparaissent sous forme de pastilles dans la barre d'outils, cliquez sur chaque pastille et choisissez le blanc dans le panneau « Couleur » qui s'ouvre (Centre d'aide Canva). Canva précise que lorsqu'aucune pastille de couleur n'apparaît, les couleurs de l'élément ne peuvent pas être modifiées, comme pour un logo importé en image PNG ou JPG. Dans ce cas, importez le PNG ou le SVG blanc : ouvrez l'onglet « Importations », sélectionnez « Importer des fichiers » et choisissez-le (Centre d'aide Canva).

Dans Photoshop

Placez le logo sur son propre calque, sur fond transparent, puis passez tous ses pixels en blanc : un style de calque « Incrustation couleur » en blanc le fait en une seule étape, et un réglage « Teinte/Saturation » avec la « Luminosité » au maximum donne le même résultat. Contrôlez-le sur un calque sombre placé dessous, puis exportez un PNG avec transparence, jamais un JPG, pour que le logo blanc garde son fond transparent.

Dans PowerPoint

Sélectionnez le logo, ouvrez l'onglet « Format de l'image », choisissez « Corrections », puis « Options de corrections d'image » et poussez le curseur « Luminosité » au maximum (Support Microsoft). Un logo en PNG transparent devient blanc tandis que son fond reste transparent, prêt pour une diapositive sombre. Le même bouton « Corrections » se trouve dans l'onglet « Format de l'image » de Word.

Pour l'animation, l'outil gratuit GIF de logo qui tourne fait tourner la version blanche sur un fond sombre, en GIF en boucle ou en MP4.

Un logo en mode sombre doit-il être entièrement blanc ?

Un logo en mode sombre n'a pas besoin d'être entièrement blanc : le tout blanc est le choix le plus sûr sur les photos, les vidéos et les fonds chargés, tandis qu'une version bicolore qui garde une couleur vive de la marque ressemble souvent davantage à la marque sur un noir uni. L'essentiel est que chaque partie reste visible : les parties noires, bleu marine et brun foncé doivent passer en clair, alors qu'un accent vif comme le jaune ou le bleu clair peut rester tel quel.

La norme d'accessibilité vous laisse le choix : les WCAG indiquent qu'il n'y a « aucune exigence de contraste pour le texte faisant partie d'un logo ou d'un nom de marque » (W3C). Le rapport de contraste de 3:1 que la même norme fixe pour les grands textes reste un seuil raisonnable pour un logo qui doit se lire d'un coup d'œil. Trois points à vérifier :

• Les traits fins et les petits textes, comme une accroche sous l'emblème, demandent le contraste le plus fort ; le blanc est pour eux le choix le plus sûr.
• Les fonds gris foncé, fréquents dans les thèmes sombres, sont plus proches des tons moyens que le noir : vérifiez donc le logo sur le vrai fond, pas seulement sur du noir pur.
• Les couleurs de la marque qui portent l'identité, comme un emblème rouge, peuvent souvent rester ; testez chacune sur le fond sombre, à la plus petite taille du logo.

Le Logo Finder vous permet d'afficher l'aperçu de tout logo sur du noir, du gris, du blanc, un damier ou la couleur de la marque : chaque version se juge ainsi sur le fond où elle sera posée.

Comment afficher un logo en mode sombre sur un site web ?

Pour afficher un logo en mode sombre sur un site web, donnez les deux fichiers au navigateur dans un élément <picture> et laissez la caractéristique média prefers-color-scheme choisir : les visiteurs en mode sombre reçoivent la version blanche, tous les autres l'original. GitHub prend en charge le même principe pour les images claires et sombres des fichiers README (journal des modifications de GitHub). Le code :

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

Deux autres méthodes conviennent à d'autres configurations. Un site doté de son propre bouton de thème clair et sombre peut changer de logo avec la classe CSS qui change déjà le thème. Et un SVG inséré avec une balise <img> peut contenir ses propres styles @media (prefers-color-scheme: dark), qui suivent le thème de couleurs de la page qui l'intègre, comme l'explique 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>

Comment fonctionnent les logos en mode sombre dans les e-mails ?

Les clients de messagerie gèrent le mode sombre de trois façons différentes, et un logo en mode sombre dans un e-mail doit résister aux trois : certains ne touchent pas aux couleurs, d'autres n'inversent que les fonds clairs, d'autres encore inversent tout. Le guide du mode sombre de Litmus destiné aux spécialistes de l'e-mail marketing, avec un tableau des clients de messagerie daté de février 2025, les classe ainsi :

Litmus propose trois solutions : utiliser des PNG transparents ; ajouter « un halo ou un contour blanc plein autour d'une icône ou d'un logo » pour qu'un logo sombre reste lisible sur tous les fonds ; basculer vers la version blanche avec @media (prefers-color-scheme: dark), que son tableau indique comme pris en charge par Apple Mail sur macOS, sur iPhone et sur iPad (Litmus). Les tailles de logo pour les signatures d'e-mail figurent dans tailles de logo pour le Web, les réseaux sociaux, l'e-mail et l'impression.

Un favicon a-t-il besoin d'une version pour le mode sombre ?

Un favicon a besoin d'une version pour le mode sombre quand il est sombre sur fond transparent, car les onglets du navigateur sont eux aussi sombres avec un thème sombre. Un favicon SVG peut contenir ses propres styles @media (prefers-color-scheme: dark) et changer de couleurs avec le thème, ce qui fonctionne dans les navigateurs basés sur Chromium et dans Firefox, selon le guide de web.dev sur les favicons adaptatifs ; gardez un favicon.ico à côté pour tous les autres navigateurs (web.dev).

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

Le favicon le plus simple se lit dans les deux thèmes sans rien changer : l'emblème sur un carré plein à la couleur de la marque. Le pack de favicons du Logo Finder crée l'ICO, les icônes PNG de 16 à 512 px et le site.webmanifest à partir de n'importe quel logo ; l'outil Récupérer un favicon montre comment font les autres sites ; le guide des tailles de logo indique chaque taille de favicon et son usage. Pour trouver d'abord vous-même le logo d'une entreprise, lisez comment trouver le logo d'une entreprise.