網站 Logo 設計與配色實戰：用 Canva 製作標誌並打造高質感品牌色彩
網站 Logo 設計配色的核心順序，是先把 Logo 的主視覺顏色定下來，再讓網站配色與佈景主題色票都圍繞這個主色去推深淺、抓層次。原因很實際：Logo 一旦印上名片、傳單、社群大…
網站 Logo 設計配色的核心順序，是先把 Logo 的主視覺顏色定下來，再讓網站配色與佈景主題色票都圍繞這個主色去推深淺、抓層次。原因很實際：Logo 一旦印上名片、傳單、社群大頭貼，事後更動的牽連成本遠高於改一個按鈕顏色，所以整套配色反過來配合 Logo，才不會發生換一個顏色整站跟著崩的連鎖修改。根據 Reboot 一項常被引用的色彩心理學研究，一致的品牌色彩可讓品牌辨識度提升約 80%，把主色從 Logo 直接取、再回頭推網站色票，正是守住這份一致性最務實的第一步。
重點先看： Logo 主色、延伸色票、佈景主題色票一開始就要當成同一個色彩決策一起定；色系守得住，沒有設計底子的人也能做出不顯雜亂的網站。一致的品牌色彩可讓辨識度提升約 80%（根據 Reboot 常被引用的色彩心理學研究）。
網站 Logo 與配色，到底要先做哪一個
答案很明確：先 Logo、後配色。Logo 是品牌最強的記憶點，一旦印上名片、傳單、社群大頭貼，事後修改的牽連成本遠高於改一個按鈕顏色，所以它必須最早拍板。配色、佈景主題的色票都從 Logo 的主色往上下推色階，才不會發生「換一個顏色、整站跟著崩」的連鎖修改。把 Logo、配色、佈景主題當成同一個色彩決策一起處理，是新手最快做出高質感網站的關鍵。
我自己在帶新手站長架站的時候，看過太多人反過來做。他們先挑了一組很漂亮的網站模板配色，等到做完 Logo 才發現 Logo 的藍和模板的藍根本不是同一個藍，整站顏色打架，回頭改模板又要動到一堆頁面。問題不在審美，問題在順序。如果你還沒決定要不要自己架站，可以先看 WordPress 自架網站費用解析，或用 WordPress 架站新手五步驟 把網站先跑起來，再回頭處理 Logo。如果連網站都還沒有卻想先做 SEO，沒有網站也能開始做 SEO 的做法 幫你把起步路徑理清楚。
定下 Logo 主色之後，正確的做法是守住同一個色相、只讓明度往上往下推。比方說 Logo 是深藍，標題可以用深藍、背景用淺藍、按鈕用更深的靛藍，整站色彩有層次又不互相打架。這時候佈景主題的預設色票也要同步換成 Logo 主色，避免頁面配色和 Logo 對不上。如果你還在挑主題，WordPress 佈景主題免費付費比較 和 WordPress 佈景主題安裝教學 可以幫你縮短選擇時間。對色彩理論陌生的話，先讀一遍 色彩學對比色互補色配色技巧 和 色相環三原色到實戰配色，後面排色階會更有感覺。
講了這麼多，有人會問：萬一 Logo 是黑白素色風格呢？這時候不要硬湊顏色。黑白 Logo 的優點是中性、百搭，缺點是它無法提供主色直覺，所以你要改用配色工具從 Logo 既有元素反推色票，避免憑感覺隨手抓一個顏色硬套上去。這個情境我們後面用 Coolors 解。如果你連 Logo 都還沒生出來，先別煩惱配色，免費 Logo 設計工具推薦清單 和 AI Logo 產生器免費付費比較 能幫你快速起步，經典品牌 Logo 設計案例分析 則提供靈感方向。
用 Canva 做網站 Logo
對不會設計的新手來說，Canva 是兼顧成本與中文字體支援的首選。它提供免費方案、內建大量標誌模板，而且原生支援思源黑體、王漢宗系列等中文字型，免費版即可下載 PNG [來源：〈Canva 定價與功能〉〈https://www.canva.com/pricing/〉〈2026〉]。多數國外 Logo 製作平台不支援中文字體，選工具時第一條件不是功能多寡，而是能不能正常顯示中文；選錯工具等於設計做完才發現字體變方塊，前面全白做。
在 Canva 找到「標誌」分類、挑一個模板套用後，關鍵動作是點「取消群組」。模板預設多半是直式排版，不取消群組就沒辦法把元素拖成橫式。這一步很多人會漏掉，結果怎麼拖都不對。為什麼要強調橫式？因為網站導覽列是橫向的，直式 Logo 硬塞進橫向選單會被裁掉或變形，一開始就設計成橫式能省掉後續大量裁切與重排。如果你想更系統化地學 Canva，Canva 新手必學實用技巧 是很好的起點，進階需求再看 Canva Pro 進階設計技巧。
- 先在左側模板區找一個貼近品牌調性的標誌，套用後先別急著改字。
- 選取 Logo、點右鍵「取消群組」，圖示與文字才能獨立拖曳。
- 把直式拖成橫式，文字靠左對齊，留出圖示與文字的呼吸空間。
- 到字體搜尋欄輸入「中文」，挑思源黑體或王漢宗系列，別用不支援中文的英文字體。
- 點「元素」搜尋你的服務或商品關鍵字（例如沙發、咖啡、相機），把與行業無關的預設圖示換掉。
- 黑版完成後複製一份改成白色，留給深色背景使用。
- 註冊會員後下載 PNG；免費版沒有透明背景，去背留到下一步。
字體這一步我特別想多說兩句。中文字型的選擇直接決定 Logo 的氣質，思源黑體走的是俐落現代，王漢宗系列則涵蓋明體、楷書等不同風格，挑之前先想清楚品牌想傳達什麼性格。這部分可以對照 中文字體黑體明體圓體推薦 和 英文字體襯線非襯線推薦，Logo 標準字中英文字體挑選技巧 則專講標準字的挑法。圖示替換時要注意，付費素材在 Canva 會有浮水印或標示，商用前務必確認授權；如果你需要更多免費圖示資源，免費 Icon 圖示 PNG SVG 下載 是一個很實用的補充來源。
老實說，我也遇過新手問：是不是乾脆外包給設計師比較快？這取決於你的預算和品牌階段。剛起步、還在試水溫的小站，自己用 Canva 做完全夠用，因為這時候品牌定位都還會調整，花大錢做一個「定稿」Logo 反而是浪費。等品牌定位穩定、預算到位，再考慮找設計師做一版更完整的品牌識別。Logo 設計費用自己做好還是外包 有更詳細的成本分析。順帶一提，如果你做的是品牌官網，品牌官網設計全攻略 和 品牌官網架設完整實戰 可以幫你把 Logo 與整體形象的關係串起來。
Logo 去背與裁切
免費版 Canva 下載的 Logo 沒有透明背景，上傳到網站前必須去背加上裁切，否則圖片會帶一塊白色底，放在深色區塊特別難看。去背有兩條路：熟修圖軟體的人用 PhotoShop 的裁切工具加魔術棒，速度快、可控性高；不熟修圖的人把圖拖進 RemoveBG 一鍵去背，基本去背功能免費可用 [來源：〈RemoveBG〉〈https://www.remove.bg/〉〈2026〉]。後者邊緣不夠銳利時，還是要回到修圖軟體後製。
不論走哪條路，最終都要存成 PNG 透明背景，才能放在任何底色的網站區塊上。一個常見的雷是去背後留下肉眼難辨的白邊，這在淺色背景看不出來，一換到深色 Hero 區就整個露餡。所以去背完一定要先丟到深色背景檢查邊緣，再正式上傳。如果你想做更進階的 AI 去背，AI 去背工具免費軟體實測 有完整的工具比較，圖片壓縮工具不失真實測 則接續處理 PNG 檔案過大的問題。
| 比較項目 | PhotoShop 路線 | RemoveBG 路線 |
|---|---|---|
| 操作門檻 | 需熟悉修圖軟體 | 拖曳上傳即完成 |
| 去背精度 | 高，可控邊緣細節 | 一般場景可用，複雜圖形邊緣偏鈍 |
| 處理速度 | 中等（手動操作） | 極快（數秒自動完成） |
| 裁切支援 | 內建裁切工具 | 不支援，需自行處理 |
| 費用 | 付費軟體 | 基本去背功能免費可用 [來源：〈RemoveBG〉〈https://www.remove.bg/〉〈2026〉] |
| 適合對象 | 講究細節、長期做圖的人 | 新手、急著上線的站長 |
裁切這一步不管用哪個工具都得自己來，去背工具不會幫你裁。把 Logo 周圍多餘的空白裁掉，比例盡量貼近最終顯示的長寬比，這樣上傳後縮放才不會失真。裁完順手做一次圖片優化，對網站載入速度有直接幫助，WordPress 圖片優化上傳步驟 和 圖片 SEO 命名壓縮結構化標記 可以一起參考。如果你 Logo 用了照片材質或需要立體感，商用免費圖庫照片素材 和 免費 3D 素材圖示模型資源 也能幫上忙。
從 Logo 主色延伸網站配色：同色相不同明度的公式
網站配色的安全做法可以拆成三步：主色從 Logo 取、色階只在同一個色相裡調明度、點綴色壓在一到兩個。主色取自 Logo，確保品牌記憶和網站視覺用的是同一套色彩語言；明度差負責製造層次（例如深藍標題、淺藍背景），不會引入衝突色；點綴色控制在一到兩個、只用於按鈕或強調處，過多就會破壞一致性。只要色系守得住，就算沒有設計底子，配色結果通常不會太差。
這個公式為什麼有效？因為它從根本上限制了色彩之間的衝突。新手最容易犯的錯，是看到一個漂亮的顏色就想加進來，紅的黃的綠的紫的堆在一起，結果每個顏色都在搶戲，誰也不讓誰。同色相不同明度的做法等於把色相這個變數固定下來，只讓明度變動，整體視覺自然收斂。這背後的色彩理論基礎，品牌色彩挑選與色彩心理學應用、色彩心理學與用戶心理實戰 和 網頁設計配色四步驟實戰 都有更深入的拆解，想搞懂原理的話值得一看。
- 主色（1 個）：取自 Logo，用於標題、重要區塊背景、品牌元素。
- 色階（3 到 4 個）：主色拉出來的深淺變化，負責背景、次級區塊、文字層次。
- 點綴色（1 到 2 個）：對比或互補色，只用於按鈕、連結、強調標籤。
- 中性色（黑白灰）：大量用於文字、邊框、留白，讓色彩有呼吸空間。
點綴色這一項要特別節制。很多人以為顏色多用一點會更豐富，結果恰恰相反，顏色一多就顯得雜亂、沒有重點。我自己的習慣是，點綴色寧少勿多，寧可整站偏單色系，也不要為了「熱鬧」硬加第三第四個顏色。如果你對點綴色的選擇沒把握，可以回到色相環找互補色或三方色，掌握對比與互補的關係就能挑出合適的強調色。RGB 與 CMYK 的色彩模式差異在網頁上通常用 RGB，但如果你同時要做印刷品，RGB 與 CMYK 色彩模式差異 會提醒你哪些顏色在螢幕和印刷之間會變調。
說到底，一致性是新手配色最實際的底線，是人人都能守住的操作準則：整站色系統一，結果通常不會太差；一旦開始東拼西湊，再好的單品組在一起也會變成災難。前面之所以要花那麼多力氣把 Logo 主色、色票、佈景主題一起定，就是因為這三者綁在一起，一致性才守得住。
明度差要拉多大才有層次，是新手最容易拿捏不準的細節。實務上可以用固定的明度間距來排色階，比方說主色落在明度 35%，往上拉一階用 65% 當次要背景、85% 當大面積底色，往下壓一階用 18% 當標題與強調文字。差距過小（相鄰兩階相差不到 10 個百分點）整站會看起來灰濛濛、層次消失；差距過大（一次跳過 40 個百分點）又會讓畫面出現明顯斷層。多數版面把相鄰色階的明度差控制在 15 到 25 個百分點之間，層次分明又柔和。
色階排好之後還要回到飽和度做一次收斂。同一支 Logo 主色，飽和度往往很高（接近 70% 以上），如果把這個高飽和直接套到大面積背景，視覺會過於刺激、看久了疲勞。常見做法是把背景與次要區塊的飽和度往下壓到主色的一半左右，主色的高飽和只保留給按鈕、連結、Logo 本身這類小面積元素。這樣一來，高飽和的視覺張力集中在少數重點，大面積維持耐看的低飽和度，整體既有活力又能久看。
色彩對比與可讀性：配好看之外更要看得清
色票排得再好看，一旦文字與背景對比不足，訪客讀不下去，網站的轉換與停留全部歸零。色彩對比度指的是前景與背景的亮度落差，業界常用的衡量標準是 WCAG 對比比例，比例越高越容易辨識。身體文字（一般段落）建議對比比例至少達到 4.5:1，大字標題至少 3:1，這是國際公認的最低可讀性門檻。挑色票時不能只憑感覺判斷夠不夠清楚，把色碼丟進線上對比檢測工具（例如 WebAIM Contrast Checker）實測一次，才能確認你的前景背景組合過關。
對比不足的典型情境，是把主色同時用在背景與文字上，只靠明度差一點點來區分，結果在手機陽光下完全讀不出字。另一種是把品牌點綴色（往往是飽和的黃、橘、綠）直接當文字色放在白底上，對比比例常常只有 2:1 左右，遠低於門檻。安全做法是把品牌色留給按鈕、圖示、邊框這類不需要承載文字的元素，文字一律回到主色最深階或深灰，確保每一個字都過得了 4.5:1 這關。如果你對比度觀念還不熟，網頁設計配色四步驟實戰 有從挑色到檢測的完整流程可以對照。
Logo 配色的色彩心理學：不同行業怎麼選主色
主色取自 Logo，而 Logo 的主色該是什麼，背後有一層色彩心理學的考量。同樣是「專業穩重」的訴求，金融、科技、醫療各自慣用不同色相，因為每個顏色在受眾心中喚起的聯想不同。挑 Logo 主色之前先想清楚品牌想傳達什麼性格，再用下面的對照找出合適的色相方向，能少走很多冤枉路。色彩心理學是判斷框架，最後仍要回到你的受眾與定位做決定。色彩心理學與用戶心理實戰 與 品牌色彩挑選與色彩心理學應用 對這一層有更完整的拆解。
| 行業／定位 | 慣用主色相 | 傳達的性格 | 使用提醒 |
|---|---|---|---|
| 金融、法律、企業顧問 | 深藍、藏青 | 穩重、可信賴、專業 | 避免高飽和的亮藍，會顯得輕浮 |
| 科技、軟體、新創 | 靛藍、紫、深灰 | 創新、理性、前瞻 | 紫色面積過大易顯廉價，留給點綴 |
| 醫療、保健、環保 | 藍綠、綠、白 | 乾淨、健康、安心 | 綠色挑偏藍的青綠，比黃綠更專業 |
| 餐飲、食品、生活風格 | 橙、紅、暖黃 | 熱情、食欲、親切 | 暖色當主色要配大量留白降壓 |
| 美妝、精品、婚禮 | 玫瑰金、酒紅、藕色 | 優雅、細膩、高級感 | 飽和度壓低、明度拉高更顯質感 |
| 教育、親子、公益 | 天藍、嫩綠、鵝黃 | 親和、成長、希望 | 可適度提高飽和增加活潑感 |
這張表是慣例參考，創新品牌確實能用反差色突出，前提是你清楚自己在做什麼選擇。一個賣嚴肅金融服務的網站若選了糖果橙當主色，訪客的第一印象會是困惑多於驚喜，轉換率往往跟著下滑。對新手而言，先在慣用色相裡挑一個安全的，把冒險留到品牌站穩之後再做，會是更穩當的路徑。行動裝置現在已佔全球網路流量超過半數 [來源：Statista，全球行動網路流量占比季度統計〈https://www.statista.com/statistics/277125/share-of-website-traffic-coming-from-mobile-devices/〉〈2026-04-28〉]，主色在小螢幕上的辨識度與對比度，比在桌機上更吃緊，挑色時務必把手機預覽納入檢查。
用 Coolors 自動產生色票：從單一顏色到整套網站配色
不會自己選顏色的人，Coolors 是從單一顏色長出整套網站色票最快的工具。它能按空白鍵隨機生成配色、用 Color Picker 輸入指定色碼帶出相關顏色，還能上傳 Logo 直接挑出它的色彩組成並匯出色碼 [來源：〈Coolors 配色工具功能〉〈https://coolors.co/〉〈2026〉]。對於前面提到的黑白素色 Logo 情境，Pick palette from photo 這個功能特別好用，因為它讓素色 Logo 也能反推出一組合理的網站色票。
Coolors 的面板上有幾個核心功能值得記下來。Generate 按空白鍵就會換下一組配色，看到喜歡的顏色用鎖定功能固定住，這樣按空白鍵時它不會被換掉。Color Picker 讓你輸入一個指定色碼，系統自動列出相關顏色，適合有品牌指定色的情境。Pick palette from photo 上傳 Logo 即可萃取它的色彩組成。Export 或 Open in the generator 能看到完整色碼，直接當網站配色參考值。Create a gradient 提供漸層與 CSS 程式碼，方便有漸層需求的網頁區塊。注意各功能名稱與路徑可能因版本更新微調，實際以 Coolors 官網當前介面為準 [來源：〈Coolors 配色工具功能〉〈https://coolors.co/〉〈2026〉]。想看更多同類工具，網頁配色神器與配色工具網站 有完整的橫向比較。
- 打開 Coolors，按空白鍵隨機瀏覽配色，直到出現一個大致喜歡的組合。
- 把主色換成你的 Logo 色碼（或用 Pick palette from photo 上傳 Logo 萃取）。
- 用鎖定功能固定主色，再按空白鍵讓其他色位圍繞主色重新生成。
- 用找不同明度功能，補上主色的深淺色階。
- 點 Export 匯出完整色碼清單，記錄下來準備套進佈景主題。
- 若有漸層需求，用 Create a gradient 產出 CSS 程式碼備用。
這裡要承認一個限制：配色工具能幫你產出色票，但它沒辦法幫你判斷這組顏色用在你的行業、你的受眾身上合不合適。一組在 Coolors 上看起來很漂亮的配色，搬到一個賣保健食品的網站可能顯得輕浮，搬到一個律師事務所的網站可能又不夠穩重。所以工具產出的色票要當起點，不是當終點，最後還是要回到品牌定位做判斷。這部分的取捨，色彩心理學提供了判斷框架。
換個角度想，配色工具真正的價值不是「幫你選顏色」，而是「幫你避免亂選」。它用一套有邏輯的演算法約束你的選擇範圍，讓你不至於偏離主色太遠。這對沒有色彩訓練的新手來說，等於多了一層保護。所以不必在「哪一組最好看」上反覆糾結，盡快挑出一組夠安全的配色，把時間留給網站內容和功能，是更務實的做法。網頁設計從零到一完整指南 可以幫你把配色這一步放進整體流程裡看。等到網站成形、想認真拚排名，《SEO 排名攻略學》從產業分析到落地實戰 是一條有系統的進修路徑。
把 Logo 與色票套進 WordPress：Divi 主題上傳實戰
Logo 和配色都準備好之後，接下來就是套進 WordPress。WordPress 後台自帶固定的 Logo 上傳欄位，基本主題直接用預設位置即可；功能較完整的主題如 Divi，則在 Theme Options 上傳 Logo、在 Color Pickers Default Palette 更換色票，再到 Header 設定的 Logo Max Height 調整大小，最後用裝置切換工具檢查不同螢幕的呈現 [來源：〈Elegant Themes／Divi 官方文件〉〈https://www.elegantthemes.com/〉〈2026〉]。注意 Divi 不同版本的路徑可能微調，實際位置以你安裝的版本為準。
具體操作流程是這樣的。進入 Divi 的 Theme Options，找到 Logo 上傳欄位，把去背好的 PNG 丟進去。色票的部分，在 Color Pickers Default Palette 把預設色換成你的主色與色階，這樣之後用 Divi Builder 設計頁面時，這些顏色會直接出現在選色器裡，不用每次都重打色碼。大小調整則到 Theme Customizer 的 Header & Navigation，找到 Logo Max Height 設定數值。如果你是第一次接觸 Divi，Divi 主題購買安裝到進階教學 和 Divi 主題架站全攻略 是完整的入門路徑。
- 進入 WordPress 後台，找到佈景主題的 Logo 上傳位置（基本主題在「網站識別」；Divi 在 Theme Options）。
- 上傳去背好的 PNG Logo，建議黑白兩個版本都準備好。
- 到 Color Pickers Default Palette（或主題對應的色票設定），換成你的主色與延伸色階。
- 到 Header 設定的 Logo Max Height，輸入高度數值（常見落在 40 到 80 px 之間，依主題與版面調整）。
- 用裝置切換工具，分別檢查手機、平板、桌機的呈現。
- 回到前台確認 Logo 是否正確顯示、深色區塊是否切換到白版。
色票換好之後，設計頁面時就能直接從選色器取用，避免每次都重打色碼。這個看似小的動作，長期下來省掉的時間和出錯機率很可觀，因為手打色碼很容易打錯一個字就整個跑色。上傳完一定要先到前台確認 Logo 是否正確顯示，再繼續後續設計，不要埋頭做了十個頁面才發現 Logo 根本沒上成功。Divi 的頁首設計如果不想從零刻，Divi 頁首設計現成套版 提供了現成方案，Divi 標題設計樣式技巧 和 Divi 自訂字體上傳教學 則處理標題與字體細節。
如果你想用其他主題，Astra Pro 主題完整教學 也是一個輕量又熱門的選擇。不管用哪個主題，Logo 上傳和色票設定的邏輯都是相通的：找到主題的 Logo 欄位、找到色票設定、調整大小、用裝置切換檢查。WordPress 頁面建立與編輯教學、WordPress 選單與導覽設定 和 三十分鐘架好 WordPress 網站 可以補齊其他後台操作。如果你做的是一頁式網頁，Divi 一頁式網頁設計實戰 把 Logo 與色票的應用串得更緊。
SVG 還是 PNG：Logo 檔案格式怎麼選
Logo 上傳到 WordPress 之前，檔案格式的選擇會直接影響它在各種螢幕上的清晰度。SVG 是向量格式，放大到任何尺寸都不失真，檔案體積小，最適合單純的線條或色塊 Logo；但 WordPress 預設的多媒體上傳會限制 SVG，因為 SVG 內含程式碼有安全顧慮，通常要額外裝外掛或請具備管理權限的人放行才能上傳。PNG 是點陣格式，相容性最高、所有主題都吃，缺點是放大後邊緣會出現鋸齒，檔案也比較大。含漸層、陰影、複雜色彩的 Logo 適合用 PNG；純色幾何造型的 Logo 用 SVG 最理想。資源有限的情況下，PNG 搭配適當的壓縮處理，是新手最保險的選擇，圖片壓縮工具不失真實測 能幫你把檔案壓到合理體積。
WordPress 在所有網站的內容管理系統裡佔了將近六成的使用比例 [來源：W3Techs，WordPress 市占率統計〈https://w3techs.com/technologies/details/cm-wordpress〉〈2026-06-29〉]，多數佈景主題都遵循相近的 Logo 上傳慣例，學會一套就能套用到絕大多數主題上。新手可以用 Bluehost 自架 WordPress 完整教學 快速起步，對速度有要求再考慮 A2 Hosting 架站完全指南 或 Cloudways 雲端主機教學，三者的差異在 共享 VPS 雲端主機類型比較 有清楚整理。主機穩了，Logo 和配色才有發揮的舞台。
新手常見錯誤：Logo 與配色最容易踩的幾個雷
自己做網站 Logo 和配色時，有幾個錯誤最容易讓網站看起來很業餘。最常見的是只做一個黑版 Logo，遇到深色背景就完全看不見，務必補一個白版。再來是配色顏色用太多，點綴色不節制，整站看起來像調色盤。第三是網站主色和 Logo 主色對不上，品牌記憶被打散。第四是直式 Logo 硬塞進橫向導覽列，被裁掉或變形。最後是去背不乾淨留下白邊，在深色區塊特別明顯。這幾項先排除掉，離專業感就近了一大步。
| 常見錯誤 | 造成的問題 | 修正做法 |
|---|---|---|
| 只做黑版 Logo | 深色背景看不見 | 同時產黑白兩版本，依背景切換 |
| 點綴色用太多 | 整站雜亂、沒有重點 | 點綴色控制在 1 到 2 個，只用於按鈕與強調 |
| 主色與 Logo 對不上 | 品牌記憶被打散 | 主色從 Logo 取，佈景主題色票同步換成主色 |
| 直式 Logo 塞橫向選單 | 被裁切或變形 | 一開始就設計橫式，取消群組後拖曳排版 |
| 去背留白邊 | 深色區塊特別明顯 | 去背後先丟深色背景檢查邊緣再上傳 |
| 選了不支援中文的工具 | 字體變方塊，設計全白做 | 第一條件就是中文支援，例如 Canva |
這幾個雷之所以新手特別容易踩，是因為它們都不是「審美問題」，而是「流程問題」。沒做白版，是因為沒想過網站會有深色區塊；顏色用太多，是因為沒有一致性把關；直式 Logo 塞選單，是因為做 Logo 的時候沒先想好它要放在哪裡。一開始就把 Logo、配色、佈景主題當成同一個色彩決策來規劃，這些錯誤多半根本不會發生。想避免更多設計地雷，可以參考 自架網站常見網頁設計地雷。
退一步看，網站質感不是靠單一漂亮的 Logo 撐起來的，而是 Logo 主色、色票與佈景主題一開始就用同一套色彩決策一起定。新手最容易在這裡走偏，把 Logo 設計和網站配色當成兩件獨立的事分頭做，結果做到一半才發現兩邊對不起來，只好不斷回頭改。順序想清楚、工具備齊、一致性記在心裡，接下來就是開工。如果你想把它放進更大的品牌識別框架，CIS 企業識別系統設計流程、給品牌網站的關鍵建議 可以接著看。至於品牌上線後到底有多少人實際搜到、被討論，Ahrefs Brand Radar 品牌聲量追蹤 能幫你把品牌能見度量化出來。
最後補幾個延伸方向。Logo 和配色到位後，下一步通常是把這套視覺語言落實到具體頁面與元件。網頁設計必備關鍵元素、網頁版面設計 RWD 排版觀念 和 排版設計字體行距視覺層次 處理版面與排版；響應式網頁設計 RWD 手機版 確保手機呈現不打折；CTA 行動呼籲按鈕設計指南 把點綴色用在最關鍵的轉換按鈕上。想跟上當下的視覺趨勢，最新網頁設計趨勢風格解析 值得定期翻一翻。不同類型網站也有各自的重點，例如 作品集網站設計與品牌履歷、餐飲品牌網站設計實戰，企業形象面的討論則在 企業形象網站的價值與建站時機。Canva 的 AI 功能 Canva AI 魔法工作室設計功能 也能加速 Logo 與素材產出。至於網站本身能不能被 AI 助理順利讀懂並推薦給用戶，可以從 Agentic Browsing 時代下的 AI 友善網站 找到對應的優化方向。
常見問題
網站 Logo 製作與配色這條流程，新手通常會卡在工具選擇、順序判斷和上傳定位這幾個環節，下面把最常被問到的問題一次回答。
網站 Logo 要用什麼軟體做才支援中文？
首選是 Canva。它的免費方案就直接附中文字型，下載 PNG 也沒問題 [來源：〈Canva 定價與功能〉〈https://www.canva.com/pricing/〉〈2026〉]。挑工具時把「能不能正常顯示中文」放第一位，不然做完整個字變方塊，等於白工。
網站配色要先決定還是 Logo 先設計？
Logo 先。它的主色一印到名片、社群大頭貼上就難改，所以要最早定案，網站配色再跟著這個主色去排深淺。順序反過來，配色常常會和 Logo 對不起來，一路回頭改。
如何從 Logo 顏色延伸網站配色？
把 Logo 的主色當網站主色，接著在同一個色相裡拉出 3 到 4 個深淺色階做層次，點綴色壓在 1 到 2 個、只放在按鈕與強調處。黑白素色 Logo 給不出主色線索時，交給 Coolors 的 Pick palette from photo 從圖片萃取色票，別硬抓。
Logo 做完要怎麼去背和裁切？
會修圖就用 PhotoShop 的裁切工具搭配魔術棒；不熟的話把圖丟進 RemoveBG，拖上去幾秒就去掉背景，基本功能免費 [來源：〈RemoveBG〉〈https://www.remove.bg/〉〈2026〉]。不管走哪條路，最後都要存成透明 PNG，上傳前先放深色底看一下有沒有殘留白邊。裁切則兩種工具都不代勞，得自己動手。
WordPress 要去哪裡上傳網站 Logo？
一般主題到後台「網站識別」或「外觀 → 自訂」裡的 Logo 欄位就能傳。功能完整一點的主題如 Divi，Logo 放在 Theme Options、色票在 Color Pickers Default Palette、高度在 Header 設定的 Logo Max Height [來源：〈Elegant Themes／Divi 官方文件〉〈https://www.elegantthemes.com/〉〈2026〉]。各版本路徑可能略有出入，以你裝的版本為準。
網站 Logo 大小要設多少才適合？
高度大概落在 40 到 80 px，看主題和版面再微調。設好之後用裝置切換分別看手機、平板、桌機的樣子，沒被裁掉或壓歪就行。太大會吃掉導覽列空間，太小則辨識度不夠。
深色背景的網站 Logo 怎麼處理？
另外存一個白版。深色 Hero 區或頁首深底出現時切換成它。只做黑版是新手最常見的失誤，放上去直接隱形。所以製作階段黑白兩版要一起產。
沒有設計基礎也能做好看的 Logo 嗎？
可以。在 Canva 套模板、取消群組拖成橫式、換成中文字體、把圖示替換成符合行業的，免費版就能下載。重點不在美術功力，而在順序：主色先定、色階排好、黑白兩版備齊，結果通常不差。
Coolors 配色工具怎麼用？
按空白鍵讓配色一直洗牌，喜歡的用鎖定固定住；Color Picker 直接打色碼帶出相關色；Pick palette from photo 把 Logo 傳上去萃取顏色；Export 把整組色碼匯出；Create a gradient 給你漸層和 CSS 程式碼 [來源：〈Coolors 配色工具功能〉〈https://coolors.co/〉〈2026〉]。功能名稱可能因版本更新微調。
網站配色幾個顏色最剛好？
一個主色、3 到 4 個同色相的深淺色階、1 到 2 個點綴色，再補上黑白灰中性色，這樣最穩。顏色一多就雜、沒重點，點綴色務必收斂，只給按鈕和強調用。
Logo 設計自己做好還是找設計師？
品牌剛起步、還在試水溫時自己用 Canva 做就夠，這時候定位還會調，砸大錢定稿反而浪費。等定位穩了、預算到位，再找設計師做一整套品牌識別。外包價格隨設計師資歷和交付內容落差很大，詢價前先把需求規格列清楚。
網站配色一致性原則是什麼？
整站用同一套色彩語言：主色、色階、點綴色都掛在同一個色相底下，不東拼西湊。色系統一，就算沒有設計底子，結果通常也不會太差。這也是為什麼 Logo 主色、色票、佈景主題三件事要一起決定。
網站 Logo 用 SVG 還是 PNG 比較好？
純色幾何造型的 Logo 用 SVG 最理想，放大不失真、檔案小，但 WordPress 預設會限制 SVG 上傳，需裝外掛或請管理員放行。含漸層、陰影、複雜色彩的 Logo 用 PNG，相容性最高、所有主題都吃，代價是放大有鋸齒、檔案較大。新手若不想處理 SVG 的權限問題，PNG 搭配壓縮是最保險的選擇。
配色對比度不夠會有什麼問題？
文字與背景對比不足，訪客讀不下去，停留與轉換都會下滑。業界衡量標準是 WCAG 對比比例，身體文字至少要 4.5:1、大字標題至少 3:1。把品牌高飽和色留給按鈕與圖示，文字一律回到主色最深階或深灰，再把色碼丟進 WebAIM Contrast Checker 之類的工具實測，就能確認組合過關。