1 分鐘閱讀

Alwane 是一款可以直接抓取某個網站配色的免費線上工具，你只需要在網站當中，輸入你想要查詢的網站網址，他就可以快速的抓取該網站所採用的所有色碼，並且在畫面中詳細的將所有運用的顏色進行色系的分配，讓你能夠一目瞭然，並且附上所有色碼的代號，讓你可以快速的複製與取得這些顏色的代碼，方便使用。

我之前也介紹過許多線上調色盤的工具，你可以透過這些工具來自動產生許多配色的靈感，讓你在設計網站時，可以運用這些熱門的顏色搭配，進而創造出一個具有美感與協調的設計：

今天介紹的「Alwane」與普通的色碼抓取工具不同，他可以直接分析目標網站所使用到的所有顏色，並且以視覺化的方式呈現出來，並且還會將所有相同色系的顏色進行分組，讓你一目瞭然。同時，他也提供 CSS 與 SASS（CSS 預處理器）兩種顯示模式，可以讓你直接複製所有顏色的代碼進行使用。

Extract/Regroup/Order Colors from any Website · Alwane
https://alwane.io/

文章目錄

簡介教學

輸入分析網址

進入網站之後，首先在「Website」欄位中輸入要抓取的網址，接著點選 Extrat Colors 按鈕，就可以馬上分析出該網站所使用的所有顏色：

預設會從 HTML 與 CSS 檔案中進行分析，如果你還想更近一步的去查找 JavaScript 當中所採用的顏色，可以點選「Advenced」就能顯示「HTML」、「CSS」與「JavaScript」的選項，你就可以根據想要抓取得來源進行選擇：

接著在下方，你可以選擇是否要將抓取出來的代碼進行分組或索引的設定，最後還可以選擇所顯示的顏色代碼是要採用 CSS 或是 SASS 的語法進行顯示：

在顏色抓取後的上方，你可以透過「Palette」與「Code」兩者進行切換，分別是顯示調色盤與顏色代碼。在顏色代碼的部分，會根據左下角的「Language」所選擇的方式，來顯示 CSS 或是 SASS 的代碼：

可以看到，在代碼顯示的方式中，除了會顯示顏色代碼之外，他的背景也會自動幫你顯示該代碼所代表的顏色，對於我們要複製來說，是非常直覺且方便的。此外，你也可以直接透過右上角的「Copy」按鈕，將所有的代碼複製並貼至你的顏色表當中進行使用。

評價推薦優點ㄑ