如何製作深色背景用的反白 Logo

深色模式 Logo 是專為黑色或深灰色背景製作、能保持清晰的 Logo 版本：通常是全白，或保留品牌色、只把深色部分改成淺色。製作方法：在向量編輯軟體中把 Logo 的深色部分改成白色，或把 Logo 拖放到免費的 Logo 反白工具；然後儲存為 SVG 或透明背景 PNG，用在任何深色背景上。

需要先找到公司的 Logo？免費的 Logo Finder 能從網址找到它，並下載白色、黑色或任選顏色的版本，直接用於深色背景。資料來源已於 2026 年 11 月 4 日查核。

什麼是深色模式 Logo？

深色模式 Logo 是 Logo 的深底淺色版本，只要背景是深色就會用到：深色模式的網站或 App、黑色 T 恤、霧面黑卡或深色簡報。設計師也稱它為反白 Logo。它保留 Logo 的形狀，把在黑色上會消失的部分，例如黑色或海軍藍的文字，換成白色或淺色。

使用者會在作業系統或瀏覽器設定中選擇深色主題，網站則透過 prefers-color-scheme 媒體特性讀取這個選擇，它的用途是「偵測使用者是否要求淺色或深色的色彩主題」（MDN）。只為白色背景製作的 Logo，在這些頁面上看起來就像壞掉了，所以品牌需要兩個版本。

什麼時候需要深色模式 Logo？

只要 Logo 放在深色背景上，就需要深色模式 Logo：使用深色主題的網站或 App、以深色模式開啟的電子郵件、深色的簡報、影片或社群橫幅，以及深色產品，例如黑色 T 恤、霧面黑卡、深色底上的燙金，或深色袋子上的白色油墨。下表為每種背景搭配最清楚的版本。

想在製作前看看白色或燙金 Logo 放在霧面黑卡上的樣子，可以把它拖放到免費的 3D 信用卡 Mockup 產生器，或在 Logo Finder 中按放到 3D 卡片上試試：只要點一下，就能在攝影棚燈光下，把 Logo 變成實際尺寸卡片上的燙金或局部上光。Proofscene 帳號可分別存放深色背景用與淺色背景用的 Logo，Logo Finder 的儲存為我的 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 Finder 可以把任何 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 class 來切換 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) 換上白色版本，Litmus 的對照表列出 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 Finder 的 Favicon 套件能用任何 Logo 產生 ICO、16 至 512 px 的 PNG 圖示與 site.webmanifest；Favicon 擷取工具能看到其他網站怎麼做；Logo 尺寸則列出每種 Favicon 尺寸及其用途。想先手動找到公司的 Logo，請見如何找到公司的 Logo。