重點整理
注意：2026 年 10 月實測 alwane.io 已變成與配色無關的加密貨幣賭場評比網站，原工具已無法使用，請勿點擊文中連結。本文保留原本的功能介紹：輸入網址擷取網站使用的顏色，以色系分組顯示色碼並可匯出。
若想知道某個網站內的配色方式，除了打開開發人員工具或是檢視原始碼，但對於非學習過程式碼的人來說相對困難，透過 Alwane 第三方網站，不僅貼上連結後即可取得網站配色分析，其中站內介面更是以視覺化方式分組呈現所有顏色，對於設計師或是正在學習配色的人來說是一個非常友善的線上工具！
Alwane 是什麼
Alwane 是一個線上免費網站配色分析工具，當使用者輸入欲查詢的網站連結後，Alwane 會立即分析網站配色後，即可取得該網站使用的顏色代碼或相關描述，並在畫面中以視覺化方式分組呈現所有顏色資訊，讓使用者能夠一目瞭然，快速的複製與取得這些顏色的代碼，方便使用。
Alwane 使用教學
第一步：開啟 Alwane 網站後直接在左上角「Extract CSS Colors」的 「Website」輸入要擷取顏色的網址，在「advanced」內可以設定抓取方式，系統預設是以 HTML 和 CSS 樣式表取得顏色。
第二步：擷取顏色後，再介面中我們可以看到顏色是以視覺化的方式呈現，並以色系作為分組，其中我們可以清楚看見顏色、變數名稱和色碼（hex code）等顏色資訊，從左側可選擇為顏色重新分組、排序等。
第三步：在上方可以切換程式碼模式，並透過左側的「Color Palette Code」選擇顯示語言。
第四步：若想要保存或分享網站配色、調色盤、CSS 等，可以點選右上角「Generate」，取得顏色資訊。
不用第三方網站，怎麼查出網頁的配色？
Chrome 內建的開發人員工具就能做到，不用把網址交給來路不明的網站：
- 用 Chrome 開啟要分析的網頁，按 F12（Mac 為 Option＋Command＋I）開啟開發人員工具。
- 點右上角的「⋮」→「更多工具」→「CSS Overview」，按「Capture overview」。
- 在「Colors」區塊可以看到背景色、文字色、填色與框線色，點色塊會列出使用到該顏色的元素。
- 只想看單一元素的顏色，用左上角的選取工具點該元素，在「樣式」分頁點色塊即可複製色碼。
面板名稱可能隨 Chrome 版本調整，找不到時可在開發人員工具中按 Ctrl＋Shift＋P 搜尋「CSS Overview」。
常見問題
Alwane 現在還能用嗎？
不能。2026 年 10 月實測 alwane.io 已變成與配色無關的加密貨幣賭場評比網站，原本的配色分析功能已經不存在，請不要點擊舊連結，也不要在該網站輸入任何資料。
有什麼工具可以查網站用了哪些顏色？
最簡單的是 Chrome 開發人員工具裡的「CSS Overview（CSS 總覽）」面板，擷取後會列出整個頁面使用的文字色、背景色與色碼；只想取單一顏色，可以用瀏覽器取色擴充功能或作業系統內建的取色工具。
知道對方網站的色碼後可以直接拿來用嗎？
顏色本身通常不受著作權保護，參考配色沒有問題；但整套配色加上版面、Logo 一起照搬，容易被認為抄襲或混淆品牌。建議把參考到的色碼當成起點，再依自己的品牌調整明度與比例。
結語
透過免費的第三方工具 Alwane 來取得網站配色，對於看不懂網站原始碼的人來說，是非常有效率的方式，不管你是想要了解一個網站的配色方式，或是在網路世界中找尋一點顏色靈感的人，Alwane 都是非常好用的工具。
Free Icons 可商用免費開源圖示下載網站，找到你理想的icon！
Animated icons 2.0 動態圖標Icon-提高你的網站豐富度！
Free Icons 可商用免費開源圖示下載網站，找到你理想的icon！
Health icons 可商用免費圖示下載網站，找到你的工作小幫手！