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

Screen Shot 2016 11 29 at 11 25 09 PM

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

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

ColorZilla 除了支援 Chrome 外,也提供 Firefox,但這篇是以 Chrome 作為介紹。
Screen Shot 2016 11 29 at 11 24 16 PM

進到安裝頁面後,按右側的 Install ColorZilla 0.5 功能。
Screen Shot 2016 11 29 at 11 24 42 PM

跳出的訊息中,選擇 Add extension 選項。
Screen Shot 2016 11 29 at 11 24 54 PM

Chrome 右上角出現滴管圖示後,就代表成功啦!按下後即可看到所有功能,還蠻豐富的,先來看 Pick Color From Page
Screen Shot 2016 11 29 at 11 25 23 PM

按下 Pick Color From Page 後,你的鼠標就會變成滴管,這時只要移到你想得知代碼的顏色,上方就會顯示其代碼
Screen Shot 2016 11 29 at 11 27 58 PM

支援即時顯示,你不需要按任何鍵,只要把滴管移到顏色上方
Screen Shot 2016 11 29 at 11 28 16 PM

而確定之後就按下滑鼠左鍵,ColorZilla 會紀錄你剛選擇顏色,打開「Color Picker」
Screen Shot 2016 11 29 at 11 28 29 PM

這時不論 RGB、HSV 或代碼通通都能知道,左側還提供調色盤給我們用。
Screen Shot 2016 11 29 at 11 28 32 PM

如果你覺得這樣看顏色代碼有點累的話,可使用另一個「Copy To Clipboard」
Screen Shot 2016 11 29 at 11 29 04 PM

打開後選單會顯示這顏色的代碼,而只要按下你想使用的數值後,這數值就會自動複製到剪貼簿。
Screen Shot 2016 11 29 at 11 29 07 PM

如果你想快速了解到這網頁配色使用的話,可以利用「Webpage Color Analyzer」功能
Screen Shot 2016 11 29 at 11 29 45 PM

待一兩秒分析完後,上方就會顯示這網頁有使用的顏色代碼,這功能相當方便!
Screen Shot 2016 11 29 at 11 29 41 PM

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

補充資料

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

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

您也許會喜歡:

【隱藏好康】4G吃到飽千元有找 買多再幫你退差價!