Cómo convertir un logo a blanco para fondos oscuros

Un logo para modo oscuro es una versión de tu logo pensada para verse con claridad sobre negro o gris oscuro: normalmente todo en blanco, o con tus colores de marca y las partes oscuras pasadas a un tono claro. Para crearlo, cambia a blanco las partes oscuras del logo en un editor vectorial o suelta el logo en la herramienta gratuita para convertir un logo a blanco; después, guárdalo como SVG o PNG transparente y úsalo allí donde el fondo sea oscuro.

¿Primero necesitas el logo de una empresa? El Buscador de logos gratuito lo encuentra a partir de la dirección web y lo descarga en blanco, en negro o en cualquier color, listo para un fondo oscuro. Fuentes consultadas el 4 de noviembre de 2026.

¿Qué es un logo para modo oscuro?

Un logo para modo oscuro es la versión clara de un logo, la que se usa siempre que el fondo es oscuro: una web o una app en modo oscuro, una camiseta negra, una tarjeta negra mate o una diapositiva oscura. Los diseñadores también lo llaman logo en negativo. Conserva las formas del logo y cambia las partes que desaparecerían sobre negro, como un texto negro o azul marino, por blanco o un tono claro.

Quien prefiere un tema oscuro lo elige en la configuración de su sistema operativo o de su navegador, y las webs leen esa elección mediante la característica de medios prefers-color-scheme, que sirve “para detectar si el usuario ha solicitado un tema de color claro u oscuro” (MDN). Un logo hecho solo para fondos blancos se ve mal en esas páginas, y por eso una marca necesita las dos versiones.

¿Cuándo necesitas un logo para modo oscuro?

Necesitas un logo para modo oscuro en cualquier lugar donde tu logo vaya sobre un fondo oscuro: una web o una app con tema oscuro, un correo abierto en modo oscuro, una diapositiva, un video o un banner de redes sociales oscuros, y productos oscuros como camisetas negras, tarjetas negras mate, foil sobre un color intenso o tinta blanca sobre una bolsa oscura. La tabla indica qué versión se lee mejor sobre cada fondo.

Para ver un logo blanco o en foil sobre una tarjeta negra mate antes de fabricarla, suéltalo en el generador gratuito de mockups 3D de tarjetas de crédito o haz clic en Probarlo en una tarjeta en 3D en el Buscador de logos: con un clic, el logo se convierte en foil dorado o UV selectivo sobre una tarjeta a tamaño real bajo luz de estudio. Las cuentas de Proofscene guardan un logo para fondos oscuros y otro para fondos claros, y los botones Guardar como mi logo del Buscador de logos llevan cualquiera de los dos directamente a la configuración de logo de tu empresa.

¿Cómo crear la versión en blanco de un logo?

La forma más rápida de crear la versión en blanco de un logo es pasar a blanco todas sus formas, algo que lleva un clic en una herramienta para convertir logos a blanco o alrededor de un minuto en un editor vectorial. Elige el método que corresponda al archivo que tienes: una herramienta de un clic para cualquier archivo, un programa de diseño para un original vectorial o una línea de CSS para un logo que ya está en una página web.

1. Con un clic, gratis

Suelta tu logo en la herramienta para convertir un logo a blanco y elige Blanco, Negro o Cualquier color: todo el logo pasa a ese único color sobre un fondo transparente. Acepta archivos PNG, JPG, WebP, GIF, AVIF, SVG, PDF, AI y PSD, funciona dentro de tu navegador, así que el archivo nunca sale de tu dispositivo, y el resultado se descarga como SVG, PDF, EPS o PNG transparente de hasta 4096 px.

2. En Illustrator, Figma o Inkscape

Abre el archivo vectorial, selecciona todas las formas y pon su relleno en blanco (#FFFFFF), y también sus trazos si el logo los tiene. Para mantener en color un detalle de tono vivo, selecciona solo las formas oscuras. Mira el resultado sobre una mesa de trabajo negra y guarda después un SVG para pantallas y un PDF o EPS para impresión. La guía formatos de archivo de logo, explicados indica qué archivo usar en cada caso.

3. Con CSS, en una web

En una página web, una sola línea convierte a blanco cualquier imagen de logo. brightness(0) deja una imagen “completamente negra” (MDN), y después invert(1) “aplica una inversión completa” (MDN), lo que convierte ese negro en blanco. Como pasa todos los colores a blanco, funciona mejor con logos de un solo color.

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

En un logo SVG insertado directamente en el HTML, aplica fill="currentColor" a sus formas. La palabra clave currentColor “representa el valor de la propiedad color de un elemento” (MDN), así que el logo toma el color del texto de la página que lo rodea: si el texto es claro en modo oscuro, el logo también lo es.

¿Cómo convertir un logo a blanco en Canva, Photoshop o PowerPoint?

Cada una de estas apps puede convertir un logo a blanco en menos de un minuto: Canva cambia el color de los logos cuyos colores puede editar, Photoshop pasa a blanco una capa de logo con una superposición y PowerPoint lo hace con el brillo de la imagen. Si la app no puede cambiar el color de un logo, crea una vez la versión en blanco con la herramienta gratuita para convertir un logo a blanco e inserta ese archivo en su lugar.

En Canva

Selecciona el logo en tu diseño. Si sus colores aparecen como cuadros de color en la barra de herramientas, haz clic en cada cuadro y elige el blanco en el panel Color que se abre (Centro de ayuda de Canva). Canva indica que, cuando no aparece ningún cuadro de color, no se pueden cambiar los colores del elemento, como ocurre con un logo subido como imagen PNG o JPG. En esos casos, sube el PNG o el SVG en blanco: abre la pestaña Subidos, selecciona Subir archivos y elígelo (Centro de ayuda de Canva).

En Photoshop

Coloca el logo en su propia capa con fondo transparente y pasa a blanco todos sus píxeles: un estilo de capa Superposición de colores en blanco lo hace en un solo paso, y un ajuste de Tono/saturación con la Luminosidad al máximo da el mismo resultado. Compruébalo sobre una capa oscura colocada debajo y exporta después un PNG con transparencia, nunca un JPG, para que el logo blanco conserve su fondo transparente.

En PowerPoint

Selecciona el logo, abre la pestaña Formato de imagen, elige Correcciones y después Opciones de corrección de imagen, y lleva el control deslizante Brillo hasta el máximo (Soporte técnico de Microsoft). Un logo en PNG transparente se vuelve blanco y su fondo sigue transparente, listo para una diapositiva oscura. En Word, el mismo botón Correcciones está en la pestaña Formato de imagen.

Si quieres movimiento, el creador gratuito de GIF de logo giratorio convierte la versión en blanco en un logo que gira sobre un fondo oscuro, como GIF en bucle o como MP4.

¿Un logo para modo oscuro tiene que ser blanco puro?

Un logo para modo oscuro no tiene por qué ser blanco puro: todo en blanco es la opción más segura sobre fotos, video y fondos recargados, mientras que una versión bicolor que conserva un color de marca vivo suele parecerse más a la marca sobre negro liso. Lo importante es que todas las partes sigan siendo visibles: las partes negras, azul marino o marrón oscuro deben pasar a un tono claro, y un detalle de color vivo, como un amarillo o un azul claro, puede quedarse como está.

La norma de accesibilidad deja la decisión en tus manos: las WCAG indican que “el texto que forma parte de un logotipo o nombre de marca no tiene requisitos de contraste” (W3C). Aun así, la relación de contraste de 3:1 que la misma norma fija para el texto grande es un mínimo sensato para un logo que hay que leer de un vistazo. Conviene hacer tres comprobaciones:

• Las líneas finas y el texto pequeño, como un eslogan bajo el símbolo, necesitan el máximo contraste; para ellos, el blanco es la opción segura.
• Los fondos gris oscuro, habituales en los temas oscuros, están más cerca de los tonos medios que el negro, así que revisa el logo sobre el fondo real y no solo sobre negro puro.
• Los colores de marca que definen la identidad, como un símbolo rojo, a menudo pueden mantenerse; comprueba cada uno sobre el fondo oscuro con el logo a su tamaño más pequeño.

El Buscador de logos te permite cambiar el fondo de la vista previa de cualquier logo entre negro, gris, blanco, cuadros y el color de marca, para juzgar cada versión sobre el fondo en el que se va a usar.

¿Cómo mostrar un logo para modo oscuro en una web?

Para mostrar un logo para modo oscuro en una web, dale al navegador los dos archivos en un elemento <picture> y deja que elija la característica de medios prefers-color-scheme: quien navega en modo oscuro ve la versión en blanco y el resto ve el original. GitHub admite el mismo patrón para imágenes claras y oscuras en los archivos README (registro de cambios de GitHub). El 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 otras configuraciones hay dos opciones más. Una web con su propio selector de tema claro y oscuro puede cambiar el logo con la misma clase CSS que cambia el tema. Y un SVG colocado con una etiqueta <img> puede llevar sus propios estilos @media (prefers-color-scheme: dark), que siguen el esquema de color de la página que lo inserta, como explica 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>

¿Cómo funcionan los logos para modo oscuro en el correo electrónico?

Los programas de correo tratan el modo oscuro de tres maneras distintas, así que un logo para modo oscuro en un correo tiene que funcionar en las tres: unos dejan los colores como están, otros invierten solo los fondos claros y otros lo invierten todo. La guía de Litmus sobre el modo oscuro para profesionales del marketing por correo electrónico, con una tabla de clientes de correo fechada en febrero de 2025, agrupa los programas así:

Litmus propone tres soluciones: usar PNG transparentes, agregar “un resplandor o un trazo blanco sólido alrededor de un icono o logo” para que un logo oscuro se lea sobre cualquier fondo, y cambiar a la versión en blanco con @media (prefers-color-scheme: dark), que según su tabla funciona en Apple Mail en macOS y en iPhone y iPad (Litmus). Los tamaños del logo para firmas de correo están en tamaños de logo para web, redes sociales, correo e impresión.

¿Un favicon necesita una versión para modo oscuro?

Un favicon necesita una versión para modo oscuro cuando es oscuro sobre un fondo transparente, porque las pestañas del navegador con un tema oscuro también son oscuras. Un favicon SVG puede llevar sus propios estilos @media (prefers-color-scheme: dark) y cambiar de color con el tema, algo que, según la guía de web.dev sobre favicons adaptables, funciona en los navegadores basados en Chromium y en Firefox; deja un favicon.ico junto a él para todos los demás navegadores (web.dev).

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

El favicon más sencillo se lee en los dos temas sin ningún cambio: el símbolo sobre un cuadrado de su propio color de marca sólido. El paquete de favicons del Buscador de logos crea el ICO, los iconos PNG de 16 a 512 px y el site.webmanifest a partir de cualquier logo; la herramienta para descargar favicons muestra cómo lo hacen otras webs, y tamaños de logo recoge cada tamaño de favicon y dónde se usa. Para buscar primero a mano el logo de una empresa, consulta cómo encontrar el logo de una empresa.