ColorZilla讓你只要在網頁上喜歡的配色輕鬆一點,就能得知其顏色代碼!

對設計師來說,有時候在逛網頁時,都會看到一些很喜歡的配色,如果想要知道顏色代碼,通常都是利用截圖來搭配 Photoshop 的滴管工具之類來得知,而這篇筆者要介紹一個更方便的工具,Chrome 擴充外掛的「ColorZilla」。

ColorZilla 能夠讓你直接在網頁上,就能得知這些配色的數值,從 RGB、HSL 到代碼都有,完全不用再截來截去這麼麻煩,同時還會記錄你所查詢過的顏色代碼紀錄,方便未來使用。

ColorZilla 除了支援 Chrome 外,也提供 Firefox,但這篇是以 Chrome 作為介紹。
ColorZilla讓你只要在網頁上喜歡的配色輕鬆一點,就能得知其顏色代碼!

進到安裝頁面後,按右側的 Install ColorZilla 0.5 功能。
ColorZilla讓你只要在網頁上喜歡的配色輕鬆一點,就能得知其顏色代碼!

跳出的訊息中,選擇 Add extension 選項。
ColorZilla讓你只要在網頁上喜歡的配色輕鬆一點,就能得知其顏色代碼!

Chrome 右上角出現滴管圖示後,就代表成功啦!按下後即可看到所有功能,還蠻豐富的,先來看 Pick Color From Page
ColorZilla讓你只要在網頁上喜歡的配色輕鬆一點,就能得知其顏色代碼!

按下 Pick Color From Page 後,你的鼠標就會變成滴管,這時只要移到你想得知代碼的顏色,上方就會顯示其代碼
ColorZilla讓你只要在網頁上喜歡的配色輕鬆一點,就能得知其顏色代碼!

支援即時顯示,你不需要按任何鍵,只要把滴管移到顏色上方
ColorZilla讓你只要在網頁上喜歡的配色輕鬆一點,就能得知其顏色代碼!

而確定之後就按下滑鼠左鍵,ColorZilla 會紀錄你剛選擇顏色,打開「Color Picker」
ColorZilla讓你只要在網頁上喜歡的配色輕鬆一點,就能得知其顏色代碼!

這時不論 RGB、HSV 或代碼通通都能知道,左側還提供調色盤給我們用。
ColorZilla讓你只要在網頁上喜歡的配色輕鬆一點,就能得知其顏色代碼!

如果你覺得這樣看顏色代碼有點累的話,可使用另一個「Copy To Clipboard」
ColorZilla讓你只要在網頁上喜歡的配色輕鬆一點,就能得知其顏色代碼!

打開後選單會顯示這顏色的代碼,而只要按下你想使用的數值後,這數值就會自動複製到剪貼簿。
ColorZilla讓你只要在網頁上喜歡的配色輕鬆一點,就能得知其顏色代碼!

如果你想快速了解到這網頁配色使用的話,可以利用「Webpage Color Analyzer」功能
ColorZilla讓你只要在網頁上喜歡的配色輕鬆一點,就能得知其顏色代碼!

待一兩秒分析完後,上方就會顯示這網頁有使用的顏色代碼,這功能相當方便!
ColorZilla讓你只要在網頁上喜歡的配色輕鬆一點,就能得知其顏色代碼!

當然功能還不只這些,剩下的就讓讀者們自行摸索看看啦!

補充資料

ColorZilla 安裝頁面(Chrome):http://www.colorzilla.com/chrome/

ColorZilla 官網:http://www.colorzilla.com/

閱讀全文