Como deixar o logo branco para fundos escuros

Um logo para modo escuro é uma versão do seu logo feita para continuar bem visível sobre preto ou cinza-escuro: em geral toda branca, ou com as cores da marca e as partes escuras clareadas. Para criar essa versão, troque para branco a cor das partes escuras do logo em um editor vetorial ou arraste o logo até a ferramenta grátis para deixar o logo branco; depois, salve em SVG ou PNG transparente e use-a sempre que o fundo for escuro.

Precisa primeiro do logo de uma empresa? O Logo Finder grátis encontra o logo pelo endereço do site e entrega a versão branca, preta ou em qualquer cor, pronta para um fundo escuro. Fontes conferidas em 4 de novembro de 2026.

O que é um logo para modo escuro?

O logo para modo escuro é a versão de um logo em tons claros sobre fundo escuro, usada sempre que o fundo é escuro: um site ou app no modo escuro, uma camiseta preta, um cartão preto fosco ou um slide escuro. Os designers também a chamam de versão negativa do logo. Ela mantém as formas do logo e troca as partes que sumiriam no preto, como textos pretos ou azul-marinho, por branco ou por um tom claro.

As pessoas escolhem um tema escuro nas configurações do sistema operacional ou do navegador, e os sites leem essa escolha pela característica de mídia prefers-color-scheme, usada “para detectar se o usuário solicitou temas de cor claros ou escuros” (MDN). Um logo feito só para fundos brancos parece quebrado nessas páginas, e é por isso que uma marca precisa das duas versões.

Quando você precisa de um logo para modo escuro?

Você precisa de um logo para modo escuro sempre que o seu logo aparece sobre um fundo escuro: um site ou app com tema escuro, um e-mail aberto no modo escuro, slides, vídeos ou banners de redes sociais escuros e produtos escuros, como camisetas pretas, cartões pretos foscos, hot stamping sobre uma cor fechada ou tinta branca em uma sacola escura. A tabela indica, para cada fundo, a versão que fica mais legível.

Para ver um logo branco ou em hot stamping em um cartão preto fosco antes da produção, arraste o logo para o gerador grátis de mockup 3D de cartão de crédito ou clique em Testar em um cartão 3D no Logo Finder: um clique transforma o logo em hot stamping dourado ou verniz UV localizado em um cartão em tamanho real, sob luz de estúdio. As contas do Proofscene guardam um logo para fundos escuros e outro para fundos claros, e os botões Salvar como meu logo do Logo Finder colocam qualquer um dos dois direto nas configurações de logo da sua empresa.

Como criar a versão branca de um logo?

O jeito mais rápido de criar a versão branca de um logo é deixar brancas todas as formas dele, o que leva um clique em uma ferramenta que deixa o logo branco ou cerca de um minuto em um editor vetorial. Escolha o método de acordo com o arquivo que você tem: uma ferramenta de um clique para qualquer arquivo, um programa de design para o vetor original ou uma linha de CSS para um logo que já está em uma página da web.

1. Em um clique, grátis

Arraste o seu logo até a ferramenta para deixar o logo branco e escolha Branco, Preto ou Qualquer cor: o logo inteiro fica nessa única cor, sobre fundo transparente. A ferramenta aceita arquivos PNG, JPG, WebP, GIF, AVIF, SVG, PDF, AI e PSD e funciona dentro do seu navegador, então o arquivo nunca sai do seu dispositivo. Você baixa o resultado em SVG, PDF, EPS ou PNG transparente de até 4096 px.

2. No Illustrator, no Figma ou no Inkscape

Abra o arquivo vetorial, selecione todas as formas e defina o preenchimento como branco (#FFFFFF), e o traçado também, se o logo tiver. Para manter colorido um detalhe de cor viva, selecione só as formas escuras. Confira o resultado em uma prancheta preta e depois salve um SVG para telas e um PDF ou EPS para impressão. O guia entenda os formatos de arquivo de logo mostra qual arquivo usar em cada caso.

3. Com CSS, em um site

Em uma página da web, uma linha de CSS deixa branca qualquer imagem de logo. brightness(0) deixa a imagem “completamente preta” (MDN) e invert(1) “aplica uma inversão completa” (MDN), o que transforma esse preto em branco. Como deixa todas as cores brancas, funciona melhor em logos de uma cor só.

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

Para um logo inserido no código como SVG inline, aplique fill="currentColor" às formas. A palavra-chave currentColor “representa o valor da propriedade color de um elemento” (MDN), então o logo assume a cor do texto da página ao redor: texto claro no modo escuro traz junto um logo claro.

Como deixar o logo branco no Canva, no Photoshop ou no PowerPoint?

Cada um desses apps deixa um logo branco em menos de um minuto: o Canva muda a cor dos logos cujas cores ele consegue editar, o Photoshop deixa branca a camada do logo com uma sobreposição e o PowerPoint faz isso pelo brilho da imagem. Para um logo cuja cor o app não consegue mudar, crie a versão branca uma vez na ferramenta grátis para deixar o logo branco e insira esse arquivo no lugar.

No Canva

Selecione o logo no seu design. Se as cores dele aparecerem como quadrados de cor na barra de ferramentas, clique em cada quadrado e escolha branco no painel de cores que se abre (Central de Ajuda do Canva). O Canva avisa que, quando nenhum quadrado de cor aparece, as cores do elemento não podem ser alteradas, como acontece com um logo enviado como imagem PNG ou JPG. Nesses casos, importe o PNG ou o SVG branco: abra a aba Uploads, selecione Fazer upload de arquivos e escolha o arquivo (Central de Ajuda do Canva).

No Photoshop

Coloque o logo em uma camada própria, com fundo transparente, e deixe branco cada pixel dele: um estilo de camada de sobreposição de cor branca faz isso em um passo, e um ajuste de Matiz/Saturação com a Luminosidade no máximo dá o mesmo resultado. Confira sobre uma camada escura por baixo e depois exporte um PNG com transparência, nunca um JPG, para que o logo branco mantenha o fundo transparente.

No PowerPoint

Selecione o logo, abra a guia Formato da Imagem, escolha Correções e depois Opções de Correções de Imagem (Picture Corrections Options) e leve o controle Brilho até o máximo (Suporte da Microsoft). Um logo em PNG transparente fica branco e o fundo continua transparente, pronto para um slide escuro. O mesmo botão Correções fica na guia Formato da Imagem do Word.

Para dar movimento, o criador de GIF de logo girando grátis transforma a versão branca em um logo que gira sobre fundo escuro, em GIF em loop ou MP4.

O logo para modo escuro deve ser branco puro?

O logo para modo escuro não precisa ser branco puro: a versão toda branca é a escolha mais segura em fotos, vídeos e fundos carregados, enquanto uma versão em dois tons que mantém uma cor viva da marca muitas vezes é mais fiel à identidade visual sobre preto liso. O que importa é que todas as partes continuem visíveis: as partes em preto, azul-marinho e marrom-escuro precisam ficar claras, enquanto um detalhe em cor viva, como amarelo ou azul-claro, pode ficar como está.

A norma de acessibilidade deixa a escolha com você: as diretrizes WCAG dizem que “o texto que faz parte de um logotipo ou nome de marca não tem requisito de contraste” (W3C). Ainda assim, a relação de contraste de 3:1 que a mesma norma define para textos grandes é um mínimo sensato para um logo que as pessoas precisam ler de relance. Três verificações ajudam:

• Linhas finas e textos pequenos, como um slogan embaixo do símbolo, pedem o contraste mais forte; para eles, o branco é a escolha segura.
• Fundos em cinza-escuro, comuns em temas escuros, ficam mais próximos das cores de tom médio do que o preto, então confira o logo no fundo real, e não só no preto puro.
• Cores da marca que carregam a identidade, como um símbolo vermelho, muitas vezes podem ser mantidas; teste cada uma sobre o fundo escuro, no menor tamanho em que o logo aparece.

O Logo Finder permite alternar a prévia de qualquer logo entre preto, cinza, branco, xadrez e a cor da marca, para que cada versão seja avaliada sobre o fundo em que vai ficar.

Como mostrar um logo para modo escuro em um site?

Para mostrar um logo para modo escuro em um site, entregue os dois arquivos ao navegador em um elemento <picture> e deixe a característica de mídia prefers-color-scheme escolher: quem usa o modo escuro vê a versão branca, e todos os outros veem o original. O GitHub aceita o mesmo padrão para imagens claras e escuras em arquivos README (changelog do GitHub). O código:

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

Para outras configurações, há mais dois caminhos. Um site com um seletor próprio de tema claro e escuro pode trocar o logo com a mesma classe CSS que troca o tema. E um SVG inserido com uma tag <img> pode ter os próprios estilos @media (prefers-color-scheme: dark), que seguem o esquema de cores da página que o incorpora, como explica o 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>

Como funcionam os logos para modo escuro no e-mail?

Os programas de e-mail lidam com o modo escuro de três formas diferentes, então um logo para modo escuro no e-mail precisa resistir às três: alguns mantêm as cores, alguns invertem só os fundos claros e outros invertem tudo. O guia de modo escuro da Litmus para profissionais de e-mail marketing, com uma tabela de clientes de e-mail datada de fevereiro de 2025, agrupa os programas assim:

A Litmus sugere três soluções: usar PNGs transparentes, adicionar “um brilho ou um contorno branco sólido em volta de um ícone ou logo” para que um logo escuro fique legível em qualquer fundo e trocar pela versão branca com @media (prefers-color-scheme: dark), recurso que a tabela do guia indica como compatível com o Apple Mail no macOS, no iPhone e no iPad (Litmus). Os tamanhos de logo para assinaturas de e-mail estão em tamanhos de logo para web, redes sociais, e-mail e impressão.

O favicon precisa de uma versão para modo escuro?

O favicon precisa de uma versão para modo escuro quando é escuro sobre fundo transparente, porque as abas do navegador em tema escuro também são escuras. Um favicon em SVG pode ter os próprios estilos @media (prefers-color-scheme: dark) e mudar de cor com o tema, o que, segundo o guia de favicons adaptáveis do web.dev, funciona em navegadores baseados no Chromium e no Firefox; mantenha um favicon.ico ao lado dele para todos os outros navegadores (web.dev).

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

O favicon mais simples fica legível nos dois temas sem nenhuma troca: o símbolo sobre um quadrado na cor sólida da própria marca. O pacote de favicons do Logo Finder gera o ICO, ícones PNG de 16 a 512 px e o site.webmanifest a partir de qualquer logo, o extrator de favicon mostra como outros sites fazem os deles e o guia de tamanhos de logo lista cada tamanho de favicon e onde ele é usado. Para encontrar primeiro o logo de uma empresa manualmente, veja como encontrar o logo de uma empresa.