ColorZilla - 線上顏色抓取工具

開始製作簡報、網站之後, 才深深體會到, 頁面的排版及色彩視覺感受絕對是在第一時間博得讀者的關注及繼續閱讀的重要關鍵. 除此之外, 對作品的專業形象有也有一定程度的加分效果. 一般我們最常使用的顏色挑選工具是色碼表, 或是文書編輯器 (例如: Word、PowerPoint)所提供的色盤.

不過, 這兩者所能提供的顏色有限. 如果你不是調色高手, 那麼, 可以利用平時瀏覽網站、社群媒體或是電子報時, 多注意頁面上的用色, 看到喜歡的顏色, 就用 ColorZilla 擷取並儲存顏色.  ColorZilla 除了可以即時辨別出該顏色的色碼代號, 也可以是你的顏色資料庫, 儲存你偏好的顏色.

​Colorzilla - Chrom 擴充應用程式

​如果你在某個網站看到喜歡的顏色, 很想知道它的顏色代碼, 那麼 ColorZilla 絕對是最佳工具.
只要開啟 ColorZilla, 將滑鼠移到該顏色, 就能馬上看到該顏色的色碼. 而且, 它會記錄你曾經搜尋的顏色. 對於有色彩相關需求的設計者來說, 真的相當實用.

按這裡, 將 ColorZilla 加到Chrome.​

---

線上抓取顏色 + 顏色代碼

步驟: 
1. 將ColorZilla 加到 Chrome 之後, 就可以在網頁瀏覽器右上方看到 Colorzilla 的圖示 (滴管)
2. 點擊滴管圖示 > 功能表 (如下圖)
3. 點擊 "Page Color Picker Active"

​
​4. 這時, 你可以在瀏覽的網頁上任意移動滑鼠. 隨著滑鼠在網頁上移動時所感應到的顏色, 工具列上的色塊也會跟著改變

5. 最後, 將滑鼠移到你想要抓取的顏色區塊, 按滑鼠左鍵

• ColorZilla 就會自動記錄該顏色.
• 你可以馬上在頁面上方的黑色區塊, 看到該顏色的代碼. 

---

收藏/查看所有抓取過的顏色/代碼

步驟: 
1. 將ColorZilla 加到 Chrome 之後, 就可以在網頁瀏覽器右上方看到 Colorzilla 的圖示 (滴管)
2. 點擊滴管圖示 > 功能表 (如下圖)
3. 點擊 "Picked Color History"

可以在這裡, 看到所有曾經抓取的顏色.

---

分析網站配色

1. 將ColorZilla 加到 Chrome 之後, 就可以在網頁瀏覽器右上方看到 Colorzilla 的圖示 (滴管)
2. 點擊滴管圖示 > 功能表 (如下圖)
3. 點擊 "Webpage Color Analyzer"

Colorzilla會自動幫你分析這個網頁的用色及顏色代碼. 

---

透過ColorZilla, 可以隨時儲存喜歡的顏色, 建立自己的顏色資料庫. "顏色" 在一般的平面設計或是網頁設計都是佔有絕對重要的角色. 強化自己的戰備資源, 就能快速產出專業美觀的作品.