重點整理
ColorZilla 是免費的 Chrome 取色器擴充功能，安裝後點工具列的滴管圖示、選「Pick Color From Page」，再點網頁上任一處，色碼就會自動複製到剪貼簿。2026 年 10 月在 Chrome 線上應用程式商店仍可安裝，顯示 400 萬名使用者、最新版本 4.1。除了取色，還能分析整頁用色、保存取色紀錄，並用線上 CSS 漸層產生器做漸層。
在別人的網站上看到喜歡的顏色，想用在自己的設計裡，最直覺的做法是截圖再丟進繪圖軟體用滴管取色，步驟多又容易取錯。ColorZilla 讓你直接在瀏覽器裡取色：點一下就拿到 HEX 色碼。這篇說明怎麼安裝 ColorZilla、每個選單功能怎麼用、取到的色碼怎麼貼到其他軟體，以及不想裝擴充功能時的替代方法。
ColorZilla 是什麼？
ColorZilla 是 Iosart Labs 開發的顏色工具，有 Chrome 與 Firefox 版本，核心功能是「網頁滴管」：可以取得網頁上任何一個像素的顏色，並自動把色碼複製下來。官方商店頁標示它是「精選商品」、約 400 萬名使用者，開發者聲明不會蒐集使用者資料。
它需要「讀取所有網站資料」的權限，這是因為取色時要讀取網頁畫面；官方說明這個權限只用來取色。安裝任何擴充功能前，都建議先確認開發者與使用者評價，ColorZilla 屬於長期維護、評價穩定的工具。
步驟一：從 Chrome 線上應用程式商店安裝
- 用 Chrome 打開上面的商店連結（舊的 chrome.google.com/webstore 網址會轉到新的 chromewebstore.google.com）。
- 確認開發者是 Iosart Labs LLC，按「加到 Chrome」。
- 跳出權限視窗後按「新增擴充功能」。
- 點網址列右邊的拼圖圖示，把 ColorZilla 釘選到工具列，之後取色比較方便。
商店頁下方的介紹圖可以看到 ColorZilla 的選單長相，安裝後點工具列的滴管圖示就會出現同樣的選單。
步驟二：用滴管取網頁上的顏色
- 打開想取色的網頁，點工具列的 ColorZilla 圖示。
- 選單第一項選 Pick Color From Page。
- 游標會變成十字，畫面上方出現一條資訊列，即時顯示游標所在位置的 RGB 與 HEX 色碼。
- 移到想要的顏色上點一下，色碼就自動複製到剪貼簿。
回到 Canva、Figma、Photoshop，或 WordPress 佈景主題的顏色欄位，直接貼上就是剛剛取的顏色。取色區域預設是 1 個像素，遇到有雜訊的照片可以在選項裡改成 3×3、5×5 等範圍取平均色，結果比較穩定。
ColorZilla 選單功能一覽
除了滴管，選單裡還有幾個實用功能，介面是英文，對照下圖就能找到：
- Picked Color History：最近取過的顏色都會留在這裡，忘了複製時回來找。
- Webpage Color Analyzer：列出目前網頁用到的顏色，想快速了解一個網站的整體配色時很方便。部分網站因為樣式寫法或安全設定，可能分析不到完整結果。
- Palette Browser：內建 7 組調色盤，例如網頁安全色。
- Color Picker：類似 Photoshop 的顏色選擇器，可以把取到的顏色再調亮、調暗。
步驟三：用 CSS Gradient Generator 做漸層
選單的 CSS Gradient Generator 會開啟 ColorZilla 官網的線上漸層編輯器，不裝擴充功能也能直接用。左邊可以挑預設漸層、拖曳色標調整顏色與位置，右邊即時預覽並產生 CSS 語法。
調好後複製右側的 background: linear-gradient(...) 那一行，就能貼到網站的自訂 CSS。漸層做好後也可以存成網址分享給同事。
不想裝擴充功能？用 Chrome 開發人員工具取色
只是偶爾取一次顏色，也可以用 Chrome 內建功能：在網頁上按右鍵選「檢查」，在右側樣式面板點任何一個顏色前面的小色塊，就會出現顏色選擇器，裡面的滴管圖示可以點選網頁上的顏色。步驟比 ColorZilla 多一些，但不用安裝任何東西。擴充功能裝太多會拖慢瀏覽器，不常用的記得移除。
常見問題
ColorZilla 免費嗎？
免費。Chrome 與 Firefox 版本都可以免費安裝使用，線上 CSS 漸層產生器也免費，網頁上會有贊助廣告。
ColorZilla 取到的色碼貼不上怎麼辦？
先確認取色時有「點一下」完成取色，只移動游標不會複製。也可以打開 Picked Color History 找到剛剛的顏色重新複製；複製的格式（HEX、RGB 等）可以在 ColorZilla 的選項（Options）裡調整。
ColorZilla 可以在 Edge 或 Safari 使用嗎？
官方提供 Chrome 與 Firefox 版本。Microsoft Edge 可以安裝 Chrome 線上應用程式商店的擴充功能；Safari 沒有官方版本。
結語
ColorZilla 把「看到喜歡的顏色 → 拿到色碼」縮短成點兩下，是做網頁、做社群圖片時很順手的工具。取到顏色後，可以搭配配色網站找出適合的搭配色，讓整體配色更完整。