如何把 Logo 改成白色，用于深色背景

深色模式 Logo 是专为在黑色或深灰色背景上保持清晰而制作的 Logo 版本：通常是全白，或保留品牌色、只把深色部分改成浅色。制作方法：在矢量编辑软件中把 Logo 的深色部分改成白色，或者把 Logo 拖进免费的 Logo 改色工具；然后存为 SVG 或透明 PNG，用在所有深色背景上。

需要先找到公司的 Logo？免费的 Logo 查找器能根据网址找到它，并以白色、黑色或任意颜色下载，直接用于深色背景。资料来源已于 2026年11月4日核对。

什么是深色模式 Logo？

深色模式 Logo 是 Logo 的深底浅色版本，凡是背景偏深的地方都会用到：深色模式下的网站或应用、黑色 T 恤、哑光黑卡片或深色幻灯片。设计师也称之为反白 Logo。它保留 Logo 的形状，只把在黑色上会消失的部分，例如黑色或藏青色文字，换成白色或浅色。

用户会在操作系统或浏览器设置中选择深色主题，网站则通过 prefers-color-scheme 媒体特性读取这一选择，它的作用是“检测用户是否请求了浅色或深色主题”（MDN）。只为白色背景设计的 Logo，在这些页面上看起来就像坏了一样，所以品牌需要两个版本。

什么时候需要深色模式 Logo？

只要 Logo 放在深色背景上，就需要深色模式 Logo：采用深色主题的网站或应用、在深色模式下打开的邮件、深色的幻灯片、视频或社交媒体横幅，以及深色产品，例如黑色 T 恤、哑光黑卡片、深色底上的烫金，或深色包袋上的白色油墨。下表为每种背景匹配了效果最好的版本。

想在制作之前就看到白色或烫金 Logo 放在哑光黑卡片上的效果，可以把它拖进免费的 3D 银行卡样机生成器，或在 Logo 查找器中点击在 3D 卡片上试试：一键就能把 Logo 变成实际尺寸卡片上的烫金或局部 UV，在影棚灯光下查看。Proofscene 账户可分别保存一个用于深色背景、一个用于浅色背景的 Logo，Logo 查找器中的保存为我的 Logo按钮可以把其中任何一个直接存入您公司的 Logo 设置。

如何制作 Logo 的白色版本？

制作 Logo 白色版本最快的方法，是把其中每个形状都改成白色：用 Logo 改色工具只需点一下，用矢量编辑软件大约一分钟。根据手头的文件选择方法：任何文件都可以用一键工具，矢量源文件用设计软件，已经放在网页上的 Logo 则用一行 CSS。

1. 一键免费完成

把 Logo 拖进 Logo 改色工具，选择“白色”“黑色”或“任意颜色”：整个 Logo 就会在透明背景上变成这一种颜色。它支持 PNG、JPG、WebP、GIF、AVIF、SVG、PDF、AI 和 PSD 文件，在浏览器中运行，文件不会离开您的设备，结果可下载为 SVG、PDF、EPS 或最高 4096 px 的透明 PNG。

2. 在 Illustrator、Figma 或 Inkscape 中

打开矢量文件，选中所有形状，把填色设为白色（#FFFFFF）；如果 Logo 有描边，也一并设为白色。想保留某个亮色点缀，就只选中深色形状。在黑色画板上查看效果，然后存一份用于屏幕的 SVG，以及用于印刷的 PDF 或 EPS。Logo 文件格式详解介绍了每种文件的用途。

3. 在网站上用 CSS

在网页上，一行代码就能把任何 Logo 图片变成白色。brightness(0) 会让图片变成“全黑”（MDN），invert(1) 则“进行完全反转”（MDN），把黑色变成白色。由于它会把所有颜色都变成白色，最适合单色 Logo。

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

对于以内联 SVG 形式放置的 Logo，把它的形状设为 fill="currentColor"。currentColor 关键字“表示元素 color 属性的值”（MDN），所以 Logo 会采用周围页面的文字颜色：深色模式下文字变浅，Logo 也随之变浅。

如何在 Canva、Photoshop 或 PowerPoint 中把 Logo 改成白色？

这几款软件都能在一分钟内把 Logo 改成白色：Canva 可以给颜色可编辑的 Logo 改色，Photoshop 用叠加效果把 Logo 图层变成白色，PowerPoint 则通过调整图片亮度来实现。如果软件无法给某个 Logo 改色，就用免费的 Logo 改色工具做一次白色版本，再插入那个文件。

在 Canva 中

在设计中选中 Logo。如果它的颜色以色块形式显示在工具栏上，就逐个点击色块，在弹出的“颜色”面板中选择白色（Canva 帮助中心）。Canva 提到，如果没有显示色块，就说明该元素的颜色无法更改，以 PNG 或 JPG 图片形式上传的 Logo 就是这样。这时，把白色的 PNG 或 SVG 导入即可：打开“上传”选项卡，选择“上传文件”，然后选中该文件（Canva 帮助中心）。

在 Photoshop 中

把 Logo 放在单独的透明背景图层上，然后把它的每个像素都变成白色：用白色的“颜色叠加”图层样式一步就能完成，用“色相/饱和度”调整并把“明度”调到最高也能得到同样的效果。在下方放一个深色图层检查效果，然后导出带透明度的 PNG，千万不要导出 JPG，这样白色 Logo 才能保留透明背景。

在 PowerPoint 中

选中 Logo，打开“图片格式”选项卡，依次选择“更正 > 图片校正选项”，然后把“亮度”滑块拉到最高（Microsoft 支持）。透明 PNG 上的 Logo 会变成白色，背景依然透明，可直接用于深色幻灯片。Word 的“图片格式”选项卡上也有同样的“更正”按钮。

想让 Logo 动起来，免费的旋转 Logo GIF工具能把白色版本做成深色背景上的旋转 Logo，导出循环 GIF 或 MP4。

深色模式 Logo 应该是纯白的吗？

深色模式 Logo 不一定非得是纯白：在照片、视频和杂乱的背景上，全白是最稳妥的选择；而在纯黑背景上，保留明亮品牌色的双色版本往往更有品牌感。关键是每个部分都要清晰可见：黑色、藏青色和深棕色部分必须改成浅色，而黄色或浅蓝色这类明亮的点缀色可以保持原样。

无障碍标准把选择权交给了您：WCAG 规定“作为 Logo 或品牌名称一部分的文字，没有对比度要求”（W3C）。不过，同一标准为大号文字设定的 3:1 对比度，对于需要让人一眼认出的 Logo 来说，仍是合理的底线。以下三项检查很有帮助：

• 细线和小字，例如标志下方的标语，需要最强的对比度；用白色最稳妥。
• 深灰色背景在深色主题中很常见，它比黑色更接近中间色调，所以要在实际背景上检查 Logo，而不只是在纯黑上看。
• 承载品牌识别的品牌色，例如红色标志，往往可以保留；在 Logo 的最小尺寸下，把每种颜色放到深色背景上测试一下。

Logo 查找器可以把任意 Logo 的预览背景在黑色、灰色、白色、棋盘格和品牌色之间切换，让每个版本都在它实际要放的背景上接受检验。

如何在网站上显示深色模式 Logo？

要在网站上显示深色模式 Logo，就在 <picture> 元素中把两个文件都提供给浏览器，让 prefers-color-scheme 媒体特性来选择：使用深色模式的访客看到白色版本，其他人看到原版。GitHub 也支持在 README 文件中用同样的方式切换浅色和深色图片（GitHub 更新日志）。代码如下：

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

另外两种方式适用于其他情况。如果网站自带浅色和深色主题切换，可以用切换主题的同一个 CSS 类来切换 Logo。而用 <img> 标签放置的 SVG 可以带有自己的 @media (prefers-color-scheme: dark) 样式，这些样式会跟随嵌入它的页面的配色方案，正如 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>

深色模式 Logo 在邮件中如何显示？

邮件程序处理深色模式的方式有三种，所以邮件中的深色模式 Logo 要经得起这三种考验：有的不改颜色，有的只反转浅色背景，有的则全部反转。Litmus 面向邮件营销人员的深色模式指南（其中的客户端对照表日期为 2025年2月）把这些程序归为以下几类：

Litmus 建议了三种解决办法：使用透明 PNG；在“图标或 Logo 周围添加外发光或白色实线描边”，让深色 Logo 在任何背景上都能看清；以及用 @media (prefers-color-scheme: dark) 换上白色版本，据其对照表，macOS 以及 iPhone 和 iPad 上的 Apple Mail 都支持这种方式（Litmus）。邮件签名的 Logo 尺寸见网页、社交媒体、邮件和印刷的 Logo 尺寸。

favicon 需要深色模式版本吗？

如果 favicon 是透明背景上的深色图标，就需要深色模式版本，因为深色主题下的浏览器标签页也是深色的。SVG favicon 可以带有自己的 @media (prefers-color-scheme: dark) 样式，随主题切换颜色；web.dev 的自适应 favicon 指南指出，这在基于 Chromium 的浏览器和 Firefox 中都有效；另外再放一个 favicon.ico，供其他所有浏览器使用（web.dev）。

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

最简单的 favicon 无需任何切换，在两种主题下都清晰可见：把标志放在一个纯品牌色的方块上。Logo 查找器的 favicon 套件可以用任意 Logo 生成 ICO、16 到 512 px 的 PNG 图标和 site.webmanifest；网站图标提取工具能让您看看其他网站是怎么做的；Logo 尺寸列出了每种 favicon 尺寸及其用途。想先手动查找公司 Logo，请参阅如何查找公司 Logo。