ColorZilla 色碼工具教學,Chrome 擴充程式抓取網頁特定顏色代碼

ColorZilla 色碼工具教學

ColorZilla 色碼工具教學 :

1. ColorZilla 線上安裝教學

2. ColorZilla 詳細操作流程

ColorZilla 製圖軟體 ,在配色、抓色,都會用到類似 Photoshop 內的 “滴管” 來抓取此色塊色號,我們都知道程式內的滴管無法直接抓取網頁上的色塊,那在網頁上看到喜歡的配色、想知道色號套用在自己的圖或網站內你會怎麼做?有種方式是截圖下來後拉進你的做圖程式再用滴管抓色。那有沒有更方便的方法?有的,就是 ColorZilla。

ColorZilla 是一款瀏覽器擴充工具,根據官方擴充程式的介紹說明:ColorZilla 包括拾色器,滴管,漸變發生器和許多其他高級顏色工具,使用 ColorZilla ,可以從瀏覽器中的任何位置獲取顏色,以 CSS、RGB、Hex 和其他格式自動將生成或採樣的顏色複製到剪貼板,目前可以在 Chrome 及 FireFox 上使用。

Chrome 線上應用程式下載:https://chrome.google.com/webstore/detail/colorzilla/bhlhnicpbhignbdhedgjhgdocnmhomnp

ColorZilla 官方網址::https://www.colorzilla.com/

• ColorZilla安裝教學

第一步:進入 Chrome 線上應用程式商店下載。

ColorZilla 色碼工具教學

第二步:點選 “加到 Chrome” 後會跳出小視窗,點選新增擴充功能。
在官網上有聲明 ColorZilla 不會在任何網站上收集您的任何數據或瀏覽活動但需要此權限才能從網站中選擇顏色的基本功能。

ColorZilla 色碼工具教學

第三步:安裝完畢後即可在工具列上看到滴管圖示的ColorZilla。

ColorZilla 色碼工具教學

• ColorZilla使用教學

第一步:點擊滴管圖示點選 Page Color Picker Active ,將鼠標移置想要抓取的色塊上,確定好後點擊滑鼠一下,色號就會自動複製到黏貼板內了。

ColorZilla 色碼工具教學

第二步: Picked Color History 選項:右邊格子裡會顯示出你查詢過的顏色,而左邊則是調色盤功能意義上並不大。

ColorZilla 色碼工具教學

第三步: Palette Browser 選項:可以查詢色彩飽和度、網頁安全用色等等。

ColorZilla 色碼工具教學

第四步: Webpage Color Analyzer 選項:顯示出你現在網頁上所有CSS顏色,典籍顏色可看到色碼。

ColorZilla 色碼工具教學

第五步:最後CSS Gradient Generator選項:點擊後會另開一個視窗,可以設定漸層顏色,包含垂直、水平、斜角,除了有預設的顏色外也可自行設定漸層。

ColorZilla 色碼工具教學

第六步:而設定完後即可得到一組 CSS 碼,如此就可以得知控制當前網頁樣式的 CSS 語法了喔!

ColorZilla 色碼工具教學

 

結語:

在使用過程中,發現查詢網頁所有 CSS 色彩的功能會有無法顯示的狀況,除此大家可以使用抓色的功能運用在自己的圖及網頁中呦!今天的教學到這裡告一段落了,不要忘記在右側訂閱鵠學苑電子報,確保收到最新 WordPress 教學文章,如果有網頁設計相關需求,或者想了解最新網站知識,也可以到 鵠崙設計 做線上免費諮詢喔!我們下次的教學見~

網站架設工具與免費資源相關文章:

Chrome 瀏覽器線上 office 編輯工具介紹,免下載、離線也能編輯

網頁素材分享 – 可商用免費下載 icon 圖示,IconStore 網站介紹

網頁視覺設計 – 以貝茲曲線網站 10 種字母測驗圓弧圖是否完美

Google Chrome Labs Squoosh 高品質線上圖片壓縮工具介紹

什麼是 CC0 圖庫?設計師必備高解析好圖庫推薦 – Unsplash

Chrome FireShot 網頁長截圖工具 – 網頁設計擴充功能教學

網站架設知識推薦閱讀:

如何在 Google Analytics 顯示 Facebook Instant Articles 流量?

Google FAQ 結構化資料啟用,讓問與答在搜尋結果中直接呈現

Google 演算法更新,使用者搜尋後將出現多樣性的網站內容

鵠學苑

鵠學苑

我們是由一群熱愛 WordPress 網站架設的同好所組成的團隊,希望可以將這套 頂尖的 CMS 管理系統推廣給想要架站的朋友們,並且能夠在過程中互相交流心得,讓網站架設過程變得更有效率!

訂閱電子報

立即訂閱鵠崙設計(鵠學苑)!我們將不定期發送架站教學文章、最新網站版型介紹以及網頁設計最優惠價格!

熱門文章

最新文章

相關文章

標籤雲

Sign up for our Newsletter

Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit

Scroll to Top